如何製作像素動畫精靈
選擇畫布尺寸
打開尺寸按鈕,選擇 16×16、32×32、48×48 或 64×64,或拖動滑桿,把每邊設成 4 到 100 像素之間的任何尺寸。畫布預設 32×32,背景透明(以棋盤格顯示)。
畫第一格
在 256 色像素調色盤上使用畫筆、填色、橡皮擦和滴管,也可以輸入任意十六進位色碼,或載入 Lospec 調色盤。目前顏色旁的明暗按鈕會給出同一色相深一階與淺一階的顏色——像素精靈的陰影就是這樣一階一階做出來的。
加入影格,做成動畫
「複製影格」會複製目前這一格,下一個動作只要改會動的那些像素。「新增影格」從空白開始。預覽會依你設定的速度依序播放各格,洋蔥皮把上一格淡淡地顯示在下方。
匯出 GIF 或精靈圖
「匯出動畫」可以下載 1×、2×、4× 或 8× 的循環 GIF,或把各格排成一列或網格的精靈圖 PNG。每個像素都保持清晰的正方形,空白像素保持透明。
這個工具能做什麼
最多 32 格
在畫布上方的影格列新增、複製、刪除影格並調整順序。按逗號(,)和句號(.)鍵切換到上一格、下一格;復原不只能復原繪圖,也能復原影格的變更。
洋蔥皮
上一格會以較低的不透明度從目前這格的空白像素裡透出來,每個姿勢都能對著上一個姿勢畫。想單獨看一格時可以關掉。
1–24 fps 即時預覽
影格列旁的小預覽會在你編輯時持續播放動畫。改變速度後,預覽、GIF 和儲存的精靈都會使用新的速度。
匯出 GIF 與精靈圖
循環播放的動畫 GIF 方便分享,PNG 精靈圖給遊戲引擎使用;影格之間沒有空隙,依影格尺寸就能乾淨切開。單一影格仍可用「1 格 = 1 像素」精確匯出。
真正的像素編輯器
可移動、翻轉、旋轉的矩形選取與套索選取,跨影格複製貼上,區域擦除,替換顏色,可描摹的參考圖,以及 50 步復原。
邊畫邊儲存
你的精靈會在畫的同時保存在這個瀏覽器裡。儲存到帳號後可以在其他裝置開啟,也可以複製圖案代碼——裡面包含所有影格與播放速度。
做出在遊戲畫面中一眼就看得懂的像素精靈
先決定尺寸,再依這個尺寸畫
精靈的畫布不是之後再縮小的圖:你選的尺寸就是玩家看到的解析度。16×16 的角色只剩輪廓和兩個像素的眼睛,所以這個尺寸適合道具、圖示和小個子主角。32×32 有空間畫出臉、看得出來的手和一組明暗層次。64×64 已經接近插畫,每一格動畫要畫的像素是 32×32 的四倍。
尺寸應該依遊戲裡其他精靈來決定,而不是依你想畫多少細節。16 像素網格的圖塊素材,配上 16 或 32 像素高的角色最合適。如果精靈需要變大,尺寸面板能讓畫面貼著你選的邊或角擴展,所有影格都以同樣方式調整,動畫不會錯位。
顏色越少,精靈越有力
大多數好的像素精靈只用四到十六種顏色。調色盤小,每種顏色就都有自己的任務:輪廓、底色、一兩層陰影、一個亮部。選好底色後,用旁邊的「更暗」「更亮」按鈕做出一組色階;陰影的色相稍微往藍偏、亮部稍微往黃偏,看起來就是光,而不是灰。
輪廓線能讓精靈在任何背景上都與背景分開。小精靈用一圈深色的完整輪廓最保險;大一點的精靈,讓輪廓跟著它所包住部分的顏色走(選擇性描邊)會顯得更柔和。避免把每個形狀都從邊緣往內一圈圈加陰影(「枕頭式陰影」),那會讓形體變平。光從一側來,陰影落在另一側。
做動畫:影格、節奏與洋蔥皮
遊戲動畫大多是短循環。待機的呼吸或上下擺動,兩到四格、每秒四到六格就夠了。走路循環通常是四到八格、每秒八到十二格:兩個腳踩到地面的接觸姿勢,加上中間的過渡姿勢。攻擊或受擊,用一格較慢的預備動作、一兩格很快的動作格,再加一個停住的姿勢,最能表現力道。
先畫關鍵姿勢,再補中間的格。「複製影格」就是為此而設:複製目前這一格,只改會動的像素,身體就不會一格一格地抖動。開啟洋蔥皮後,上一格會淡淡透在空白像素下方,手臂只要挪一兩個像素,不必重畫。想讓某個姿勢停久一點,就把那一格複製一份——GIF 裡每一格的播放時間都相同。
用遊戲實際的速度看預覽。慢放時很流暢的動作,全速播放時常常一頓一頓的;解決方法幾乎總是減少格與格之間變化的像素,而不是增加格數。
精靈圖與遊戲引擎
精靈圖(Sprite Sheet)就是把動畫的每一格排在同一張圖上。本工具匯出的精靈圖,格與格之間沒有邊距也沒有空隙,任何引擎只要依影格尺寸就能切割:一個 8 格的 32×32 精靈,匯出為 256×32 的一列,或最後一格空著的 3×3 網格。
給引擎用時以 1× 匯出,放大交給引擎。在 Godot 把紋理過濾設為 Nearest,像素才會保持銳利。在 Unity 把 Filter Mode 設為 Point (no filter),關閉壓縮,並讓 Pixels Per Unit 等於精靈尺寸。在 GameMaker 匯入這一列圖並填上格數。透明像素匯入後仍是透明的,精靈可以放在任何背景上。
分享就用 GIF
原尺寸的 32×32 GIF 比縮圖還小,而大多數網站放大小圖時會把它糊掉。改用 4× 或 8× 匯出:每個像素變成 4×4 或 8×8 的同色色塊,GIF 對這種連續的同色壓縮得很好,檔案依然很小。
GIF 的透明其實是把一種顏色設成「不顯示」,所以有些聊天軟體和社群平台會把它顯示成黑色或白色。如果要發到無法控制背景的地方,就用白色背景匯出。
常用的精靈尺寸
像素畫家最常用的幾個尺寸,以及每個尺寸能放進什麼。這裡每邊 4 到 100 像素的任何尺寸都能用,寬和高也不必相同。
| 尺寸 | 常見用途 |
|---|---|
| 8×8 | 很小的道具、粒子、子彈和像素字型。 |
| 16×16 | 道具、圖示、圖塊和小角色:兩個像素的眼睛也認得出來的輪廓。 |
| 24×24 | 臉部稍有餘裕的角色,用於 24 像素圖塊網格的遊戲。 |
| 32×32 | 有表情、有手、有明暗層次的玩家角色和敵人;主角最常用的尺寸。 |
| 48×48 | 更大的角色和精細的道具,或需要揮舞武器空間的 32 像素角色。 |
| 64×64 | Boss、立繪和特寫角色;每一格的工作量是 32×32 的四倍。 |
常見問題
這個像素動畫工具免費嗎?需要註冊帳號嗎?
免費。畫圖、做動畫和所有下載都不需要帳號。你的精靈會在畫的同時保存在這個瀏覽器裡。只有想儲存到「我的圖案」並在其他裝置開啟時,才需要帳號。
一個動畫最多能有幾格?
最多 32 格,每一格都和畫布一樣大,長一點的走路循環或攻擊動作都綽綽有餘。播放速度為每秒 1 到 24 格。
怎麼把精靈做成動態 GIF?
用「複製影格」或「新增影格」加入第二格,畫出變化的部分,再點影格列裡的「匯出動畫」。選擇 GIF、倍率(分享建議 4× 或 8×)與透明或白色背景,然後點「下載」。GIF 會以預覽中的速度無限循環播放。
精靈圖要怎麼在 Godot 或 Unity 裡使用?
以 1× 匯出精靈圖。各格緊鄰排列、沒有邊距,依「匯出動畫」按鈕下方顯示的影格尺寸切割即可。Godot 使用 SpriteFrames 資源或 AnimatedSprite2D,並把紋理過濾設為 Nearest;Unity 把紋理設為 Sprite (Multiple),在 Sprite Editor 中依儲存格尺寸切割,Filter Mode 設為 Point (no filter)。
可以用自己的調色盤嗎?
可以。在顏色搜尋框輸入任意十六進位色碼就能直接用這個顏色畫;常用的顏色可以存進「我的顏色」;貼上 Lospec 調色盤的名稱就能載入那套調色盤。載入調色盤時,畫面也會轉換成那套調色盤的顏色。
可以把一張圖片變成精靈嗎?
先用像素畫轉換器把圖片轉成你想要尺寸的像素網格,再在像素畫編輯器裡開啟結果。編輯器的「影格」按鈕提供同樣的影格列、洋蔥皮和 GIF 匯出,轉換出來的圖也能做成動畫。
可以把精靈做成拼豆嗎?
可以,一個像素就是一顆豆。29×29 的精靈剛好放滿一塊 Perler 大型方形豆板。可以從側邊欄的「匯出」把某一格匯出為可列印的圖紙 PDF,或在拼豆設計器中開啟圖案,依顏色計算豆子數量。