v4.x/Klasse FIGUR

Dies ist ein Tutorial für die Edu-Variante der Engine Alpha 4.x. Eine Übersicht aller Edu-Tutorials siehst du hier.

Inhalt

In diesem Tutorial:

• erstellst du Figuren aus Einzelbildern, animierten Grafiken, Bildfolgen in Ordnern oder Spritesheets
• weist du einer Figur situationsbedingt andere Bildfolgen / Animationen zu

Klasse FIGUR

Einer FIGUR können mehrere Bilder, Bildfolgen, Spritesheets oder animierte GIFs zugeordnet werden. Deshalb wird jedem Bild, Bilderfolge, Spritesheet oder animiertem GIF in der Regel zusätzlich ein Zustand zugewiesen werden. Dieser Zustand ist ein beliebiger Name, den man der Bildfolge entsprechend aussagekräftig benennen sollte. Der Zustandsname dient später dazu, zwischen diesen Zuständen (situationsbedingt) hin und her zu wechseln.

Konstruktoren

Es gibt 4 Konstruktoren der Klasse FIGUR:

Einzel Bild

• Konstruktor für normale Bilder (PNG, JPG, GIF)    

  FIGUR(String Bilddatei)
  

  hase_bild = new FIGUR( "Hase.png" );
  

       Die Bilddatei muss mit Endung angegeben werden und im BlueJ-Projekt-Ordner liegen!
       Dieser einfache Konstruktor verzichtet auf Übergabe eines Zustandsnamens und vergibt intern den Namen "standard"

GIF aninmiert

• Konstruktor für animierte GIFs    

  FIGUR(String Zustandsname, String Bilddatei)
  

  hase_anim_gif = new FIGUR( "boxen" , "Hase_boxen_anim.gif" );
  

       Die Bilddatei muss mit Endung angegeben werden und im BlueJ-Projekt-Ordner liegen!

Spritesheet 4x1

• Konstruktor für Spritesheets    

  FIGUR(String Zustandsname, String Bilddatei, int anz__X, int anz_Y)
  

  hase_spritesheet = new FIGUR( "stehen" , "hase_spritesheet.png" , 4 , 1 );
  

       Die Bilddatei muss mit Endung angegeben werden und im BlueJ-Projekt-Ordner liegen!
       Spritesheets sind Bildfolgen in rechteckiger Anordnung: anz_X: Bilder in der Breite, anz_Y: Bilder in der Höhe.

Ordner mit Bildern

• Konstruktor für Bildfolgen in einem separaten Ordner    

  FIGUR(String Zustandsname, String Ordnername, String Dateipräfix)
  

  hase_einzelbilder = new FIGUR( "kicken" , "Bilder" , "Hase_kick" );
  

       Der Ordner mit den Einzelbildern muss im BlueJ-Projekt-Ordner liegen!
       Von den Bildern muss nur der gemeinsame Namens-Anteil (Präfix) angegeben werden. So können nummerierte Bilder "in einem Rutsch" geladen werden.

Weitere Zustände und Übergänge hinzufügen

kämpfender Hase

Eine FIGUR kann nicht nur einen Zustand und damit nicht nur eine Bildfolge enthalten. Moderne Spielfiguren verfügen über situationsbedingte Bildfolgen. Hierbei wird intern in einen anderen Zustand der Figur umgeschaltet und entsprechend eine andere Bildfolge animiert. So kann unser Hase z.B. entweder stehen oder boxen oder kicken. Dabei kann die Animationsgeschwindigkeit für jeden Zustand individuell und unabhängig von den anderen Zuständen eingestellt werden. Zustände kann man im Code namentlich aktivieren, z.B. innerhalb von Fallunterscheidungen oder allgemein nach gewissen Ereignissen. Geeignete Methoden sind hierfür tick() (zeitgesteuert, wiederkehrend prüfen) oder tasteReagieren(int code) (auf eine Tastatur-Ereignis hin) oder bildAktualisierungReagieren() (bei jedem neu generierten Einzelbild der Bühne). Man kann auch automatisch nach einem Zustand in einen anderen Übergehen.

Dafür bietet die Klasse FIGUR folgende Methoden an:

• fuegeZustandVonEinzelbildHinzu(String neuerZustand , String... Dateipfade)
  

• fuegeZustandVonGifHinzu(String neuerZustand , String Dateiname)
  

• fuegeZustandVonPraefixHinzu(String neuerZustand , String Verzeichnis, String praefix)
  

• fuegeZustandVonSpritesheetHinzu(String neuerZustand , String Bildpfad, int anz_Bilder_X, int anz_Bilder_Y)
  

• setzeAnimationsGeschwindigkeit(String Zustand , double sekunden_pro_Bild)
  

• setzeAutomatischenUebergang(String zustandVon, String zustandNach)
  

• setzeZustand(String Zustand)
  

• nenneZustand() : String
  

Code-Beispiel

kämpfender Hase

class FIGUR_Zustand_Demo
extends SPIEL
{
    private RECHTECK hintergrund;
    private FIGUR spielfigur;
    
    public FIGUR_Zustand_Demo()
    {
        this.hintergrund = new RECHTECK( 5 , 5 );
        this.hintergrund.setzeFarbe( "weiß" );
        this.hintergrund.setzeMittelpunkt( 0 , 0 );
        
        this.spielfigur = new FIGUR( "stehen" , "hase_stehen_spritesheet_4_1.png" , 4 , 1 );
        this.spielfigur.setzeAnimationsgeschwindigkeit( "stehen" , 0.2 );
        
        this.spielfigur.fuegeZustandVonGifHinzu( "boxen" , "Hase_boxen_anim.gif" );
        this.spielfigur.setzeAnimationsgeschwindigkeit( "boxen" , 0.2 );
        
        this.spielfigur.fuegeZustandVonPraefixHinzu( "kicken" , "Bilder" , "Hase_kick" );
        this.spielfigur.setzeAnimationsgeschwindigkeit( "kicken" , 0.2 );
        
        this.spielfigur.setzeAutomatischenUebergang( "boxen" , "stehen" );
        this.spielfigur.setzeAutomatischenUebergang( "kicken" , "stehen" );
    }
    
    @Override
    public void tasteReagieren( int code )
    {
        switch (code)
        {
            case TASTE.K :       this.spielfigur.setzeZustand( "kicken" ); break;
            case TASTE.B :       this.spielfigur.setzeZustand( "boxen" ); break;
            case TASTE.LINKS :   this.spielfigur.spiegelnHorizontal( true ); break;
            case TASTE.RECHTS :  this.spielfigur.spiegelnHorizontal( false ); break;
        }
    }
}

animiertes GIF

Hier der kickende Hase als Animiertes Gif anstatt 4 Einzelbildern zum Download:

Das Tutorial ist beendet. Das nächste ist Die Superklasse EduActor . Wenn du Feedback für uns hast, melde dich gerne.