2D Animationen sind immer wieder Bestandteile von Spielen, auch in 3D Spielen werden 2D Animationen benutzt, um z.B. Animierte Menüs und Mauszeiger darzustellen. Der Aufbau und die Funktionsweise einer entsprechenden Klasse wird in diesem Artikel beschrieben.

Allgemeines zur Animation

Eine Animation ist eine Abfolge von Bildern, die sich von einem Bild zum nächsten Bild von einander Unterscheiden und so der Eindruck einer Bewegung entsteht. Das menschliche Auge nimmt eine Abfolge von ca. 24 Bildern pro Sekunde als flüssige Bewegung wahr.

Sprite Sheet zur Animation in der Tabelle

Beispiele anhand von verschieden schnellen Animationen

Animation	Geschwindigkeit
	ca. 1 Bild pro Sekunde
	ca. 1,5 Bilder pro Sekunde
	ca. 6 Bilder pro Sekunde
	ca. 10 Bilder pro Sekunde

Der Eindruck einer Flüssigen Bewegung wird erhöht in dem die Anzahl der Einzelbilder gesteigert wird, das heißt eine Animation mit 5 (einzelnen) Bildern sieht nicht so flüssig aus, wie eine Animation mit 10 (einzelnen) Bildern die in derselben Zeitspanne dargestellt werden. Letzten Endes läuft es darauf hinaus, dass eine flüssige Animation mindestens 24 (einzelne) Bilder pro Sekunde haben sollte. Wie aber oben in der Tabelle zu erkennen ist, geht es auch mit weniger Bildern.

Aufbau der 2D Animations Klasse

Klassendiagramm einer möglichen 2D Animations Klasse

Der Aufbau einer 2D Animations Klasse muss nicht zwingend genauso aussehen, wie hier Beschrieben. Es gibt auch andere Varianten eine solche Klasse aufzubauen, deshalb ist dies nur stellvertretend für eine Vielzahl an Möglichkeiten. Die hier Vorgestellte Möglichkeit basiert auf der Sprite-Sheet-Klasse.

Wie in dem Bild des Klassendiagramms Rechts zu sehen ist, enthält die Klasse C2dAnimation folgende Klassenvariablen:

• eine Instanz der Sprite-Sheet-Klasse (Sheet)
• einen statischen Zeitgeber (Timer)
• eine float Variable die die Zeit enthält wann das nächste Bild dargestellt werden soll (NextFrameTime)
• eine float Variable die Angibt wie lange ein Bild dargestellt werden soll (FrameTime)
• eine int Variable die Angibt welcher der Erste Index auf dem Sprite Sheet für die Animation ist (FirstFrame)
• eine int Variable die Angibt welches der Letzte Index auf dem Sprite Sheet für die Animation ist (LastFrame)
• eine int Variable die Angibt welches der Aktuelle Index ist (CurrentFrame)
• eine int Variable die Angibt welcher Index des Sprite Sheets angezeigt werden soll wenn die Animation gestoppt ist (StopFrame)
• eine bool Variable die Angibt ob das Sprite gerade Animiert wird oder nicht (Animation_On)

Weiterhin hat die Klasse C2dAnimation folgende Klassenmethoden:

• eine Methode um der Instanz der Sprite-Sheet-Klasse mitzuteilen, welches Bild geladen werden soll und wie groß der Angezeigte Bildausschnitt sein soll (Load_SpriteSheet(String path, int X_Size, int Y_Size))
• eine Methode die das aktuell gültige Sprite zurück gibt (Get_CurrentFrame())
• Set Methode für die relevanten Daten der Animation (Set_Animation(int firstframe, int lastframe, int stopframe, float frametime))
• ein Methode die die Animation an oder aus Schaltet (Animation_On(bool Value))

Die Floatwerte NextFrameTime und FrameTime können auch durch einen anderen Datentyp repräsentiert werden, dies ist Abhängig vom Timer, je nach dem welchen Datentyp er nutzt, um die Verstrichene Zeit zu speichern. Dieser Datentyp variiert also von Programmiersprache zu Programmiersprache und genutzter Bibliothek.

Funktionsweise der 2D Animations Klasse

Zuerst noch mal der Hinweis, falls dieses noch nicht geschehen ist, sich den Artikel für die Sprite-Sheet-Klasse durchzulesen, das erhöht das Verständnis für die Funktionsweise der 2D Animations Klasse.

Die Funktion Load_SpriteSheet(String path, int SpriteSize_X, int SpriteSize_Y) veranlasst, dass die gewünschte Bilddatei in den Speicher geladen wird. Die Werte für SpriteSize_X und SpriteSize_Y bestimmen wie groß das "Sichtfenster" innerhalb des Sprite Sheets sein soll.

Der Aufruf der Funktion Set_Animation(int firstframe, int lastframe, int stopframe, float frametime) legt die Eckdaten der Animation fest. Der Wert firstframe bestimmt dabei den ersten Index, für das erste Bild der Animation, auf dem Sprite Sheet und lastframe legt den Index für das letzte Bild der Animation auf dem Sprite Sheet fest. Der Wert von frametime legt fest wie viel Zeit vergehen soll bis das nächste Bild der Animation angezeigt werden soll. Die Variable stopframe enthält den Index für das Bild, welches Angezeigt wird, wenn die Animation gestoppt ist, dieses könnte z.B. das erste Bild der Animation sein oder aber auch ein ganz anderes Bild auf dem Sprite Sheet.

