2D Sprite-Animation

Einführung

In dieser Anleitung erfahren Sie, wie Sie 2D animierte Zeichen erstellen mittels AnimatedSprite-Klasse und dem AnimationPlayer. Wenn Sie einen animierten Charakter erstellen oder herunterladen gibt es normalerweise zwei Möglichkeiten: als einzelne Bilder oder als einzelnen Sprite-Bogen, der alle Frames der Animation enthält. Beide können in Godot mit der AnimatedSprite-Klasse animiert werden.

Zuerst verwenden wir AnimatedSprite um eine Sammlung einzelner Bilder zu animieren. Dann werden wir mit dieser Klasse ein Sprite-Bogen animieren und abschließend zeigen wir noch eine andere Möglichkeit einen Sprite-Bogen zu animieren: ref: AnimationPlayer <class_AnimationPlayer> und die Eigenschaft Animation von Sprite.

Bemerkung

Kunstwerke für die folgenden Beispiele kann man hier finden: https://opengameart.org/users/ansimuz oder https://opengameart.org/users/tgfcoder

Einzelbilder mit AnimatedSprite

In diesem Szenario haben Sie eine Sammlung von Bildern, die jeweils einen Animations-Frame Ihres Charakters enthalten. In diesem Beispiel verwenden wir die folgende Animation:

../../_images/2d_animation_run_preview.gif

Sie können die Bilder hier herunterladen: run_animation.zip

Entpacken Sie die Bilder und legen Sie sie in Ihrem Projektordner ab. Richten Sie Ihren Szenenbaum mit den folgenden Nodes ein:

../../_images/2d_animation_tree1.png

Bemerkung

Der Wurzel-Node könnte auch ein Area2D oder RigidBody2D sein, die Animation wird weiterhin auf die gleiche Weise erstellt. Sobald die Animation abgeschlossen ist, können Sie der CollisionShape2D eine Form zuweisen. Weitere Informationen finden Sie unter Physics Introduction.

Wählen Sie nun AnimatedSprite aus und wählen Sie in der SpriteFrames Eigenschaft "Neue SpriteFrames" aus.

../../_images/2d_animation_new_spriteframes.png

Klicken Sie auf die neue SpriteFrames-Ressource. Am unteren Rand des Editorfensters wird ein neues Panel angezeigt:

../../_images/2d_animation_spriteframes.png

Ziehen Sie aus dem Dateisystem-Dock auf der linken Seite die 8 Einzelbilder in den mittleren Bereich des SpriteFrame Panels. Ändern Sie auf der linken Seite den Namen der Animation von "Standard" in "Ausführen".

../../_images/2d_animation_spriteframes_done.png

Aktivieren Sie im Inspektor das Kontrollkästchen für die Eigenschaft Wiedergabe. Sie sollten jetzt die Animation im Ansichtsfenster sehen. Es ist jedoch etwas langsam. Um dies zu beheben, ändern Sie die Einstellung Geschwindigkeit (FPS) im SpriteFrame Panel auf 10.

Sie können zusätzliche Animationen hinzufügen, indem Sie auf die Schaltfläche "Neue Animation" klicken und zusätzliche Bilder hinzufügen.

Steuerung der Animation

Sobald die Animation abgeschlossen ist, können Sie die Animation über Code mit den Methoden play() und stop() steuern. Hier ist ein kurzes Beispiel, um die Animation abzuspielen während die rechte Pfeiltaste gedrückt gehalten wird und sie anzuhalten, wenn die Taste losgelassen wird.

extends KinematicBody2D

func _process(delta):
    if Input.is_action_pressed("ui_right"):
        $AnimatedSprite.play("run")
    else:
        $AnimatedSprite.stop()

Sprite-Bogen mittels AnimatedSprite

Sie können auch einfach von einem Sprite-Bogen mit der Klasse AnimatedSprite animieren. Wir werden diesen frei nutzbaren Sprite-Bogen verwenden:

../../_images/2d_animation_frog_spritesheet.png

Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie "Bild speichern unter" um es herunterzuladen. Kopieren Sie das Bild dann in Ihren Projektordner.

Richten Sie Ihren Szenenbaum genauso ein wie zuvor, wenn Sie einzelne Bilder verwenden. Wählen Sie AnimatedSprite aus und wählen Sie in der SpriteFrames Eigenschaft "Neue SpriteFrames" aus.

Klicken Sie auf die neue SpriteFrames-Ressource. Wenn diesmal das untere Panel angezeigt wird, wählen Sie "Frames aus einem Sprite-Bogen hinzufügen".

../../_images/2d_animation_add_from_spritesheet.png

Sie werden aufgefordert eine Datei zu öffnen. Wählen Sie Ihren Sprite-Bogen aus.

Ein neues Fenster mit Ihrem Sprite-Bogen wird geöffnet. Als erstes müssen Sie die Anzahl der vertikalen und horizontalen Bilder in Ihrem Sprite-Bogen ändern. In diesem Sprite-Bogen haben wir vier Bilder horizontal und zwei Bilder vertikal.

../../_images/2d_animation_spritesheet_select_rows.png

Wählen Sie als Nächstes die Frames aus dem Sprite-Bogen aus, die Sie in Ihre Animation aufnehmen möchten. Wir werden die vier besten auswählen und dann auf "4 Frames hinzufügen" klicken, um die Animation zu erstellen.

