Up to date
This page is up to date for Godot 4.2
.
If you still find outdated information, please open an issue.
Sprite 動畫¶
前言¶
在本教學中,你將學習如何使用 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");
}
else
{
_animatedSprite.Stop();
}
}
}
AnimateSprite 與精靈表¶
你還可以很方便地使用 AnimatedSprite
把精靈表做成動畫。我們會用到這張公共領域的精靈表:
按右鍵圖片,選擇“圖片另存為”來下載圖片,然後將圖片複製到專案檔案夾中。
設定場景樹的方法與之前使用單獨圖片的時候相同。選中 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");
}
else
{
_animationPlayer.Stop();
}
}
}
備註
如果同時更新一個動畫和一個其他的屬性(比如說,平臺跳躍遊戲可能會更新精靈的 h_flip
/v_flip
屬性然後同時開始一個轉身動畫“turning”),要記住 play()
不是即時生效的。它會在下次 AnimationPlayer 被處理時生效。也就是說可能要到下一影格才行,導致現在這一影格變成“問題”影格——應用了屬性的變化,但動畫還沒有開始。如果這會造成麻煩的話,在呼叫 play()
後,你可以呼叫 advance(0)
來立即開始播放動畫。
總結¶
以上的例子演示了使用 Godot 提供的兩個類來製作 2D 動畫的方法。 AnimationPlayer
相比 AnimatedSprite
而言略顯複雜,但同時也提供了更多的功能,因為你還可以同時動畫位置和縮放之類的其它的屬性。 AnimationPlayer
也可以和 AnimatedSprite
配合使用,你可以自己試一試,看看怎樣的做法更適合你自己。