Bisher waren unsere Münzen statisch, nur ein einzelnes Bild, das bei Berührung verschwand. Um unser Spiel lebendiger zu gestalten und unseren Münzen mehr Charakter zu verleihen, fügen wir eine Animation hinzu. In Godot ist das ganz einfach mit dem Node AnimatedSprite2D und SpriteFrames möglich.
Mit diesem Schritt wirst du:
- Den bestehenden
Sprite2Dunserer Münze durch einenAnimatedSprite2Dersetzen. - Das Konzept der SpriteFrames-Ressource verstehen, die Animationen definiert.
- Eine einfache Animation für unsere Münze erstellen.
- Die Animation automatisch starten lassen, wenn die Münze geladen wird.
Schritt 1: Den Sprite2D durch AnimatedSprite2D ersetzen
Als Erstes tauschen wir den einfachen Sprite2D-Node unserer Münze gegen einen AnimatedSprite2D aus. Dieser Node ist speziell dafür gemacht, mehrere Texturen als Frames abzuspielen und so eine Animation zu erzeugen.
- Öffne deine Szene
coin.tscn. - Wähle im Scene Dock den
Sprite2DNode (Sprite) aus, der aktuell als Kind deines Coin (Area2D) existiert. - Klicke mit der rechten Maustaste auf den
Sprite2DNode und wähle „Change Type…“. - Suche im Suchfeld nach
AnimatedSprite2D, wähle ihn aus und klicke „Change“. - Benenne ihn um in „Animation„.
- Dein
Sprite2Dwurde nun durch einenAnimatedSprite2Dersetzt. Du wirst feststellen, dass er ein Warnsymbol anzeigt, da noch keine Animationen definiert sind.
Schritt 2: Eine neue SpriteFrames-Ressource erstellen
Ein AnimatedSprite2D benötigt eine SpriteFrames-Ressource. Diese Ressource ist wie eine Bibliothek für Animationen. Sie enthält alle Frames (Bilder) und definiert, welche Frames zu welcher Animation gehören, wie schnell sie abgespielt werden sollen und ob sie loopen.
- Wähle im Scene Dock deinen
AnimatedSprite2DNode aus (innerhalb desCoinNodes). - Gehe in den Inspector. Klappe den Abschnitt „Animation“ (innerhalb von
AnimatedSprite2D) auf. - Du siehst dort die Eigenschaft „Sprite Frames“, die momentan „<empty>“ ist.
- Klicke auf das Dropdown-Menü neben „Sprite Frames“ und wähle „New SpriteFrames“.
- Eine neue SpriteFrames-Ressource wurde erstellt. Klicke auf das neu erschienene SpriteFrames-Symbol (da wo gerade noch <empty> stand).
- Unten im Editor öffnet sich der SpriteFrames-Editor. Dies ist der Bereich, in dem wir unsere Animationen erstellen und verwalten.
Schritt 3: Die Münz-Animation erstellen
Jetzt fügen wir die Frames für unsere Münz-Animation hinzu. Für dieses Beispiel nehmen wir an, du hast eine Bilddatei mit mehreren Frames deiner Münze (z.B. eine Sprite-Sheet oder einzelne png-Dateien für jeden Frame wie in meinem Vorschlag zu den animierten Münzen auf itch.io).
Bilder zum Projekt hinzufügen
Für unser Beispiel gehe ich davon aus, dass du die o.g. Coins verwendest. Dabei die Animation mit dem Stern (21 – 30). Lade die Coins herunter und entpacke die Zip-Datei irgendwo auf deinem PC.
- Erstelle im File-System-Dock (links unten) einen neuen Ordner „images“.
- Wechsel nun in den Explorer an den Ort, an den du die Bilder der Münzen entpackt hast.
- Wähle eine Farbe deiner Wahl (ich bevorzuge Silber) und markiere die Dateien mit der Nummer 21 – 30.
- Ziehe die Dateien per Drag & Drop auf den Ordner „images“, den du gerade erstellt hast.
Godot wird nun die Bilder importieren und wir können sie verwenden.
Um den SpriteFrame nun mit Leben zu füllen, gehe folgendermaßen vor:
- Im SpriteFrames-Editor (unten) siehst du auf der linken Seite die Liste deiner Animationen. Standardmäßig gibt es eine Animation namens „default“. Wir werden diese nutzen, allerdings benennen wir sie um in „rotate„.
- Auf der rechten Seite siehst du einen Bereich, in den du Texturen ziehen kannst.
- Ziehe die Dateien aus dem Ordner „images“ in den Frame-Bereich der „rotate“-Animation. Du kannst sie einzeln oder alle auf einmal reinziehen.
- Du siehst nun die hinzugefügten
png-Bilder als Frames. - Im SpriteFrames-Editor gibt es Einstellungen für die ausgewählte Animation. Unter „Animation Speed (FPS)“ kannst du die Abspielgeschwindigkeit anpassen. Eine Geschwindigkeit von einem FPS pro Bild funktioniert für mich gut. Wir haben 10 BIlder, also stelle die Geschwindigkeit auf 10 FPS ein.
- Stelle sicher, dass die Option „Looping“ aktiviert ist (sollte bereits standardmäßig so sein), damit die Animation in einer Endlosschleife abgespielt wird. Das sind die im Kreis angeordneten Pfeile links neben der Geschwindigkeit.
- Stelle außerdem sicher, dass „Autoplay on Load“ aktiviert ist. Diese Einstellung findest du wiederum links neben dem „Looping„. Das ist ein „Play“-Symbol mit einem A darin.
- (Optional) Möchtest du die Geschwindigkeit mit der sich die Münze dreht verändern (schneller / langsamer), so kannst du das über die Einstellung „Frame Duration“ steuern. Werte > 1 machen die Animation langsamer, Werte < 1 machen sie schneller. Du kannst diese Einstellung für jedes Bild einzeln machen. Möchtest du die gesamte Animation verlangsamen, stelle sicher, dass alle Bilder markiert sind. So kannst du die Einstellung für alle gleichzeitig machen. Die Duration wird unter dem Bild angezeigt (z.B. als [x 2.0]).
Schritt 4: Speichern und Testen
Jetzt ist es Zeit, unsere animierte Münze in Aktion zu sehen!
- Speichere deine Szene
coin.tscn(Strg + S). - Führe das Projekt aus (F5).
Du solltest nun sehen, wie deine Münzen in der Welt animiert sind und glänzen, bevor du sie einsammelst!
Darauf achten: Die Rolle von SpriteFrames
Die SpriteFrames-Ressource ist ein zentrales Element für Animationen in Godot. Sie trennt die Animationsdaten (welche Bilder, in welcher Reihenfolge, wie schnell) vom AnimatedSprite2D-Node selbst. Das hat den Vorteil, dass du dieselbe SpriteFrames-Ressource in mehreren AnimatedSprite2D-Nodes wiederverwenden kannst, was sehr effizient ist, wenn du viele Instanzen derselben animierten Objekte hast (z.B. viele Münzen, die alle gleich animiert sind). Du kannst die SpriteFrames-Ressource auch separat im Filesystem Dock speichern, um sie noch einfacher zu verwalten. (Dazu im Inspector der Animation das Sprite-Frame-Dropdown öffnen und „Save as…“ auswählen.)
Dein nächster Schritt
Du hast erfolgreich Animationen zu unseren Münzen hinzugefügt und dabei AnimatedSprite2D und SpriteFrames kennengelernt! Wir haben nun ein lebendigeres Objekt in unserem Spiel.
Als Nächstes können wir uns der Animation des Spielers widmen. Da sich hier die Animationen ändern, je nachdem was der Spieler gerade tut, steuern wir diese über Code.