如何製作精靈圖：從現成影格、影片或一張角色圖開始

精靈圖（sprite sheet）把一段動畫的所有影格放進同一張圖片，通常排成網格，再搭配一個小資料檔，記錄每個影格在圖中的位置與顯示時間。遊戲引擎只要載入這張圖，播放時每次畫出其中一格。

做法取決於你手上已經有什麼。影格已經是一張張獨立的 PNG，只需要拼起來；動作在一段影片裡，要先選好範圍，再依影格率取出影格；如果只有一張角色圖，就得先把動畫做出來。

2026 年 10 月 8 日，我們用可下載的實際檔案把三種情況都走過一遍：在免費的 sprite sheet maker 拼合 16 格橘色機器人奔跑動畫；用免費的影片轉精靈圖工具 轉換一段 4 秒的透明 WebM；最後說明這組機器人影格原本如何用 AI 生成。兩個免費工具都在瀏覽器中執行，檔案不會離開你的電腦，也不需要註冊。工具介面目前為英文。

精靈圖檔案裡有什麼

機器人奔跑共 16 格，每格 376 × 280 像素。每列放 4 格，得到一張 1504 × 1120 的 PNG。

只看 PNG，無法知道一格在哪裡結束、下一格從哪裡開始，這要靠旁邊的 JSON。以下是 sprite sheet maker 匯出檔中第六格的項目，以及整張圖的資訊：

{
  "frames": {
    "frame_0005.png": {
      "frame": { "x": 376, "y": 280, "w": 376, "h": 280 },
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": { "x": 0, "y": 0, "w": 376, "h": 280 },
      "sourceSize": { "w": 376, "h": 280 },
      "duration": 42
    }
  },
  "meta": {
    "image": "robot-run-spritesheet.png",
    "size": { "w": 1504, "h": 1120 },
    "frameTags": [{ "name": "robot-run", "from": 0, "to": 15, "direction": "forward" }],
    "animgen": { "frameCount": 16, "frameDurationMs": 42, "durationMs": 672, "fps": 23.81, "loop": true }
  }
}

• frame 是要從圖中切出的矩形，以左上角為原點，單位為像素。
• duration 是這一格停留的毫秒數。
• frameTags 把一段連續影格命名為一個動作。一張圖裡有多個動作時，每個動作各有一個標籤。
• spriteSourceSize 和 sourceSize 只在影格裁切過時才有作用，告訴引擎要把裁切後的影格放回原畫布的哪個位置。

欄位名稱與 Aseprite 的 hash 格式 JSON 匯出相同，已經能讀取 Aseprite 精靈圖的程式碼可以直接讀取。animgen 是額外資訊，可以忽略。

時間以整數毫秒儲存。24 FPS 時每格約 41.67 毫秒，寫入時取整為 42，所以 16 格合計 672 毫秒，而不是 667 毫秒，fps 因此顯示 23.81。一個循環相差 5 毫秒。如果動畫必須與音效或其他動畫精準同步，請在引擎裡直接把片段速度設為 24 FPS，不要加總每格時間。

用現成影格拼成精靈圖

這條路線適用於動畫已經是一張張獨立圖片的情況：Krita 以「算繪動畫」輸出的圖片序列、AnimGen 匯出的 PNG 影格 ZIP、3D 軟體的算繪結果，或別人傳來的一整個資料夾。如果你在 Aseprite 裡繪製，它內建的 File → Export Sprite Sheet 可以直接寫出 PNG 和 JSON，不必再用拼圖工具。

想跟著操作，可以下載這 16 格機器人素材（ZIP，700 KB）。檔名是 robot-run-1.png 到 robot-run-16.png，編號沒有補零，許多實際匯出的檔案也是這樣命名。

1. 開啟 sprite sheet maker，拖入檔案，或直接選擇整個資料夾。
2. 檢查順序。依字母排序時，robot-run-10.png 會緊接在 robot-run-1.png 後面；這個工具依檔名中的數字排序，實測排出的順序是 1 到 16。影格也可以拖曳調整、刪除或整體反轉。
3. 設定速度。它決定預覽速度，也決定寫入 JSON 的時間。我們用 24 FPS，也就是這段機器人動畫生成時的影格率。
4. 設定欄數。16 格預設 4 欄，得到方正的 4 × 4 網格。
5. 下載精靈圖 PNG 和 JSON。同一組影格也能匯出 GIF 動畫，方便分享。

