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 來把一系列單獨的圖片做成動畫,然後我們再會這個類來把精靈表做成動畫,最後我們還會學習使用 AnimationPlayerSprite*Animation*(動畫)屬性來把精靈表做成動畫。

備註

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

AnimateSprite 與若干單獨的圖片

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

../../_images/2d_animation_run_preview.gif

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

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

../../_images/2d_animation_tree1.webp

備註

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

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

../../_images/2d_animation_new_spriteframes.webp

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

../../_images/2d_animation_spriteframes.webp

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

../../_images/2d_animation_spriteframes_done.webp

回到“屬性面板”,勾選 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()

AnimateSprite 與精靈表

你還可以很方便地使用 AnimatedSprite 把精靈表做成動畫。我們會用到這張公共領域的精靈表:

../../_images/2d_animation_frog_spritesheet.png

按右鍵圖片,選擇“圖片另存為”來下載圖片,然後將圖片複製到專案檔案夾中。

設定場景樹的方法與之前使用單獨圖片的時候相同。選中 AnimatedSprite 後在 SpriteFrames 屬性裡選擇“新建 SpriteFrames”。

點擊建立出來的 SpriteFrames 資源。底部面板出現後,這次我們選擇“從精靈表中新增影格”。

../../_images/2d_animation_add_from_spritesheet.webp

在彈出的打開檔案對話方塊中,選擇你的精靈表。

接下來會打開一個新的視窗,裡面會顯示剛才的精靈表。你首先需要修改精靈表中縱向和橫向的圖片數量,我們的這張精靈表裡橫向有四張圖片、縱向有兩張。

../../_images/2d_animation_spritesheet_select_rows.webp

然後,在精靈表中選擇動畫中想要包含的影格。這裡我們選中上面的四個,然後點擊“新增 4 影格”來建立動畫。

../../_images/2d_animation_spritesheet_selectframes.webp

現在你就可以看到在底部面板的動畫列表裡看到這個動畫了。按兩下 default(預設),然後把動畫的名稱改成 jump(跳躍)。

../../_images/2d_animation_spritesheet_animation.webp

最後,在屬性面板中勾選 AnimatedSprite 的 Playing(播放)就可以看到青蛙跳起來了!

../../_images/2d_animation_play_spritesheet_animation.webp

AnimationPlayer 與精靈表

在使用精靈表時,另一種方法是使用標準的 Sprite 節點來顯示紋理,然後用 AnimationPlayer 來實作從紋理到紋理的動畫變化。

考慮一下這個包含 6 影格動畫的精靈表:

../../_images/2d_animation_player-run.png

按右鍵圖片,選擇“圖片另存為”下載圖片,然後將圖片複製到專案檔案夾中。

我們的目的是, 迴圈著一個接一個地顯示這些圖像. 首先佈置你的場景樹:

../../_images/2d_animation_tree2.webp

備註

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

將精靈表拖拽到 Sprite 的 Texture 屬性裡,你會看到整個列表顯示在螢幕上。要把它分割成單獨的影格,請在“屬性面板”中展開 Animation 部分,將 Hframes 設定為 6HframesVframes 是精靈表中水平和垂直影格的數量。

../../_images/2d_animation_setframes.webp

現在嘗試更改 Frame 屬性的值. 你可以看到它的範圍從 05 ,Sprite 所顯示的圖像也隨之改變. 這就是我們想要動畫化的屬性.

選中 AnimationPlayer , 然後點擊 "動畫" 按鈕, 然後點擊 "新建" 按鈕. 將新動畫命名為 "walk". 將動畫長度設定為 0.6 , 點擊 "Loop" 按鈕, 讓動畫重複播放.

../../_images/2d_animation_new_animation.webp

現在選中 Sprite 節點,然後按一下鑰匙圖示,新增一個新軌道。

../../_images/2d_animation_new_track.webp

繼續在時間軸的每一點新增影格(預設為 0.1 秒),直到你得到了從 0 到 5 的所有影格。你會看到這些影格出現在動畫軌道上:

../../_images/2d_animation_full_animation.webp

按下動畫上的“播放”鍵,看看效果如何。

../../_images/2d_animation_running.gif

建立內容

正如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()

備註

如果同時更新一個動畫和一個其他的屬性(比如說,平臺跳躍遊戲可能會更新精靈的 h_flip/v_flip 屬性然後同時開始一個轉身動畫“turning”),要記住 play() 不是即時生效的。它會在下次 AnimationPlayer 被處理時生效。也就是說可能要到下一影格才行,導致現在這一影格變成“問題”影格——應用了屬性的變化,但動畫還沒有開始。如果這會造成麻煩的話,在呼叫 play() 後,你可以呼叫 advance(0) 來立即開始播放動畫。

總結

以上的例子演示了使用 Godot 提供的兩個類來製作 2D 動畫的方法。 AnimationPlayer 相比 AnimatedSprite 而言略顯複雜,但同時也提供了更多的功能,因為你還可以同時動畫位置和縮放之類的其它的屬性。 AnimationPlayer 也可以和 AnimatedSprite 配合使用,你可以自己試一試,看看怎樣的做法更適合你自己。