2D Sprite Animation

Einführung

In dieser Anleitung erfahren Sie, wie mit der AnimatedSprite-Klasse und dem AnimationPlayer animierte 2D-Charaktere erstellt werden. Wenn Sie einen animierten Charakter erstellen oder herunterladen, gibt es normalerweise zwei Möglichkeiten: als einzelne Bilder oder als einen einzigen 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. Anschließend zeigen wir noch eine andere Möglichkeit, einen Sprite-Bogen zu animieren: mit dem AnimationPlayer und der 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

onready var _animated_sprite = $AnimatedSprite

func _process(_delta):
    if Input.is_action_pressed("ui_right"):
        _animated_sprite.play("run")
    else:
        _animated_sprite.stop()

Sprite-Bogen mittels AnimatedSprite

Es kann auch einfach von einem Sprite-Bogen mit der Klasse Animiertes Sprite animiert werden. 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, als Sie einzelne Bilder verwendeten. Wählen Sie Animiertes Sprite 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.

A new window will open, showing your sprite sheet. The first thing you will need to do is to change the number of vertical and horizontal images in your sprite sheet. In this sprite sheet, we have four images horizontally and two images vertically.

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

Next, select the frames from the sprite sheet that you want to include in your animation. We will select the top four, then click "Add 4 frames" to create the animation.

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

You will now see your animation under the list of animations in the bottom panel. Double click on default to change the name of the animation to jump.

../../_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

onready var _animation_player = $AnimationPlayer

func _process(_delta):
    if Input.is_action_pressed("ui_right"):
        _animation_player.play("walk")
    else:
        _animation_player.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

These examples illustrate the two classes you can use in Godot for 2D animation. AnimationPlayer is a bit more complex than AnimatedSprite, but it provides additional functionality, since you can also animate other properties like position or scale. The class AnimationPlayer can also be used with an AnimatedSprite. Experiment to see what works best for your needs.