像素動畫不一定要先畫幾十幀。對 32×32 的小角色來說，身體上下移動 1 像素、最高點多停一拍、影子稍微壓扁，就足以讓靜態像素畫產生呼吸感。
這篇教學只完成一個清楚目標：做出可自然循環的 4 幀待機動畫。無論你想做遊戲角色、社群頭像、貼圖或像素 GIF，都可以從這個練習開始。
像素動畫的重點是每一幀都一致
像素動畫是把多張尺寸相同的像素圖連續播放。畫布、角色位置、輪廓粗細與色盤應保持固定，只改真正需要移動的部分。
小尺寸裡，1 像素已是明顯位移。一般插畫不易察覺的誤差，循環播放後會變成抖動。因此先定好網格和錨點，往往比增加細節更重要。
動手前先設定四個限制
- 畫布：第一次建議使用 32×32；簡單圖示可從 16×16 開始。
- 色盤：先選 4–6 色，包含外框、主色、陰影和高光。
- 縮放：只用 2 倍、3 倍、4 倍等整數倍率，並選擇最鄰近取樣，避免模糊。
- 動作：用一句話定義，例如「角色輕輕呼吸」，不要同時安排跳躍、揮手與眨眼。
4 幀待機循環安排
| 幀 | 角色變化 | 固定項目 |
|---|---|---|
| 1 | 中間姿勢，作為基準 | 腳底中心、畫布大小 |
| 2 | 身體上移 1 像素，輪廓略拉長 | 眼距、色盤 |
| 3 | 最高點短暫停留 | 影子中心 |
| 4 | 回落並稍微壓扁 | 重心不左右漂移 |
四幀不必平均變化。最高點多停留會顯得輕，落地壓縮較快則更有彈性。先確定動作讀得懂，再考慮加入中間幀。
第 1 步：先測試單色剪影
暫時拿掉眼睛、服裝紋理與高光，只看角色外形。把畫面縮回實際顯示大小；如果仍能辨認頭、身體和腳，剪影就夠清楚。
史萊姆、方形機器人、蘑菇或有耳朵的圓臉都很適合第一次練習。細小配件等主動作穩定後再處理。
第 2 步：複製基準幀，而不是每幀重畫
由第 1 幀複製出另外三幀，再移動需要變化的像素。逐幀重畫容易讓頭寬、眼距或線條粗細改變，播放時就會閃爍。
如果工具有洋蔥皮功能，開啟前一幀的半透明預覽；沒有的話就在兩幀之間快速切換，比對外框是否意外位移。
第 3 步：建立固定錨點
讓身體上移 1 像素時，不要把整個角色一起搬走。站立角色通常把腳底中心當錨點，漂浮角色可固定影子中心。每完成一幀，就回來檢查這個座標。
頭頂上升、腳底保持接地，看起來像呼吸；若腳和影子也同方向移動，角色就會像在畫面裡漂移。
第 4 步：維持色盤與外框
所有幀都使用同一套顏色。若只在其中一幀新增相近色，循環時很容易像閃光。要移動高光時，優先挪動既有色塊。
外框也一樣：除非正在表現擠壓或拉伸，1 像素線條不應突然變成 2 像素。
第 5 步：用預覽調整節奏
先慢速預覽，逐格找出跳動，再逐漸加快。待機循環不需要每幀等長；最高點可以多停一拍，回落時間短一些。
沒有唯一正確的 FPS。判斷重點是動作能否看清楚、結尾是否順利接回開頭。匯出 GIF 後也要再看一次，因為不同平台的播放節奏可能略有差異。
第 6 步：只加入一個次要動作
主循環完成後，再選一項小變化：眨眼、髮尾延遲、圍巾擺動、高光位移或影子伸縮。次要動作比身體晚一幀，通常會更有重量感。
一次只加一項。32×32 的畫面很小，多個細節同時移動會搶走主動作的注意力。
常見錯誤與修正方式
- 角色左右抖動：腳底或影子沒有固定在同一座標。
- 邊緣不停閃：複製後誤改外框，或線條粗細不一致。
- 角色像融化：每個部位都在變形，缺少穩定區域。
- 動作太快：關鍵姿勢沒有停留，觀眾來不及看懂。
- 放大後模糊：用了平滑插值；改用最鄰近取樣與整數放大。
- 循環尾端卡住：最後一幀與第一幀差距太大，應縮小位移或補過渡。
匯出像素 GIF 前的檢查
- 分別以 100% 與放大尺寸觀看。
- 連續播放至少十次，盯著腳底、眼睛和外框。
- 分享循環可用 GIF，保留清晰單幀用 PNG；遊戲素材則在專用工具整理逐幀 PNG 或 Sprite Sheet。
- 不要把 JPG 當作像素素材原檔，壓縮會在邊緣產生雜色。
常見問題
初學者應該畫幾幀？
先從 2–4 幀開始。呼吸、眨眼或簡單彈跳都能在這個範圍完成。若動作不清楚，先加強關鍵姿勢，不要立刻增加幀數。
16×16 還是 32×32 比較適合？
32×32 較容易保留角色特徵，同時仍足夠小，能練習逐像素控制。想挑戰更精簡的剪影時，再試 16×16。
像素動畫只能用在遊戲嗎？
不是。社群頭像、網站裝飾、貼圖與循環 GIF 都適合。這篇先處理清楚循環；遊戲所需的方向、碰撞區與 Sprite Sheet 可留到下一階段。