Sprite 動畫工具：預覽與匯出 Sprite Sheet 動畫

Sprite 動畫工具是一種工具，會接收 Sprite Sheet——把動畫畫格打包成單一圖像的格線——然後播放，讓你在美術進入遊戲之前判斷節奏、間距與輪廓。Neta Studio 的 Sprite 動畫工具會讀取 Sprite Sheet，從圖像尺寸推測畫格大小、欄數與播放順序，並在瀏覽器的 canvas 上開始播放。不會上傳任何內容。

靜態畫格無法告訴你走路循環的任何事。你需要看見第 3 格對照第 4 格、接觸姿勢對照經過姿勢，以及整段動畫是否因為某一格偏移一個像素而漂移。動畫工具會在載入時做到這點，並在推測錯誤時讓你手動修正畫格大小、順序與 FPS。

預覽 Sprite Sheet 動畫

將 PNG 或 WebP 拖放到畫布上。動畫工具會讀取內在寬度與高度，然後推斷出合理的格線：它會分解尺寸，尋找能產生常見 Sprite 尺寸中接近正方形畫格的小整數欄數（2 到 16）。一張 512×512、4 欄 128px 畫格的 Sprite Sheet，或一張 384×256、6 欄 64px 畫格的 Sprite Sheet——大多數時候都能猜對。300×300 的 Sprite Sheet 則不行，因為 300 無法乾淨地除以 16/32/64，所以你會手動設定畫格大小。

播放是在 HTML canvas 上進行，並設有 `imageSmoothingEnabled = false`，因此像素在整數縮放下保持銳利。縮放到 4× 或 8× 是最近鄰，這正是像素藝術所需：一個 32px 畫格以 8× 顯示時，就是螢幕上的 256px Sprite，每個來源像素都會擴展成 8×8 區塊。雙線性平滑會把它們變成灰色糊狀。

因為一切都在 canvas 上發生，檔案永遠不會離開你的機器。沒有上傳、沒有佇列、沒有帳號。你可以把客戶尚未發表的 Sprite Sheet 拖進來，它會留在分頁中。取捨是，非常大的 Sprite Sheet 會受瀏覽器記憶體限制——一張 4096×4096 PNG 解碼成 RGBA 約需 67MB，在桌機上沒問題，在低階平板上則很吃緊。

設定畫格大小、順序與 FPS

三個設定決定你實際看到的內容：畫格大小、播放順序與速度。任何一個設定錯誤，動畫看起來就會像垃圾，原因與美術本身無關。

畫格大小是單一格在像素中的寬度與高度。動畫工具提供 16、32、64 與 128 作為標準選項，外加自訂值。這個值必須精確整除 Sprite Sheet 尺寸。在 400px 寬的 Sprite Sheet 上使用 128px 畫格會得到 3.125 欄，渲染器會向下取整為 3，並在右側留下 16px 未使用的像素條——那些像素接著會以最後一欄中鄰近畫格的一小條形式出現。如果你的畫格在右緣看起來被剪切，表示畫格大小無法整除 Sprite Sheet 寬度。

順序是 row-major 或 column-major。row-major（常見預設，也是大多數匯出器產生的格式）會由左至右讀取，然後換到下一列。column-major 會由上至下讀取，然後向右移動。一張以欄匯出卻以列讀取的走路 Sprite Sheet 會播放第 1 格、接著第 5 格、再來第 9 格——每次跳動都跳過動畫的四分之一。修正只需一個切換，但你必須認出症狀：動作跳格。

FPS 與 `image_speed` 是不同旋鈕，人們常混為一談。FPS 是播放器每秒前進的畫格數。`image_speed`（GameMaker 的術語，也是人們會搜尋到的詞）是相對於房間速度的 Sprite 動畫速率乘數；1.0 表示 Sprite Sheet 每個遊戲步播放一格，0.5 表示每隔一步。在瀏覽器動畫工具中，直接設定 FPS。如果你正在移植 GameMaker Sprite，而角色以兩倍速度播放動畫，請先檢查 `image_speed`，再重新裁切 Sprite Sheet。

