2D 精灵动画 — Godot Engine (latest) 简体中文文档

AnimateSprite 与若干单独的图片 ¶

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

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

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

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

现在选中 AnimatedSprite ，并在它的 SpriteFrames 属性中，选择“新建 SpriteFrames”。

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

将这 8 张独立的图片从左边的“文件系统”面板拖放到“动画帧”面板的中间部分。在左边，将动画名称从“default”更改为“run”。

回到“检查器”，勾选 Playing 属性。您现在应该可以看到在视口中播放的动画。然而，它有点慢。为了解决这个问题，请将“动画帧”面板中的 速度（FPS） 改为 10。

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

控制动画 ¶

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

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");
            _animatedSprite.Stop();
右键单击图片，选择“图片另存为”来下载图片，然后将图片复制到项目文件夹中。
设置场景树的方法与之前使用单独图片的时候相同。选中 AnimatedSprite 后在 SpriteFrames 属性里选择“新建 SpriteFrames”。
点击创建出来的 SpriteFrames 资源。底部面板出现后，这次我们选择“从精灵表中添加帧”。
在弹出的打开文件对话框中，选择你的精灵表。
接下来会打开一个新的窗口，里面会显示刚才的精灵表。你首先需要修改精灵表中纵向和横向的图片数量，我们的这张精灵表里横向有四张图片、纵向有两张。
然后，在精灵表中选择动画中想要包含的帧。这里我们选中上面的四个，然后点击“添加 4 帧”来创建动画。
现在你就可以看到在底部面板的动画列表里看到这个动画了。双击 default（默认），然后把动画的名称改成 jump（跳跃）。
最后，在检查器中勾选 AnimatedSprite 的 Playing（播放）就可以看到青蛙跳起来了！
AnimationPlayer 与精灵表¶
在使用精灵表时，另一种方法是使用标准的 Sprite 节点来显示纹理，然后用 AnimationPlayer 来实现从纹理到纹理的动画变化。
考虑一下这个包含 6 帧动画的精灵表：
右键单击图片，选择“图片另存为”下载图片，然后将图片复制到项目文件夹中。
我们的目的是, 循环着一个接一个地显示这些图像. 首先布置你的场景树:
根节点也可以是 Area2D 或 RigidBody2D。动画仍然会以同样的方式制作。一旦动画完成，你就可以为 CollisionShape2D 形状分配一个形状。更多信息请参见物理介绍。
将精灵表拖拽到 Sprite 的 Texture 属性里，你会看到整个清单显示在屏幕上。要把它分割成单独的帧，请在“检查器”中展开 Animation 部分，将 Hframes 设置为 6。Hframes 和 Vframes 是精灵表中水平和垂直帧的数量。
现在尝试更改 Frame 属性的值. 你可以看到它的范围从 0 到 5 ,Sprite 所显示的图像也随之改变. 这就是我们想要动画化的属性.
选中 AnimationPlayer , 然后点击 "动画" 按钮, 然后点击 "新建" 按钮. 将新动画命名为 "walk". 将动画长度设置为 0.6 , 点击 "Loop" 按钮, 让动画重复播放.
现在选中 Sprite 节点，然后单击钥匙图标，添加一个新轨道。
继续在时间轴的每一点添加帧（默认为 0.1 秒），直到你得到了从 0 到 5 的所有帧。你会看到这些帧出现在动画轨道上：
按下动画上的“播放”键，看看效果如何。
控制 AnimationPlayer 动画¶
正如AnimationSprite一样, 你可以通过代码中的 play() 和 stop() 方法控制动画. 同样, 这里有一个简单的例子, 按住右方向键键播放动画, 松开后就停下.
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");
            _animationPlayer.Stop();