Attention: Here be dragons
This is the latest
(unstable) version of this documentation, which may document features
not available in or compatible with released stable versions of Godot.
Checking the stable version of the documentation...
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 使用。建議你多加嘗試，找出最適合你需求的工作流程。