走路循環、待機與攻擊

有三種動畫扛起角色的大部分可讀性，而每一種都有不同的失敗方式。它們的失敗方式並不相同，因此只會循環一段通用片段的預覽工具會錯失重點。以下依動畫類型分開說明失敗模式。

這三者的共同規則：以最終遊戲縮放預覽，而不是放大檢視。一段在 8× 下看得懂的走路，在 1× 下常常會崩壞，因為抬腿只有 2 像素，而抬起的腳與地面之間的對比太低。在你簽核任何東西之前，先把預覽縮小到玩家實際會看到的大小。

四方向走路 Sprite Sheet 通常排序為下、左、右、上——下面向鏡頭，上背對鏡頭，左與右是水平的一對。有些匯出器使用下、上、左、右。如果你的角色在按下時往後滑，表示列被調換了，你在上輸入時播放的是下那列。這是播放器裡 2 行的修正，不是重新匯出。

8 方向移動需要對角線：左下、右下、左上、右上。使用四個水平鏡射方向時，你可以便宜地得到 4 列（左與右是同一張圖翻轉，這就是為什麼許多 Sprite Sheet 是 4 列而不是 8 列）。只有 4 個方向時，對角線移動會迫使引擎挑選最接近的面向，在對角線輸入時會明顯跳切。如果你的遊戲支援對角線移動，請保留預算給 8 個不同列，或接受跳切。

畫格數：在 16–32px 下，每個方向 6 或 8 格很常見。4 格走路看起來會跳但小尺寸可讀；10 格時，接觸與經過姿勢之間的間距會緊到需要逐格計時，這是均勻 FPS 播放器無法表達的。瀏覽器動畫工具以均勻方式播放，所以如果你打算在這裡預覽，請以均勻間距製作 Sprite Sheet。

待機是玩家在什麼都沒發生時盯著看的動畫，因此每格承載最多重量。標準結構是呼吸循環：胸口抬起、肩膀上升一個像素、重心轉移，然後回復。擠壓與伸展是讓它不會看起來像靜態 Sprite 被輕推的原因。在下降拍點，將角色垂直壓縮一或兩個像素並加寬一個像素；在上升拍點則反向操作。

常見失敗是擠壓過頭。一個 32px 角色被擠壓 4px，是其高度的 12.5%，看起來像果凍。在 32px Sprite 上垂直伸展一個像素是 3%，看起來像呼吸。如果你的待機看起來像角色在彈簧床上彈跳，你可能是縮放了整個格子，而不是其中的角色——畫格相對於格線改變了大小。

以你將出貨的相同 FPS 預覽待機。6 FPS 的待機會漂移；12 FPS 會呼吸。因為慢速待機大多只是同一張圖加上小偏移，你真正在檢查的是循環點：最後一格必須乾淨地過渡到第一格，肩膀位置不能跳動。

攻擊是三個階段，計時不均，而不是均勻的一陣揮舞。預備會向後拉——手臂舉起、身體蜷縮，通常維持或減速 2–3 格。命中是一或兩格，最快的一部分，武器在此達到完全伸展，姿勢最極端。回復是返回，也是業餘者太早切掉的地方。一個 6 格攻擊以 2 格預備、1 格命中、3 格回復來分配，就能讀懂；平均分成 2-2-2 的 6 格攻擊，看起來像推擠。

因為動畫工具以均勻方式播放，技巧是透過複製畫格來維持預備姿勢，而不是改變逐格計時。兩個相同的預備畫格給你停頓。一個命中畫格給你瞬間爆發。這與手繪 Sprite Sheet 使用的技巧相同，也能在任何引擎的移植中保留下來。

施法動畫增加第二個問題：效果必須在特定畫格出現與消失。如果你的 Sprite Sheet 把投射物或魔法陣烘焙進畫格中，播放器必須知道何時生成真正的物件——通常是第一個命中畫格。如果效果是獨立物件，請保持 Sprite Sheet 乾淨，並將生成時間對齊命中畫格索引，而不是牆上時鐘的秒數。

