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




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

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


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




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



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

extends KinematicBody2D

func _process(delta):
    if Input.is_action_pressed("ui_right"):

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帧动画:






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

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


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

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




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





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

extends KinematicBody2D

func _process(delta):
    if Input.is_action_pressed("ui_right"):


如果同时更新一个动画和一个其他的属性(比如说, 一个平台跳跃游戏可能会更新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.