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:
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:
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.
Klicken Sie auf die neue SpriteFrames-Ressource. Am unteren Rand des Editorfensters wird ein neues Panel angezeigt:
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".
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()
public class Character : KinematicBody2D
{
private AnimatedSprite _animatedSprite;
public override void _Ready()
{
_animatedSprite = GetNode<AnimatedSprite>("AnimatedSprite");
}
public override _Process(float _delta)
{
if (Input.IsActionPressed("ui_right"))
{
_animatedSprite.Play("run");
}
else
{
_animatedSprite.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:
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".
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 muss die Anzahl der vertikalen und horizontalen Bilder im Sprite-Bogen geändert werden. In diesem Sprite-Bogen haben wir vier Bilder horizontal und zwei Bilder vertikal.
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 ersten auswählen und dann auf "4 Frames hinzufügen" klicken, um die Animation zu erstellen.
Sie sehen Ihre Animation nun unter der Liste der Animationen im unteren Panel. Klicken Sie doppelt auf Standard, um den Namen der zu springenden Animation zu ändern.
Überprüfen Sie abschließend das Abspielen des AnimatedSprite im Inspektor, um zu sehen, wie Ihr Frosch springt!
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:
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:
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.
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.
Wählen Sie nun den Sprite-Node aus und klicken Sie auf das Schlüsselsymbol um eine neue Spur hinzuzufügen.
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:
Drücken Sie "Play" in der Animation, um zu sehen wie sie aussieht.
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()
public class Character : KinematicBody2D
{
private AnimationPlayer _animationPlayer;
public override void _Ready()
{
_animationPlayer = GetNode<AnimationPlayer>("AnimationPlayer");
}
public override void _Process(float _delta)
{
if (Input.IsActionPressed("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.