Der Aufruf der Animation_On(bool Value) Methode bewirkt das die Variable Animation_On auf true gesetzt wird, ebenfalls wird der Wert von CurrentFrame auf den Wert der Variable FirstFrame gesetzt. Mit der Rechnung NextFrameTime = Timer + FrameTime wird noch bestimmt zu welchem Zeitpunkt das nächste Bild der Animation angezeigt werden soll.

Da es ausreichend ist, dass jede Instanz der 2D Animaitons Klasse auf einen einzigen Zeitgeber zurückgreift, ist dieser statisch. Der statische Zeitgeber ist sozusagen der Motor der Klasse. Wird die Funktion Get_CurrentFrame() aufgerufen wird als erstes überprüft ob Animation_On true oder false ist. Wenn Animation_On gleich false ist, wird der Sprite-Sheet-Klasse mittels der Get_Sprite(int Index) Methode die Variable StopFrame übergeben und die Funktion gibt das gewünschte Sprite zurück, für den Fall das keine Animation erwünscht ist. Für den Fall, dass Animation_On gleich true ist, wird verglichen ob, NextFrameTime kleiner ist wie Timer. Solange NextFrameTime größer ist wie Timer wird das aktuelle Bild der Animation dargestellt. Wenn der Wert des Timer größer wird als der Wert von NextFrameTime, wird CurrentFrame um eins erhöht und der Wert von NextFrameTime mit der Rechnung NextFrameTime = Timer + FrameTime neu ermittelt. Trifft der Fall ein, dass der Wert von CurrentFrame größer wird wie der Wert von LastFrame, wird CurrentFrame wieder auf den Wert von FirstFrame gesetzt. So beginnt die Animation wieder von vorne.

Pseudocode

Da es eine große Anzahl von Frameworks und Programmiersprachen gibt, sind hier exemplarisch die wichtigsten Funktionen der 2D Animations Klasse in Pseudocode. Das Transferieren des Pseudocodes in die gewünschte Programmiersprache / Framework sollte für die Meisten keine Probleme darstellen.

/* Header der 2dAnimation Klasse  */
 
class C2dAnimation 
{
private:
    static Framework::Zeitgeber Timer;    // Zeitgeber abhängig von Programmiersprache oder verwendeter Bibliothek
    CSpriteSheet Sheet;                   // Instanz der Sprite-Sheet-Klasse zum ermitteln des Richtigen Sprites
    float FrameTime;                      // Zeit die ein Frame der Animation angezeigt wird
    float NextFrameTime;                  // Zeit bei der das nächste Sprite angezeigt wird
    int FirstFrame;                       // Erste Index auf dem Sprite Sheet für die Animation
    int LastFrame;                        // Letzte Index auf dem Sprite Sheet für die Animation
    int StopFrame;                        // Index des Bildes was Dargstellt wird wenn die Animation aus ist
    bool Animation_On;                    // Animation an/aus
public:
    bool Load_SpriteSheet(String Path,
                          int X_Size,
                          int Y_Size);    // Funktion zum Laden des Richtigen Bildes
    Framework::Sprite Get_CurrentFrame(); // Funktion die das darzustellende Sprite liefert
    void Set_Animation(int firstframe,
                       int lastframe,
                       int stopframe,
                       float frametime)   // Setzten der Animationsdaten
    bool Animation_On(bool Value);        // Funktion um die Animation ein- oder ausschalten
    C2dAnimation();                       // Konstruktor
    ~C2dAnimation();                      // Destroktor
};

/* Ladefunktion für das Sprite Sheet*/
 
bool C2dAnimation::Load_SpriteSheet(String Path,int X_Size,int Y_Size)
{
    zurückgeben Sheet.Load(Path,X_Size,Y_Size); // gibt true oder false zurück
}

/* Liefert das Aktuell gültige Sprite zurück */
 
Framework::Sprite C2dAnimation::Get_CurrentFrame()
{
    Wenn Animation an ist(Animation_On == true)
    {
        Wenn NextFrameTime kleiner Timer ist (NextFrameTime < Timer)
        {
            zurückgeben Sheet.Get_Sprite(CurrentFrame);
        }
        sonst
        {
            CurrentFrame = CurrenFrame + 1;
            Wenn CurrentFrame gößer LastFrame ist (CurrentFrame > LastFrame)
            {
                CurrentFrame = FirstFrame;
                NextFrameTime = Timer + FrameTime;
            }
            zurückgeben Sheet.Get_Sprite(CurrentFrame);
        }
    }
    sonst
    {
        zurückgeben Sheet.Get_Sprite(StopFrame);
    }
}

/* Daten der Animation Setzen */
 
void C2dAnimation::Set_Animation(int firstframe,int lastframe,int stopframe,float frametime)
{
    FirstFrame = firstframe;
    LastFrame = lastframe;
    StopFrame = stopframe;
    FrameTime = frametime;
}

/* Die Ein- Ausschaltfunktion der Animation */
 
void C2dAnimation::Animation_On(bool Value)
{
    Wenn Value True ist (Value == true)
    {
        CurrentFrame = FirstFrame;
        NextFrameTime = Timer + FrameTime;
        Animation_On = true;
    }
    sonst
    {
        Animation_On = false;
    }
}