Nachdem unsere Münzen nun schick animiert sind, ist der nächste logische Schritt, auch unseren Player zu animieren. Dadurch wird das Spielgeschehen noch dynamischer und die Aktionen unseres Charakters werden klarer visualisiert – z.B. eine „idle“-Animation, wenn er stillsteht, und eine „walk“-Animation, wenn er sich bewegt.

Dabei nutzen wir im Grunde dieselben AnimatedSprite2D– und SpriteFrames–Konzepte wie bei der Münze, aber wir steuern die abgespielte Animation jetzt per Skript.

In diesem Artikel wirst du:

• Den Sprite2D unseres Players durch einen AnimatedSprite2D ersetzen.
• Mehrere Animationen (z.B. „idle“, „walk“) in einer SpriteFrames-Ressource erstellen.
• Lernen, wie man Sprite Sheets effizient importiert, um Animation-Frames zu erhalten.
• Das player.gd Skript erweitern, um die richtige Animation basierend auf der Bewegung des Players abzuspielen.

---

Schritt 1: Den Sprite2D durch AnimatedSprite2D ersetzen

Ähnlich wie bei der Münze tauschen wir den einfachen Sprite2D-Node unseres Players gegen einen AnimatedSprite2D aus.

1. Öffne deine Szene player.tscn.
2. Wähle im Scene Dock den Sprite-Node (Sprite2D) aus, der aktuell ein Kind deines Player-Node (CharacterBody2D) ist.
3. Klicke mit der rechten Maustaste auf den Sprite2D Node und wähle „Change Type“.
4. Suche im Suchfeld nach AnimatedSprite2D, wähle ihn aus und klicke „Change“. Benenne ihn um in „Animation„.
5. Dein Sprite2D wurde nun durch einen AnimatedSprite2D ersetzt. Ein Warnsymbol zeigt an, dass noch keine Animationen definiert sind.

---

Schritt 2: Eine neue SpriteFrames-Ressource erstellen und Animationen hinzufügen

Wir brauchen wieder eine SpriteFrames-Ressource, um die Animationen für unseren Player zu definieren.