我們把匯出的精靈圖解碼後，逐格與對應的來源影格比對：16 格的 Alpha 完全相同，所有完全不透明像素的顏色也完全相同；半透明邊緣像素的顏色最多相差 1 級（滿級 255），原因是瀏覽器畫布以預乘 Alpha 儲存顏色。匯出的 PNG、對應的 JSON 與附 SHA-256 的量測紀錄都可以下載核對。

如果動畫是 GIF，也能直接拖進這個工具：GIF 的每一格成為精靈圖的一格，速度取自 GIF 的影格延遲。

影格共用同一張畫布時，不要勾選裁切

工具裡的 Trim empty space around each frame 選項會裁掉每格周圍的空白。用在這組機器人影格上，每格縮小為 163 × 190，整張圖變成 652 × 760，像素數減少 71%。PNG 檔案卻只從 785.0 KB 降到 736.7 KB，因為完全透明的區域壓縮後本來就幾乎不佔空間。

裁切會把每一格依各自的外框裁小，再以底部置中對齊。這段奔跑中機器人有離地的瞬間，身體最低點在各格之間有 22 像素的起伏。裁切後每一格都貼齊格子底邊，彈跳感消失；手臂和腿擺動時外框寬度跟著改變，身體還會左右偏移，最多 16 像素。

同一套動畫軟體匯出的影格通常共用一張畫布，這張畫布本身就記錄了角色站在哪裡，應該保留。裁切適合尺寸不一的影格，例如從舊精靈圖切出的素材，這時底部置中對齊能讓腳重新落在同一條線上。

2 的冪次尺寸與間距

勾選 Round the sheet up to power-of-two sizes（進位到 2 的冪次）後，1504 × 1120 變成 2048 × 2048。PNG 只從 785.0 KB 增加到 843.6 KB，但以每像素 4 位元組解碼後，貼圖從 6.4 MiB 增加到 16 MiB。只有目標平台需要時才開啟，例如舊款 iOS 裝置上的 PVRTC 壓縮，或 WebGL 1 的 mipmap。現今多數 2D 引擎都接受任意尺寸。

間距會在格子之間加入透明像素。開啟線性過濾或 mipmap 時，GPU 可能越過格子邊界取樣一兩個像素，讓邊緣出現相鄰影格的細線。這組機器人影格四周至少有 39 像素的透明邊，間距設為 0 沒有問題。如果影格裁得很緊，就加兩三個像素的間距，並在引擎切圖時填入相同的分隔值。

把影片片段轉成精靈圖

這條路線適用於動作存在影片中的情況：螢幕錄影、算繪出的片段、綠幕影片，或存成 MP4、WebM 的生成動畫。

我們使用轉換工具內附的範例：一段 640 × 640 的 WebM，青色小人在奔跑，長 4.00 秒，背景透明（來源影片）。

1. 開啟影片轉精靈圖工具，拖入影片，時間軸會顯示縮圖。
2. 拖曳兩端的把手框住需要的動作，按 Play range 循環預覽。我們保留 2.50 到 3.83 秒的奔跑。
3. 選擇影格率和影格寬度。12 FPS 時，這 1.33 秒得到 16 格；影格寬 256 像素時，輸出 4 × 4 網格、1024 × 1024 像素、560.1 KB 的精靈圖。
4. 下載精靈圖 PNG 和 JSON，或附編號的 PNG 影格 ZIP。

來源影片是 24 FPS，選 12 FPS 等於每隔一格取一格；選 24 FPS 則保留全部影格，數量加倍為 32。製作循環動畫時，請在 Play range 中留意最後一格跳回第一格的那一下：若有明顯頓點，就把起點或終點前後移動一格。

這段 WebM 本身帶有透明通道，取出的影格會保留透明；MP4 沒有 Alpha 通道。如果影片是在純色或綠幕背景前拍攝，工具會偵測這個顏色並可移除，提供容許度與邊緣清理等控制。頭髮、煙霧、動態模糊這類細節在綠幕上需要真正的去背處理，免費工具無法處理。

從一張角色圖生成動畫

第三條路線的起點只有一張圖，沒有任何動作。上面用到的機器人影格就是這樣做出來的：一張 1254 × 1254 的機器人 PNG，提示詞要求角色面向右方持續原地奔跑，鏡頭固定、比例一致。請求使用 Seedance 2.0 Fast、4 秒、480p 與 Alpha Key，2026 年 10 月 3 日實際花費 36 點數，回傳 752 × 560、24 FPS、共 97 格的影片。

