2D Sprite animation (2D 精灵动画)

2D Sprite animation (2D 精灵动画)

简介

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.

注解

Art for the following examples by https://opengameart.org/users/ansimuz and by https://opengameart.org/users/tgfcoder

各自独立的图像与AnimatedSprite (动画化精灵)

在这个情况下，你有一组图像，每一个都包含你角色的动画的一帧。对于这个例子，我们将使用以下动画：

你可以在此处下载此示例项目: 2D_movement_demo.zip

解压缩这些图像并将它们放在项目文件夹中。使用以下节点布置场景树：

注解

根节点也可以是 Area2D 或 RigidBody2D 。动画仍然会以同样的方式制作。一旦动画完成，你可以为CollisionShape2D形状分配一个形状。更多信息请参见 Physics Introduction 。

现在选择``AnimatedSprite``，并在它的 SpriteFrames(精灵帧) 属性中，选择“新建 SpriteFrames”。

点击新的 SpriteFrames 资源，你会看到一个新的面板出现在编辑器窗口的底部：

从左边的文件系统面板，将这8张独立的图片拖放到SpriteFrames(精灵帧)面板的中间部分。在左边，将动画名称从“默认”更改为“奔跑”。

回到属性面板，在 Playing(播放) 属性的复选框里打勾。您现在应该可以看到在视区中播放的动画。然而，它有点慢。为了解决这个问题，更改SpriteFrames面板中的 速度 (FPS) 为10。

你可以通过点击“新建动画”按钮并添加其他的图像，来添其他的动画。

控制动画

动画完成后，你可以通过代码中的 play() 和 stop() 方法控制动画。这里有一个简单的例子, 按住右方向键播放动画，松开后就停下。

GDScript

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

Sprite sheet with AnimatedSprite

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

Right-click the image and choose “Save Image As” to download it, and then copy the image into your project folder.

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”.

点击新的 SpriteFrames 资源，你会看到一个新的面板出现在编辑器窗口的底部，选择”Add frames from a Sprite Sheet”。

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.

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.

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.

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

Sprite sheet (精灵清单)和 AnimationPlayer(动画播放器)

Another way that you can animate when using a sprite sheet is to use a standard Sprite node to display the texture, and then animating the change from texture to texture with AnimationPlayer.

考虑一下这个sprite sheet，包含6帧动画：

右键单击图片，选择“图片另存为”下载图片，然后将图片复制到项目文件夹中。

我们的目的是，循环着一个接一个地显示这些图像。首先布置你的场景树：

注解

将sprite sheet拖拽到Sprite的 Texture 属性里，你会看到整个清单显示在屏幕上。要把它分割成单独的帧，在属性面板中展开 Animation 部分，将 Hframes 设置为``6``。Hframes 和 *Vframes*是sprite sheet中水平和垂直帧的数量。

现在尝试更改 Frame 属性的值。你可以看到它的范围从``0`` 到 5，Sprite 所显示的图像也随之改变。这就是我们想要动画化的属性。

选中 AnimationPlayer ，然后点击 “动画” 按钮，然后点击“新建”按钮。将新动画命名为“walk”。将动画长度设置为``0.6``，点击 “Loop” 按钮，让动画重复播放。

现在选中``Sprite``节点，并单击钥匙图标，添加一个新的动画轨道(track)。

继续在时间轴的每一点添加帧(默认为``0.1``秒)，直到你得到了从0到5的所有帧。你会看到这些帧出现在动画轨道(animation track)上：

按下动画上的“播放”键，看看效果如何。

控制AnimationPlayer动画

正如AnimationSprite一样，你可以通过代码中的``play()`` 和 ``stop()``方法控制动画。同样, 这里有一个简单的例子, 按住右方向键键播放动画，松开后就停下。

GDScript

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

注解

如果同时更新一个动画和一个其他的属性(比如说, 一个平台跳跃游戏可能会更新sprite的 h_flip/v_flip 属性然后同时开始一个”转身”动画), 要记住``play()``不是即时生效的。它是在下次 AnimationPlayer 被处理时生效的。这可能要到下一帧, 导致现在这一帧变成”错误”帧-应用了属性的变化, 但动画还没有开始。如果这会造成麻烦的话, 在调用 play() 后, 你可以调用 advance(0) 来立即开始播放动画。

总结

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.