iOS App 來了!iPhone & iPad 都能用,隨時隨地創作,GIF 視頻隨便做!
獲取 iOS App →

像素動畫指南:讓小角色看起來活著

像素動畫範例

一份輕量的像素角色動畫指南:從輪廓、配色、主動作到小細節,讓角色動得清楚又有個性。

像素畫很吃克制。幾個像素就能暗示表情、動作和角色性格。加上動畫以後,困難就變成了:讓它動起來,同時不要丟掉原本清楚的形狀。

這篇不會講大型 Sprite 流程,也不假裝一個按鈕能解決所有事情。我們只看一些能讓小角色更容易被讀懂的習慣。

先看輪廓

細節之前,先看剪影。如果角色塗成一個顏色也能認出來,動起來就成功了一半。

適合新手的輪廓都很簡單:圓果凍、方形機器人、高高的蘑菇、幽靈形狀、有耳朵的貓貓頭。小手、小配件和表情可以後面再加。

限制顏色數量

兩到四種顏色通常已經夠用。有限的色板會讓動畫更乾淨,也會逼每個像素都更有作用。

如果畫面覺得平,可以先調對比度,而不是立刻加新色。更深的外輪廓或更亮的高光,往往比第五種顏色更有效。

先確定主動作

用一句話說清楚角色在做什麼:

  • 果凍在呼吸。
  • 機器人在揮手。
  • 蘑菇在彈跳。
  • 幽靈在漂。

這句話就是邊界。和它無關的細節,先不要加。

幀數可以少一點

小尺寸像素動畫不一定需要很多資訊。一個呼吸循環可以只有兩三個狀態,一個彈跳可以是壓扁、拉長、回到原位。

WigglyPaint 的線條本來就會帶一點運動感,所以結構可以比傳統逐格更簡單。

留住錨點

角色動起來時,總要有些地方相對穩定。腳接觸地面,影子在身體下方,臉的中心不要無理由亂飄。

錨點能避免角色看起來像融化了。

加一個次要細節

主動作成立後,再加一個小細節:

  • 頭髮輕輕彈一下
  • 圍巾慢半拍
  • 眨一下眼
  • 一顆星星閃一下
  • 影子被拉長一點

一個細節會顯得用心,五個細節可能會變得難讀。

常見問題

  • 外輪廓粗細忽然變化
  • 小尺寸裡塞了太多顏色
  • 細節破壞了剪影
  • 動作太快,來不及看清
  • 循環回到開頭時突然跳一下

這些都不是大問題。它們通常只是在提醒你:可以再簡化一點。

一個很好的第一個角色

畫一個果凍塊,加兩隻眼睛。底部稍微壓平,讓它像站在地上。讓身體輕輕呼吸,再加一個高光,移動得比身體少一點。

這就夠了。如果它看起來像活著,你已經學到重點。

做一個小循環

角色小一點,動作清楚一點,剩下的可愛感交給晃動。

試試 WigglyPaint