2026-07-26

在 Godot 裡用精靈圖做 2D 角色動畫 — 從匯入到播放

Godot 做 2D 很順手，但沒有能動的角色就沒法開工。這篇文章把整條路走完：把從一張角色圖生成的精靈圖放進 Godot 4 專案，切成影格、註冊成動畫，再用程式碼播放。

準備圖集和中繼資料

在 GenioPlus 動畫工具上傳角色圖，選一個動作預設（待機、行走、揮砍、跳躍、施法、受擊），會生成一小段影片，從中抽影格再拼成精靈圖。下載時除了 PNG 圖集，還會附上一份中繼資料 JSON，裡面記著影格尺寸、列×行和間距（padding）——下一步正好要用這些數字。圖集 PNG 放進 res:// 下的任意目錄，Godot 會自動匯入。

用 AnimatedSprite2D 切影格

在場景裡新增 AnimatedSprite2D 節點，在檢視器的 Sprite Frames 屬性裡建立一個 "New SpriteFrames"，編輯器底部就會打開 SpriteFrames 面板。點面板上的 "Add frames from a Sprite Sheet"，選取圖集 PNG，會跳出一個設定視窗：把橫向、縱向格數（Horizontal / Vertical）填成中繼資料 JSON 裡的列×行。如果圖集帶留白，再把 Separation 和 Offset 也對上，影格邊界就能切得剛剛好。在預覽裡選好要用的影格，點 "Add N Frames" 即可。

動畫命名與播放速度

新建的動畫預設叫 "default"，按兩下改成 walk、idle、attack 之類，再用面板左側清單的 "+" 加入多個動畫，全部裝在同一個 SpriteFrames 資源裡。播放速度用 Speed (FPS) 調，行走循環一般 8~12 FPS 就很自然。循環播放用 Loop 開關打開；攻擊這類只播一次的動作要關掉。

用程式碼播放

播放就是對節點呼叫 play()，例如 $AnimatedSprite2D.play("walk")。左右移動不用再做一張圖集，用 flip_h 屬性翻轉即可（依 velocity.x 的正負來設定 sprite.flip_h）。沒有移動輸入時切回 play("idle")；攻擊這類一次性動作可以監聽 animation_finished 訊號，播完再回到待機，狀態切換會乾淨很多。

什麼時候改用 Sprite2D + AnimationPlayer

如果你想把換影格和位置、旋轉、碰撞開關、音效放進同一條時間軸，那 Sprite2D 加 AnimationPlayer 更合適。把圖集放進 Sprite2D 的 Texture，在 Animation 分組裡把 Hframes/Vframes 設成列數和行數，就能用 Frame 值選影格了。在 AnimationPlayer 裡新建動畫，訂好長度（例如 0.6 秒）和 Loop，再對 Frame 屬性按固定間隔打關鍵影格即可。如果畫面裡影格之間出現被內插糊掉的中間狀態，把該軌道的更新模式改成 Discrete，影格就會硬切。

像素風記得把濾鏡設為 Nearest

從 Godot 4 起，2D 紋理濾鏡放在節點的 CanvasItem 屬性裡（專案設定裡的值作為預設值）。像素圖集發糊時，在 AnimatedSprite2D 或 Sprite2D 的檢視器裡把 CanvasItem > Texture > Filter 改成 Nearest。想整個專案生效，就在專案設定的算繪 > 紋理裡把預設紋理濾鏡設為 Nearest。另外像素紋理建議用 Lossless 壓縮，除非鏡頭會大幅拉遠，否則不要開 mipmap。

開始動手

只要有一張角色圖，就能用行走預設匯出一張圖集，按上面的步驟放進 Godot 試試。去背景和去背編輯不消耗點數，可以先看看自己的角色能去得多乾淨。