用一段提示生成走路循環

手動繪製走路循環的八列是數小時的工作，而成果仍是一張需要在播放器中檢查的 Sprite Sheet。Agent Sprite Forge 反轉了這點：你寫下角色描述，它就會產生 Sprite Sheet。一段描述、八個方向，Sprite Sheet 送達時已經裁切成格線，具有透明畫格與腳部錨點輔助線，讓角色放置時不會上下浮動。

第一輪時，錨點輔助線比美術更重要。一段雙腳沒有共用地面線的走路循環，無論畫得多好，都會看起來像角色在彈簧床上。因為生成的畫格帶有錨點，你可以把 Sprite Sheet 拖進動畫工具、播放，並看見地面線保持不動——這是靜態圖像無法給你的檢查。

生成輸出是正常的 Sprite Sheet：列與欄、透明背景、標準畫格大小。它沒有任何部分被鎖定在 Neta Studio。將它匯出，拖進動畫工具做一輪預覽，如果你的引擎想要單列就重新裁切，然後繼續前進。如果生成器給你一個不需要的方向——比如後左，因為你的遊戲只支援 4 方向——在重新裁切步驟中忽略那一列。

Sprite 動畫軟體：該比較什麼

正確的工具取決於你手上已有什麼。一張完成的 Sprite Sheet 加上關於節奏的問題，與一張空白畫布加上沒有角色，是不同問題。下表將起點對應到合適的工具，也包含引擎自帶動畫工具就是正確答案、第三方播放器多餘的情況。

一個經驗法則：如果你在預覽，就用播放器。如果你在創作，就用編輯器。如果你在生成，就用生成器。大多數混淆來自用播放器來創作——你無法在播放工具中修正糟糕的接觸姿勢，也無法在沒有播放功能的繪圖工具中修正節奏感。

匯出 GIF 或重新裁切的 Sprite Sheet

兩種匯出涵蓋大多數情況。第一種是動畫 GIF：目前的循環、目前的 FPS、目前的縮放，成為單一檔案。GIF 沒有執行環境，可在任何聊天視窗、審閱工具或問題追蹤器中播放。這就是你傳給不會安裝任何東西的協作者的東西。代價是 256 色調色盤，對大多數像素藝術沒問題，但在柔和漸層上會出現可見的色帶——如果你的 Sprite 有平滑光暈，預期會出現色調分離。

第二種是重新裁切的 Sprite Sheet。動畫工具會取用已載入的 Sprite Sheet 及其畫格設定，寫出以不同方式打包的新圖像：翻頁書用單列，方向集用四列，或相同格線但不同格子大小。當格子大小保持不變、你只是重新排序時，重新裁切是無損的。當你改變格子大小時，工具會重新取樣，而任何非整數倍的像素藝術重新取樣都會軟化邊緣。

常見的重新裁切是翻頁書：將一段動畫的每個畫格由左至右排成單列，不換行。有些引擎與 CSS Sprite 技術想要這種形狀。拿一段 6 畫格走路，重新裁切成單列 6 格，這條條帶就是 6× 畫格寬乘以 1× 畫格高。如果你需要那條條帶成為 GIF，Sprite Sheet 轉 GIF 轉換器可以從打包好的 Sprite Sheet 進行相同的循環匯出。

匯出前先設定畫格大小與欄數。匯出器會使用你在播放器中配置的格線來寫入，而不是它載入時猜測的格線。如果你覆寫了猜測以修正剪切，卻沒有重新檢查畫格數，匯出的 Sprite Sheet 就會繼承錯誤的數量。

走進它所屬的世界

Sprite 是一個無處可站的角色。最後一步是其他人沒有提供的：把你剛做好的 Sprite Sheet 放進一個有人可以四處走動的世界——一座小島、一顆行星、一個下雨的街角。這個網站上的每個世界都是由一段書面描述製成，並發布成可遊玩的頁面。

常見問題