Sprite 動畫 — Godot Engine (4.x) 正體中文 (台灣) 文件

在本教學中，你將學習如何使用 AnimatedSprite（動畫精靈）類和 AnimationPlayer 來建立 2D 動畫角色。無論是自己繪製還是直接下載現成的，拿到的動畫角色素材一般就是兩種形式：一系列單獨的圖片，或者一張包含所有動畫影格的精靈表（Sprite Sheet）。兩者都可以使用 Godot 的 AnimatedSprite 類進行動畫。

我們首先會用 AnimatedSprite 來把一系列單獨的圖片做成動畫，然後我們再會這個類來把精靈表做成動畫，最後我們還會學習使用 AnimationPlayer 和 Sprite 的 * Animation*（動畫）屬性來把精靈表做成動畫。

以下範例的美術素材由 https://opengameart.org/users/ansimuz 和 https://opengameart.org/users/tgfcoder 共同提供。

AnimateSprite 與若干單獨的圖片 ¶

在這個情況下, 你有一組圖像, 每一個都包含你角色的動畫的一影格. 對於這個例子, 我們將使用以下動畫:

你可以在這裡下載圖片： 2d_sprite_animation_assets.zip

解壓縮這些圖像並將它們放在專案檔案夾中. 使用以下節點佈置場景樹:

根節點也可以是 Area2D 或 RigidBody2D 。動畫仍然會以同樣的方式製作。一旦動畫完成，你就可以為 CollisionShape2D 形狀分配一個形狀。更多資訊請參見:ref: 物理介紹 <doc_physics_introduction> 。

現在選中 AnimatedSprite ，並在它的 SpriteFrames 屬性中，選擇“新建 SpriteFrames”。

點擊新的 SpriteFrames 資源，你會看到一個新的面板出現在編輯器視窗的底部：

將這 8 張獨立的圖片從左邊的“檔案系統”面板拖放到“動畫影格”面板的中間部分。在左邊，將動畫名稱從“default”更改為“run”。

回到“屬性面板”，勾選 Playing 屬性。您現在應該可以看到在視口中播放的動畫。然而，它有點慢。為了解決這個問題，請將“動畫影格”面板中的*速度（FPS）*改為 10。

你可以通過點擊“新建動畫”按鈕並新增其他的圖像，來添其他的動畫。

建立內容 ¶

動畫完成後, 你可以通過程式碼中的 play() 和 stop() 方法控制動畫. 這裡有一個簡單的例子, 按住右方向鍵播放動畫, 鬆開後就停下.

extends CharacterBody2D
@onready var _animated_sprite = $AnimatedSprite2D
func _process(_delta):
    if Input.is_action_pressed("ui_right"):
        _animated_sprite.play("run")
    else:
        _animated_sprite.stop()

using Godot;
public partial class Character : CharacterBody2D
    private AnimatedSprite2D _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 形狀分配一個形狀。更多資訊請參見:ref:物理介紹 <doc_physics_introduction>。
將精靈表拖拽到 Sprite 的 Texture 屬性裡，你會看到整個列表顯示在螢幕上。要把它分割成單獨的影格，請在“屬性面板”中展開 Animation 部分，將 Hframes 設定為 6。Hframes 和 Vframes 是精靈表中水平和垂直影格的數量。
現在嘗試更改 Frame 屬性的值. 你可以看到它的範圍從 0 到 5 ,Sprite 所顯示的圖像也隨之改變. 這就是我們想要動畫化的屬性.
選中 AnimationPlayer , 然後點擊 "動畫" 按鈕, 然後點擊 "新建" 按鈕. 將新動畫命名為 "walk". 將動畫長度設定為 0.6 , 點擊 "Loop" 按鈕, 讓動畫重複播放.
現在選中 Sprite 節點，然後按一下鑰匙圖示，新增一個新軌道。
繼續在時間軸的每一點新增影格（預設為 0.1 秒），直到你得到了從 0 到 5 的所有影格。你會看到這些影格出現在動畫軌道上：
按下動畫上的“播放”鍵，看看效果如何。
建立內容¶
正如AnimationSprite一樣, 你可以通過程式碼中的 play() 和 stop() 方法控制動畫. 同樣, 這裡有一個簡單的例子, 按住右方向鍵鍵播放動畫, 鬆開後就停下.
extends CharacterBody2D
@onready var _animation_player = $AnimationPlayer
func _process(_delta):
    if Input.is_action_pressed("ui_right"):
        _animation_player.play("walk")
    else:
        _animation_player.stop()
using Godot;
public partial class Character : CharacterBody2D
    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();