{"id":592,"date":"2025-06-10T09:00:00","date_gmt":"2025-06-10T07:00:00","guid":{"rendered":"https:\/\/staratnight.de\/blog\/?p=592"},"modified":"2025-06-07T13:07:25","modified_gmt":"2025-06-07T11:07:25","slug":"animationen-mit-animatedsprite2d","status":"publish","type":"post","link":"https:\/\/staratnight.de\/blog\/animationen-mit-animatedsprite2d\/","title":{"rendered":"Animationen mit AnimatedSprite2D"},"content":{"rendered":"\n<p>Bisher waren unsere M\u00fcnzen statisch, nur ein einzelnes Bild, das bei Ber\u00fchrung verschwand. Um unser Spiel lebendiger zu gestalten und unseren M\u00fcnzen mehr Charakter zu verleihen, f\u00fcgen wir eine <strong>Animation<\/strong> hinzu. In Godot ist das ganz einfach mit dem Node <strong><code>AnimatedSprite2D<\/code><\/strong> und <strong>SpriteFrames<\/strong> m\u00f6glich.<\/p>\n\n\n\n<p>Mit diesem Schritt wirst du:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Den bestehenden <code>Sprite2D<\/code> unserer M\u00fcnze durch einen <code>AnimatedSprite2D<\/code> ersetzen.<\/li>\n\n\n\n<li>Das Konzept der <strong>SpriteFrames<\/strong>-Ressource verstehen, die Animationen definiert.<\/li>\n\n\n\n<li>Eine einfache Animation f\u00fcr unsere M\u00fcnze erstellen.<\/li>\n\n\n\n<li>Die Animation automatisch starten lassen, wenn die M\u00fcnze geladen wird.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt 1: Den Sprite2D durch AnimatedSprite2D ersetzen<\/h3>\n\n\n\n<p>Als Erstes tauschen wir den einfachen <code>Sprite2D<\/code>-Node unserer M\u00fcnze gegen einen <code>AnimatedSprite2D<\/code> aus. Dieser Node ist speziell daf\u00fcr gemacht, mehrere Texturen als Frames abzuspielen und so eine Animation zu erzeugen.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u00d6ffne deine Szene <strong><code>coin.tscn<\/code><\/strong>.<\/li>\n\n\n\n<li>W\u00e4hle im Scene Dock den <strong><code>Sprite2D<\/code><\/strong> Node (<strong>Sprite<\/strong>) aus, der aktuell als Kind deines <strong>Coin<\/strong> (<code>Area2D<\/code>) existiert.<\/li>\n\n\n\n<li>Klicke mit der rechten Maustaste auf den <strong><code>Sprite2D<\/code><\/strong> Node und w\u00e4hle <strong>&#8222;Change Type&#8230;&#8220;<\/strong>.<\/li>\n\n\n\n<li>Suche im Suchfeld nach <strong><code>AnimatedSprite2D<\/code><\/strong>, w\u00e4hle ihn aus und klicke <strong>&#8222;Change&#8220;<\/strong>.<\/li>\n\n\n\n<li>Benenne ihn um in &#8222;<strong>Animation<\/strong>&#8222;.<\/li>\n\n\n\n<li>Dein <code>Sprite2D<\/code> wurde nun durch einen <code>AnimatedSprite2D<\/code> ersetzt. Du wirst feststellen, dass er ein Warnsymbol anzeigt, da noch keine Animationen definiert sind.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt 2: Eine neue SpriteFrames-Ressource erstellen<\/h3>\n\n\n\n<p>Ein <code>AnimatedSprite2D<\/code> ben\u00f6tigt eine <strong>SpriteFrames<\/strong>-Ressource. Diese Ressource ist wie eine Bibliothek f\u00fcr Animationen. Sie enth\u00e4lt alle Frames (Bilder) und definiert, welche Frames zu welcher Animation geh\u00f6ren, wie schnell sie abgespielt werden sollen und ob sie loopen.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>W\u00e4hle im Scene Dock deinen <strong><code>AnimatedSprite2D<\/code><\/strong> Node aus (innerhalb des <code>Coin<\/code> Nodes).<\/li>\n\n\n\n<li>Gehe in den Inspector. Klappe den Abschnitt &#8222;Animation&#8220; (innerhalb von <strong><code>AnimatedSprite2D<\/code><\/strong>) auf.<\/li>\n\n\n\n<li>Du siehst dort die Eigenschaft <strong>&#8222;Sprite Frames&#8220;<\/strong>, die momentan &#8222;&lt;empty>&#8220; ist.<\/li>\n\n\n\n<li>Klicke auf das Dropdown-Men\u00fc neben &#8222;Sprite Frames&#8220; und w\u00e4hle <strong>&#8222;New SpriteFrames&#8220;<\/strong>.<\/li>\n\n\n\n<li>Eine neue <strong>SpriteFrames<\/strong>-Ressource wurde erstellt. Klicke auf das neu erschienene <strong>SpriteFrames<\/strong>-Symbol (da wo gerade noch &lt;empty> stand).<\/li>\n\n\n\n<li>Unten im Editor \u00f6ffnet sich der <strong>SpriteFrames-Editor<\/strong>. Dies ist der Bereich, in dem wir unsere Animationen erstellen und verwalten.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt 3: Die M\u00fcnz-Animation erstellen<\/h3>\n\n\n\n<p>Jetzt f\u00fcgen wir die Frames f\u00fcr unsere M\u00fcnz-Animation hinzu. F\u00fcr dieses Beispiel nehmen wir an, du hast eine Bilddatei mit mehreren Frames deiner M\u00fcnze (z.B. eine Sprite-Sheet oder einzelne <code>png<\/code>-Dateien f\u00fcr jeden Frame wie in meinem Vorschlag zu den animierten M\u00fcnzen auf <a href=\"https:\/\/free-game-assets.itch.io\/free-game-coins-sprite\">itch.io<\/a>).\u00a0<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Bilder zum Projekt hinzuf\u00fcgen<\/h4>\n\n\n\n<p>F\u00fcr unser Beispiel gehe ich davon aus, dass du die o.g. Coins verwendest. Dabei die Animation mit dem Stern (21 &#8211; 30). Lade die Coins herunter und entpacke die Zip-Datei irgendwo auf deinem PC. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Erstelle im <strong>File-System-Dock<\/strong> (links unten) einen neuen Ordner &#8222;images&#8220;.<\/li>\n\n\n\n<li>Wechsel nun in den Explorer an den Ort, an den du die Bilder der M\u00fcnzen entpackt hast. <\/li>\n\n\n\n<li>W\u00e4hle eine Farbe deiner Wahl (ich bevorzuge Silber) und markiere die Dateien mit der Nummer 21 &#8211; 30. <\/li>\n\n\n\n<li>Ziehe die Dateien per Drag &amp; Drop auf den Ordner &#8222;images&#8220;, den du gerade erstellt hast.<\/li>\n<\/ul>\n\n\n\n<p>Godot wird nun die Bilder importieren und wir k\u00f6nnen sie verwenden.<\/p>\n\n\n\n<p>Um den SpriteFrame nun mit Leben zu f\u00fcllen, gehe folgenderma\u00dfen vor:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Im <strong>SpriteFrames-Editor<\/strong> (unten) siehst du auf der linken Seite die Liste deiner Animationen. Standardm\u00e4\u00dfig gibt es eine Animation namens <strong>&#8222;default&#8220;<\/strong>. Wir werden diese nutzen, allerdings benennen wir sie um in &#8222;<strong>rotate<\/strong>&#8222;.<\/li>\n\n\n\n<li>Auf der rechten Seite siehst du einen Bereich, in den du Texturen ziehen kannst. <\/li>\n\n\n\n<li>Ziehe die Dateien aus dem Ordner &#8222;images&#8220; in den Frame-Bereich der <strong>&#8222;rotate&#8220;<\/strong>-Animation. Du kannst sie einzeln oder alle auf einmal reinziehen.<\/li>\n\n\n\n<li>Du siehst nun die hinzugef\u00fcgten <code>png<\/code>-Bilder als Frames.<\/li>\n\n\n\n<li>Im <strong>SpriteFrames-Editor<\/strong> gibt es Einstellungen f\u00fcr die ausgew\u00e4hlte Animation. Unter <strong>&#8222;Animation Speed (FPS)&#8220;<\/strong> kannst du die Abspielgeschwindigkeit anpassen. Eine Geschwindigkeit von einem FPS pro Bild funktioniert f\u00fcr mich gut. Wir haben 10 BIlder, also stelle die Geschwindigkeit auf <strong>10 FPS<\/strong> ein.<\/li>\n\n\n\n<li>Stelle sicher, dass die Option <strong>&#8222;Looping&#8220;<\/strong> aktiviert ist (sollte bereits standardm\u00e4\u00dfig so sein), damit die Animation in einer Endlosschleife abgespielt wird. Das sind die im Kreis angeordneten Pfeile links neben der Geschwindigkeit.<\/li>\n\n\n\n<li>Stelle au\u00dferdem sicher, dass &#8222;<strong>Autoplay on Load<\/strong>&#8220; aktiviert ist. Diese Einstellung findest du wiederum links neben dem &#8222;<strong>Looping<\/strong>&#8222;. Das ist ein &#8222;Play&#8220;-Symbol mit einem A darin.<\/li>\n\n\n\n<li>(Optional) M\u00f6chtest du die Geschwindigkeit mit der sich die M\u00fcnze dreht ver\u00e4ndern (schneller \/ langsamer), so kannst du das \u00fcber die Einstellung &#8222;Frame Duration&#8220; steuern. Werte > 1 machen die Animation langsamer, Werte &lt; 1 machen sie schneller. Du kannst diese Einstellung f\u00fcr jedes Bild einzeln machen. M\u00f6chtest du die gesamte Animation verlangsamen, stelle sicher, dass alle Bilder markiert sind. So kannst du die Einstellung f\u00fcr alle gleichzeitig machen. Die Duration wird unter dem Bild angezeigt (z.B. als [x 2.0]).<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt 4: Speichern und Testen<\/h3>\n\n\n\n<p>Jetzt ist es Zeit, unsere animierte M\u00fcnze in Aktion zu sehen!<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Speichere deine Szene <strong><code>coin.tscn<\/code><\/strong> (Strg + S).<\/li>\n\n\n\n<li>F\u00fchre das Projekt aus (F5).<\/li>\n<\/ol>\n\n\n\n<p>Du solltest nun sehen, wie deine M\u00fcnzen in der Welt animiert sind und gl\u00e4nzen, bevor du sie einsammelst!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Darauf achten: Die Rolle von SpriteFrames<\/h3>\n\n\n\n<p>Die <strong>SpriteFrames<\/strong>-Ressource ist ein zentrales Element f\u00fcr Animationen in Godot. Sie trennt die Animationsdaten (welche Bilder, in welcher Reihenfolge, wie schnell) vom <code>AnimatedSprite2D<\/code>-Node selbst. Das hat den Vorteil, dass du dieselbe <code>SpriteFrames<\/code>-Ressource in mehreren <code>AnimatedSprite2D<\/code>-Nodes wiederverwenden kannst, was sehr effizient ist, wenn du viele Instanzen derselben animierten Objekte hast (z.B. viele M\u00fcnzen, die alle gleich animiert sind). Du kannst die <code>SpriteFrames<\/code>-Ressource auch separat im Filesystem Dock speichern, um sie noch einfacher zu verwalten. (Dazu im Inspector der <strong>Animation <\/strong>das Sprite-Frame-Dropdown \u00f6ffnen und &#8222;<strong>Save as&#8230;<\/strong>&#8220; ausw\u00e4hlen.)<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Dein n\u00e4chster Schritt<\/h3>\n\n\n\n<p>Du hast erfolgreich Animationen zu unseren M\u00fcnzen hinzugef\u00fcgt und dabei <code>AnimatedSprite2D<\/code> und <strong>SpriteFrames<\/strong> kennengelernt! Wir haben nun ein lebendigeres Objekt in unserem Spiel.<\/p>\n\n\n\n<p>Als N\u00e4chstes k\u00f6nnen wir uns der Animation des Spielers widmen. Da sich hier die Animationen \u00e4ndern, je nachdem was der Spieler gerade tut, steuern wir diese \u00fcber Code.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bisher waren unsere M\u00fcnzen statisch, nur ein einzelnes Bild, das bei Ber\u00fchrung verschwand. Um unser Spiel lebendiger zu gestalten und unseren M\u00fcnzen mehr&hellip;<\/p>\n","protected":false},"author":2,"featured_media":631,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[35,43,34,37],"class_list":["post-592","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-godot","tag-2d-game","tag-animation","tag-godot","tag-sprite"],"_links":{"self":[{"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/posts\/592","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/comments?post=592"}],"version-history":[{"count":4,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/posts\/592\/revisions"}],"predecessor-version":[{"id":620,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/posts\/592\/revisions\/620"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/media\/631"}],"wp:attachment":[{"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/media?parent=592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/categories?post=592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/tags?post=592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}