2D Sprite-Animation

Einführung

In this tutorial, you'll learn how to create 2D animated characters with the AnimatedSprite class and the AnimationPlayer. Typically, when you create or download an animated character, it will come in one of two ways: as individual images or as a single sprite sheet containing all the animation's frames. Both can be animated in Godot with the AnimatedSprite class.

First, we'll use AnimatedSprite to animate a collection of individual images. Then we will animate a sprite sheet using this class. Finally, we will learn another way to animate a sprite sheet with AnimationPlayer and the Animation property of 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()
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

You can also easily animate from a sprite sheet with the class AnimatedSprite. We will use this public domain sprite sheet:

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

Set up your scene tree the same way you did previously when using individual images. Select the AnimatedSprite and in its SpriteFrames property, select "New SpriteFrames".

Click on the new SpriteFrames resource. This time, when the bottom panel appears, select "Add frames from a Sprite Sheet".

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

You will be prompted to open a file. Select your sprite sheet.

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

Finally, check Playing on the AnimatedSprite in the inspector to see your frog jump!

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

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.