我們從這 97 格中選了第 44 到 59 格作為循環，並為本文縮小一半到 376 × 280。可操作角色那篇文章附有完整提示詞、原始鍵色影片，以及循環範圍的挑選方式；行走循環那篇更詳細說明如何找到乾淨的循環。

在 AnimGen 生成的動畫，匯出時就能直接取得附 JSON 的精靈圖，或 Godot、Unity、Unreal Paper2D、Cocos Creator、Construct 3 的資源包（見輸出格式）。只有在其他軟體先修改過影格時，才需要再用免費拼圖工具。點數消耗會隨模型與設定而變，生成前請以畫面顯示的報價和目前的價格為準。

把精靈圖匯入 Godot 4 或 Unity

Godot 4。 新增一個 AnimatedSprite2D 節點，在它的 Sprite Frames 屬性中新建 SpriteFrames 資源。在編輯器底部的 SpriteFrames 面板中點選 Add frames from a Sprite Sheet，選擇 PNG，把 Horizontal 和 Vertical 都設為 4。若有使用間距，就填入 Separation。選取 16 格，按 Add 16 frames，再把動畫速度設為 24 FPS 並開啟循環。Godot 的 2D 精靈動畫教學中有同一個對話框。間距為 0 的精靈圖也可以用一般的 Sprite2D，設定 hframes = 4、vframes = 4，再用程式碼切換 frame。

Unity。 選取 PNG，把 Texture Type 設為 Sprite (2D and UI)，Sprite Mode 設為 Multiple；像素美術還要把 Filter Mode 設為 Point。開啟 Sprite Editor，選擇 Slice，Type 設為 Grid By Cell Size，尺寸 376 × 280，軸心設在底部中央，然後套用。依序選取 16 個 sprite，建立每秒 24 個取樣的動畫片段。Unity 的 Sprite Editor 指南介紹了各種切圖選項。

如果最後一列沒有排滿，例如 15 格放進 4 × 4 網格，兩個引擎都會為空位產生一格，別把它加進動畫。AnimGen 自己的 Godot 與 Unity 資源包省去了這一步手動操作，Godot 4 匯入實測在實際執行的專案中檢查過其中一個。

使用精靈圖之前要檢查的問題

關於尺寸上限：4096 × 4096 是行動裝置與 WebGL 常用的保守上限。精靈圖與 PNG 序列比較實測了一張超過這個上限的 5120 × 5120 精靈圖，並說明如何拆分。

關於製作精靈圖的常見問題

有免費的精靈圖製作工具嗎？

本文使用的 sprite sheet maker 和影片轉精靈圖工具都免費，在瀏覽器中執行，不需要帳號。其他免費精靈圖工具可以轉換 GIF、切開現有精靈圖，或把精靈圖轉回 GIF。如果你本來就用 Aseprite，它內建的匯出功能就能完成拼圖。商業圖集打包軟體 TexturePacker 提供多邊形打包與各引擎專用的匯出器，這些功能在打包大量不同精靈的大型圖集時較有用，單一動畫不太需要。

ChatGPT 能做精靈圖嗎？

圖像模型可以在一張圖裡以網格畫出角色的多個姿勢。本文沒有測試 ChatGPT。使用這類圖片前，請檢查：每格尺寸是否相同，角色在各格之間的比例與體型是否一致，姿勢有沒有伸進相鄰格子，背景是否透明或為可移除的單一顏色。精靈圖切割工具可以把這類圖片切成獨立影格，並以統一的影格尺寸重新排列。如果想從角色圖生成真正連續的動作並匯出為影格，請參考上文的 AI 路線。

精靈圖是什麼格式？

通常是 PNG，因為它能保留透明且不損失細節，再加上一個資料檔。自己寫程式或網頁遊戲最常用 JSON；各引擎也有自己的格式，例如帶切片矩形的 Unity .meta 檔、Godot 的 SpriteFrames 資源、Cocos Creator 的 .plist。請選擇你的引擎或載入器能讀取的格式，並讓 PNG 和資料檔始終放在一起。

想完整走一遍，可以下載機器人影格素材，在 sprite sheet maker 拼成精靈圖，再依上面的步驟匯入你的引擎。如果手上只有角色、還沒有動畫，可以從 AnimGen 工作台開始，在那裡直接匯出精靈圖。