1. Wähle im Scene Dock deinen Animation-Node (AnimatedSprite2D aus.
2. Gehe in den Inspector. Klappe den Abschnitt „Animation“ (innerhalb von AnimatedSprite2D) auf.
3. Du siehst dort die Eigenschaft „Sprite Frames“, die momentan „<empty>“ ist.
4. Klicke auf das Dropdown-Menü neben „Sprite Frames“ und wähle „New SpriteFrames“.
5. Eine neue SpriteFrames-Ressource wurde erstellt. Klicke auf das neu erschienene SpriteFrames-Symbol (da wo gerade noch <empty> stand).
6. Unten im Editor öffnet sich der SpriteFrames-Editor. Dies ist der Bereich, in dem wir unsere Animationen erstellen und verwalten.

Sprite Sheets importieren

Die meisten Player-Animationen liegen als sogenannte Sprite Sheets vor – große Bilder, die alle Frames einer oder mehrerer Animationen enthalten. Du kannst z.B. eine Player-Animation als Sprite Sheet von itch.io verwenden. Lade sie herunter, entpacke das Zip-Archiv und füge die Dateien „Idle.png“ und „Walk.png“ dem File-System-Dock im Ordner „images“ hinzu.
Godot macht das Importieren von Frames aus Sprite Sheets sehr einfach:

1. Im SpriteFrames-Editor (unten im Editor) siehst du eine Liste deiner Animationen (standardmäßig „default“). Diese benennen wir um in „idle“ (Leerlauf).
2. Auf der rechten Seite, über dem Frame-Bereich, findest du den Button „Add Frames from Sprite Sheet“ (ein Gitter-Icon mit Plus). Klicke darauf.
3. Wähle deine Sprite Sheet-Bilddatei aus (hier also „Idle.png“).
4. Ein „Select Frames“-Fenster öffnet sich. Hier kannst du einstellen, wie Godot die Frames aus dem Bild „schneiden“ soll. Über „Auto Slice“ kann der Vorgang in der Regel gut abgekürzt werden. Klicke darauf und die Frames werden in Teile á 510 x 510 px geschnitten.
5. Wähle nun alle BIlder von links nach rechts aus. Mit STRG + Mausrad kannst du zoomen, das macht die Auswahl einfacher.
6. Nachdem du die Fames ausgewählt hast, klicke „Add 16 Frame(s)“. Die Frames werden der aktuell ausgewählten Animation („idle“) hinzugefügt.

Wenn du einzelne Frame-Bilder hast, kannst du sie auch einfach per Drag-and-Drop aus dem Filesystem Dock in den Frame-Bereich ziehen.

Neue Animationen erstellen

Für unseren Player werden wir zwei Animationen hinzufügen: „idle“ und „walk“.

1. Falls noch nicht geschehen, füge die Animation für „idle“ wie oben beschrieben hinzu.
2. Klicke auf den Button „Add Animation“ (das BLatt mit dem Plus-Icon) im SpriteFrames-Editor, um eine neue Animation zu erstellen. Benenne sie „walk“.
3. Füge die Frames für die „walk“-Animation hinzu.
4. Passe die „Speed (FPS)“ für jede Animation an, damit sie flüssig aussieht (bei 16 Bildern z.B. 16 FPS). Aktiviere „Looping“ für die „idle“-Animation, damit sie sich wiederholt.
5. Stelle außerdem sicher, dass „Autoplay on Load“ für die „idle“-Animation aktiviert ist. Diese Einstellung findest du links neben dem „Looping„.

---

Schritt 3: Das Player-Script für Animationssteuerung erweitern

Jetzt geht es darum, die richtige Animation basierend auf der Bewegung unseres Players abzuspielen. Die Bewegungslogik wird in _physics_process(delta) verarbeitet, und dort setzen wir auch die velocity des Players. Die Entscheidung, welche Animation laufen soll, hängt direkt von dieser velocity ab.

• Öffne dein player.gd Script (es sollte bereits an deinem Player (CharacterBody2D) Node hängen).
• Als Erstes brauchen wir eine Referenz auf unseren AnimatedSprite2D-Node im Skript. Füge diese Zeile ganz oben im Skript ein, am besten direkt nach den extends und class_name-Deklarationen:

@onready var animated_sprite_2d = $Animation: Dies ist eine bequeme Methode, um auf Kind-Nodes zuzugreifen. $AnimatedSprite2D ist eine Kurzform für get_node("Animation"). onready stellt sicher, dass die Variable erst initialisiert wird, wenn der Node und seine Kinder in der Szene bereit sind.Wichtig: Der Name hinter dem $ muss genau der Bezeichnung im Node-Dock entsprechen.

• Navigiere zur Funktion _physics_process(delta). Hier werden wir die Logik für die Animationen hinzufügen.

Erklärung des Codes

1. velocity.length(): Der velocity-Vektor hat eine Länge, die seiner Geschwindigkeit entspricht. Wenn der Player stillsteht, ist velocity ein Vector2.ZERO, und length() ist 0. Wenn er sich bewegt, ist length() größer als 0. Wir verwenden einen kleinen Schwellenwert (0.1), um sicherzustellen, dass wir nicht auf winzige, unmerkliche Bewegungen reagieren.
2. animation: AnimatedSprite2D: Dies ist die @onready Variable, die eine Referenz auf deine Animation enthält.
3. if velocity.x > 0: animation.flip_h = false: Wenn der Spieler sich nach rechts bewegt (velocity_x ist positiv), wollen wir, dass der Sprite normal aussieht, also setzen wir flip_h auf false.
4. else velocity_x < 0: animation.flip_h = true: Wenn der Spieler sich nach links bewegt (velocity_x ist negativ), wollen wir, dass der Sprite gespiegelt wird, also setzen wir flip_h auf true.
5. animation.animation != anim_name: Diese Prüfung ist wichtig! Sie verhindert, dass wir die play()-Methode in jedem einzelnen Frame aufrufen, wenn die gewünschte Animation bereits läuft.

---

Schritt 4: Speichern und Ausführen

1. Speichere dein player.gd Skript (Strg + S).
2. Stelle sicher, dass deine player.tscn und coin.tscn ebenfalls gespeichert sind.
3. Führe dein Projekt aus (F5).

Jetzt sollte sich dein Player:in bewegen und zwischen „idle“- und „run“-Animationen wechseln, je nachdem, ob er sich bewegt oder stillsteht! Wenn du separate Richtungsanimationen hinzugefügt hast, wird er sogar in die entsprechende Richtung „laufen“.

---

Dein nächster Schritt

Sieht doch gut aus! Du hast gelernt, wie man AnimatedSprite2D nutzt, um komplexe Animationen per Skript zu steuern. Das gibt deinem Spiel sofort viel mehr visuelles Feedback und Tiefe.

Als Nächstes ergänzen wir Animationen und Soundeffekte, die abgespielt werden, wenn der Spieler eine Münze einsammelt.