2D Sprite 動畫
前言
在本教學中，你將學習如何使用 AnimatedSprite2D 類別與 AnimationPlayer 製作 2D 動畫角色。通常你製作或下載動畫角色素材時，會有兩種常見格式：一種是每個動畫影格為單獨圖片，另一種是將所有動畫影格合成一張精靈表（Sprite Sheet）。這兩種都能用 Godot 的 AnimatedSprite2D 來做動畫。
首先，我們會用 AnimatedSprite2D 來將多張單獨圖片做成動畫。接著會用同一類別來處理精靈表的動畫。最後，還會學習利用 AnimationPlayer 搭配 Sprite2D 的 Animation 屬性來製作精靈表動畫的另一種方法。
備註
以下範例的美術素材由 https://opengameart.org/users/ansimuz 和 https://opengameart.org/users/tgfcoder 共同提供。
用 AnimatedSprite2D 播放單張圖片序列
這種情境下，你會有一組圖片，每張都代表角色動畫的一個影格。本範例將用以下動畫：
你可以在這裡下載圖片：2d_sprite_animation_assets.zip
將圖片解壓縮後放到你的專案資料夾。然後用下列節點架構建立你的場景樹：
備註
根節點也可以是 Area2D 或 RigidBody2D。動畫仍然會以同樣的方式製作。一旦動畫完成，你就可以為 CollisionShape2D 形狀分配一個形狀。更多資訊請參見 物理介紹。
現在選取 AnimatedSprite2D，在其 SpriteFrames 屬性中選擇「新建 SpriteFrames」。
點擊新的 SpriteFrames 資源，你會看到一個新的面板出現在編輯器視窗的底部：
在編輯器左側的檔案總管面板，把這 8 張單獨的圖片拖到 SpriteFrames 面板的中央區域。然後把左邊動畫名稱從「default」改成「run」。
在 Filter Animations 輸入框右上角點擊「播放」按鈕預覽動畫。這時你應該能在視窗中看到動畫，不過速度可能偏慢。可以將 SpriteFrames 面板的 速度 (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<AnimatedSprite2D>("AnimatedSprite2D");
}
public override void _Process(double delta)
{
if (Input.IsActionPressed("ui_right"))
{
_animatedSprite.Play("run");
}
else
{
_animatedSprite.Stop();
}
}
}
用 AnimatedSprite2D 播放精靈表
你也可以用 AnimatedSprite2D 很簡單地播放精靈表動畫。下面用一張公有領域的精靈表來示範：
按右鍵圖片，選擇“圖片另存為”來下載圖片，然後將圖片複製到專案檔案夾中。
設定場景樹的方法和剛才用多張圖片時一樣。選取 AnimatedSprite2D，然後在 SpriteFrames 屬性中選擇「新建 SpriteFrames」。
點擊新建的 SpriteFrames 資源。這次在下方面板出現時，請點選「從精靈表新增影格」。
在彈出的打開檔案對話方塊中，選擇你的精靈表。
接下來會打開一個新的視窗，裡面會顯示剛才的精靈表。你首先需要修改精靈表中縱向和橫向的圖片數量，我們的這張精靈表裡橫向有四張圖片、縱向有兩張。
然後，在精靈表中選擇動畫中想要包含的影格。這裡我們選中上面的四個，然後點擊“新增 4 影格”來建立動畫。
現在你就可以看到在底部面板的動畫列表裡看到這個動畫了。按兩下 default（預設），然後把動畫的名稱改成 jump（跳躍）。
最後，點擊 SpriteFrames 編輯器上的播放按鈕，就可以看到青蛙跳起來囉！
用 AnimationPlayer 搭配精靈表
另一種製作精靈表動畫的方法，是用標準的 Sprite2D 節點來顯示貼圖，然後用 AnimationPlayer 來切換貼圖影格。
考慮一下這個包含 6 影格動畫的精靈表：
按右鍵圖片，選擇“圖片另存為”下載圖片，然後將圖片複製到專案檔案夾中。
我們的目標是要讓這些影格圖片輪流播映形成動畫。先建立如下的場景樹：
備註
根節點也可以是 Area2D 或 RigidBody2D。動畫仍然會以同樣的方式製作。一旦動畫完成，你就可以為 CollisionShape2D 形狀分配一個形狀。更多資訊請參見 物理介紹。
將精靈表拖到 Sprite 的 Texture 屬性裡，你會看到整張表顯示在畫面上。要分割為單獨影格，請在屬性檢查器展開 Animation 區段，把 Hframes 設成 6。Hframes 和 Vframes 分別是精靈表的水平和垂直影格數。
現在嘗試調整 Frame 屬性的值，你會發現它從 0 到 5，Sprite2D 顯示的圖片也跟著改變。這就是我們等等要製作動畫的屬性。
選取 AnimationPlayer，點「動畫」再點「新增」，把新動畫命名為「walk」。將動畫長度設為 0.6，再點選「循環」按鈕讓動畫重複播放。
接著選取 Sprite2D 節點，點擊鑰匙圖示來新增一個動畫軌道。
接著在時間軸上每個時間點（預設每 0.1 秒）都新增一個影格，直到 0 到 5 全部設定完成。你會看到這些影格已經出現在動畫軌道上：
點選動畫上的「播放」鍵就能直接預覽動畫效果。
動畫控制
就像 AnimatedSprite2D 一樣，AnimationPlayer 也能用 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(double delta)
{
if (Input.IsActionPressed("ui_right"))
{
_animationPlayer.Play("walk");
}
else
{
_animationPlayer.Stop();
}
}
}
備註
如果你同時變更動畫和其他屬性（例如平台遊戲角色轉身時，同時修改 Sprite 的 h_flip/v_flip 並播放 'turning' 動畫），要注意 play() 並不會立刻生效，而是等到 AnimationPlayer 下次被處理時才生效。這可能會讓屬性已經變動但動畫還沒開始，產生一個「破格」影格。如果這造成問題，你可以在呼叫 play() 之後馬上呼叫 advance(0)，讓動畫立即套用。
總結
這些範例展示了你在 Godot 中可以用來做 2D 動畫的兩種主要類別。AnimationPlayer 雖然比 AnimatedSprite2D 複雜一些，但能提供更多功能，像是同時動畫位置、縮放等屬性。另外，AnimationPlayer 也能搭配 AnimatedSprite2D 使用。建議你多加嘗試，找出最適合你需求的工作流程。