Pixel Art Course
0/34 已完成
遊戲核心美術資源/第 30 课
学习进度0%
已完成 0/34 章

第三十課:角色狀態機與動畫切換

上一課你會畫 Idle、Walk、Attack、Hurt;剪得越多,越容易亂——攻擊中能不能跳?受擊要不要打斷走?死亡還能不能按移動?

狀態機就是給答案:每個「身份」只准做幾件事,身份之間怎麼換,得寫清楚。

像電梯:關門 → 到站開門 → 超時再關門。角色也一樣,只是狀態換成 Idle / Walk / Attack。

1、先把「身份」列出來

小項目夠用的一套:

狀態大約播什麼常能切到
Idle待機循環Walk、Jump、Attack、Hurt
Walk / Run走 / 跑循環Idle、Jump、Attack、Hurt
Jump(可再拆起跳 / 騰空 / 落地)空中幾幀Attack(空中)、Hurt、落地回 Idle
Attack上一課那段非循環Idle、Walk、Hurt(可打斷)
Hurt受擊短非循環Idle、Die
Die倒地(通常結束)

每個狀態對應一段剪輯(或一組剪輯)。圖上標著 RUNNING,就是引擎裡 play("run") 那種東西——名字跟狀態對齊,後面查找不會瘋。

俯視角還常乘方向:Idle×8、Walk×8……仍然是「狀態 + 朝向」,別當成幾百個互不相干的動畫。

擴展狀態(需要再加):Dash、Guard、Crouch、Climb、Cast……別一上來全做,先跑通四五個核心。

2、轉換:誰允許變成誰

轉換靠條件,不是隨便跳:

條件例子
輸入按攻擊 → Attack
動畫播完Attack 結束 → Idle
物理腳離地 → JumpAir;落地 → Idle
傷害被打 → Hurt(閃避無敵可擋)
資源HP≤0 → Die

最小合法表(只記主幹):

Idle  ──方向──► Walk ──松鍵──► Idle
  │               │
  │攻擊            │攻擊
  ▼               ▼
Attack ──播完──► Idle / Walk
任意(有傷)──► Hurt ──播完──► Idle
任意(HP=0)──► Die

非法的別開:死了還 Walk、Hurt 裡再開大招又不取消、Attack 前搖就能瞬切到第二招……除非你明確設計成取消規則。

優先級常見從高到低:Die > Hurt > Attack / Dash > Jump > Walk > Idle。同時滿足多個條件時,走高的。

3、切過去:硬切還是糊一下

像素遊戲大多 硬切(新狀態第一幀立刻上),手感更快。

想少突兀:讓相鄰狀態的起止剪影接近(Attack 收招 ≈ Idle 起手),必要時插 1~2 幀過渡,別做成十幾幀 blend 糊掉反饋。

跳躍裡「上升 ↔ 下落」之間常有一幀 Invert / 過頂——Y 速度翻轉時當橋。這就是狀態(或子狀態)邊界:Up → Invert → Fall,別指望一段無限循環自己搞定。

取消(Cancel):攻擊後搖裡允許閃避 / 跳躍——高手手感;別在每一幀都允許,否則會砍掉「後搖代價」。

4、動畫事件:和玩法綁在同一幀

狀態決定「播哪段」;事件決定「這一幀幹什麼」:

時機常見事件
攻擊幀開始開 Hitbox、播揮刃音、出第28課特效
攻擊幀結束關 Hitbox
閃避起手開無敵;結束關無敵
動畫最後一幀允許切回 Idle / 接連招窗

Attack 狀態全程:輸入先進 Attack → 播非循環 → 中間幀開判定 → 播完退回 Idle(或接下一連)。別把 Hitbox 掛在「一按攻擊鍵就永久開」上。

Hurt / Die 優先級高:正在 Attack,被打也可能硬切——除非當前幀處於超級裝甲。Die 一般不再接受移動輸入。

5、複合:同時發生怎麼辦

有時表面像兩個動作:一邊跑一邊開槍。

兩種做法選一,寫進設計:

  1. 新狀態RunShoot(單獨剪輯,表更長、最清晰)
  2. 分層:下半身 Run + 上半身 Shoot(省幀,實現稍煩)

別讓代碼裡「半個 Run、半個 Shoot」卻沒有任何狀態名——以後 Debug 會哭。

引擎裡:Godot 可用 AnimationTree / 自寫 enum;Unity 用 Animator 參數(Bool / Trigger)。先在紙上畫通,再拖節點。一句話實現:change_state 時檢查白名單 → 換 play(動畫名) → 在 animation_finished 退回。

6、作業

給自己的角色定一套能用的狀態機:

  1. 狀態清單:至少 6 個(含 Idle / Walk / Attack / Hurt),各寫一句幹什麼
  2. 轉換表:誰 → 誰,觸發條件一句話;圈出非法路徑
  3. 狀態機小圖:紙筆或 Draw.io 都行
  4. Attack 事件表:哪幾幀開 / 關 Hitbox、特效、音效、結束允許轉換
  5. 選做:引擎裡跑通 Idle → Walk → Attack → Idle,被打能進 Hurt

下一課做 NPC / 敵人——玩家狀態機更貪,對面的人常常更省、但 AI 要換一套剪輯節奏。

课程作者:像素熊老师

微信公众号「教你画像素画」 · B站 · X / Twitter · GitHub