../../_images/2d_animation_spritesheet_selectframes.png

Sie sehen Ihre Animation nun unter der Liste der Animationen im unteren Panel. Doppelklicken Sie auf Standard um den Namen der zu springenden Animation zu ändern.

../../_images/2d_animation_spritesheet_animation.png

Überprüfen Sie abschließend das Abspielen des AnimatedSprite im Inspektor um zu sehen wie Ihr Frosch springt!

../../_images/2d_animation_play_spritesheet_animation.png

Sprite-Bogen mittels AnimationPlayer

Eine andere Möglichkeit zum animieren eines Sprite-Bogens besteht darin, einen Standard Sprite-Node zu verwenden um die Textur anzuzeigen und dann den Wechsel von Textur zu Textur mit AnimationPlayer zu animieren .

Betrachten Sie diesen Sprite-Bogen, der 6 Animationsbilder enthält:

../../_images/2d_animation_player-run.png

Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie "Bild speichern unter" zum Herunterladen. Kopieren Sie das Bild dann in Ihren Projektordner.

Unser Ziel ist es diese Bilder nacheinander in einer Schleife anzuzeigen. Beginnen Sie mit der Einrichtung Ihres Szenenbaums:

../../_images/2d_animation_tree2.png

Bemerkung

Der Wurzel-Node könnte auch ein Area2D oder RigidBody2D sein, die Animation wird weiterhin auf die gleiche Weise erstellt. Sobald die Animation abgeschlossen ist, können Sie der CollisionShape2D eine Form zuweisen. Weitere Informationen finden Sie unter Physics Introduction.

Ziehen Sie den Sprite-Bogen in die Textur-Eigenschaft des Sprites und der gesamte Bogen wird auf dem Bildschirm angezeigt. Um es in einzelne Frames aufzuteilen, erweitern Sie den Abschnitt Animation im Inspektor und setzen Sie die Hframes auf 6. Hframes und Vframes sind die Anzahl der horizontalen und vertikalen Frames in Ihrem Sprite-Bogen.

../../_images/2d_animation_setframes.png

Versuchen Sie nun den Wert der Eigenschaft Frame zu ändern. Sie werden sehen, dass der Bereich von 0 bis 5 reicht und sich das vom Sprite angezeigte Bild entsprechend ändert. Dies ist die Eigenschaft die wir animieren werden.

Wählen Sie den AnimationPlayer und klicken Sie auf die Schaltfläche "Animation", gefolgt von "Neu". Nennen Sie die neue Animation "walk". Stellen Sie die Animationslänge auf 0.6 ein und klicken Sie auf die Schaltfläche "Loop", damit sich unsere Animation wiederholt.

../../_images/2d_animation_new_animation.png

Wählen Sie nun den Sprite-Node aus und klicken Sie auf das Schlüsselsymbol um eine neue Spur hinzuzufügen.

../../_images/2d_animation_new_track.png

Fügen Sie an jedem Punkt in der Zeitleiste weitere Frames hinzu (standardmäßig 0.1 Sekunden), bis Sie alle Frames von 0 bis 5 haben. Die Frames werden tatsächlich in der Animationsspur angezeigt:

../../_images/2d_animation_full_animation.png

Drücken Sie "Play" in der Animation, um zu sehen wie sie aussieht.

../../_images/2d_animation_running.gif

Steuerung einer AnimationPlayer Animation

Wie bei AnimatedSprite können Sie die Animation über Code mit den Methoden play() und stop() steuern. Auch hier ist ein Beispiel um die Animation abzuspielen während die rechte Pfeiltaste gedrückt gehalten wird und sie anzuhalten, wenn die Taste losgelassen wird.

extends KinematicBody2D

func _process(delta):
    if Input.is_action_pressed("ui_right"):
        $AnimationPlayer.play("walk")
    else:
        $AnimationPlayer.stop()

Bemerkung

Wenn Sie sowohl eine Animation als auch eine separate Eigenschaft gleichzeitig aktualisieren (z.B. kann ein Plattformer die Eigenschaften des Sprites h_flip/v_flip aktualisieren wenn sich ein Charakter dreht, während eine "Drehen" -Animation gestartet wird), ist es wichtig im Hinterkopf zu behalten, dass play() nicht sofort angewendet wird. Stattdessen wird es das nächste Mal angewendet, wenn AnimationPlayer verarbeitet wird. Dies kann dazu führen, dass es sich im nächsten Frame befindet, was zu einem 'glitch'-Frame führt, in dem die Eigenschaftsänderung angewendet wurde, die Animation jedoch nicht. Sollte dies ein Problem sein, können Sie nach dem Aufrufen von play() direkt advance(0) aufrufen um die Animation sofort zu aktualisieren.

Zusammenfassung

Diese Beispiele veranschaulichen die beiden Klassen, die Sie in Godot für 2D Animationen verwenden können. AnimationPlayer ist etwas komplexer als AnimatedSprite, bietet jedoch zusätzliche Funktionen, da Sie auch andere Eigenschaften wie Position oder Skalierung animieren können. Die Klasse AnimationPlayer kann auch mit einem AnimatedSprite verwendet werden. Experimentieren Sie um herauszufinden, was für Ihre Anforderungen am besten geeignet ist.