Sprite Sheet 完整解析：格式、工具與如何轉換任何動畫

sprite sheet 是單一圖片，以固定格狀或條狀排列某段動畫的每一格，讓算繪器每格只要取樣一個區域，而不必載入數十個檔案。如果你曾從 3D 動畫匯出影格，然後納悶為什麼角色會抖動、背景會變黑，問題通常就出在 sprite sheet。

本頁涵蓋完整流程：sheet 究竟是什麼、它與 atlas 有何不同、何時該用格狀而非橫向條狀、該匯出哪種格式，以及如何在瀏覽器中把 GIF、圖片與影片來源轉成可用的 sheet。範例會引用我們自家的工具與世界 —— Agent Sprite Forge、The Cyclops' Island、Mini World 以及 3D 遊戲建構器 —— 因為那正是我們實際出貨並測試的流程。

什麼是 sprite sheet

sprite sheet 是一張點陣圖，其中每個動畫影格佔據規則格狀中大小相同的儲存格。sheet 本身不帶任何語意資訊來說明哪一格是哪個影格；這個對應關係存在於檔名規則、附帶的 JSON 索引，或引擎的動畫設定中。要切分一張 sheet，你必須知道四件事：儲存格的寬度與高度（像素）、欄數、列數，以及原點（多數引擎為左上，但有些框架假設為左下）。

這四個數值只要有一個錯誤，失敗就會立刻顯現。儲存格寬度若應為 33 卻設成 32，每前進一格就會往右偏移一個像素，看起來像緩慢的水平漂移。原點錯誤會讓動畫上下顛倒。影格數錯誤會漏掉最後一格，走路循環就會以突兀的跳動收尾，而不是停在接觸姿勢。這些都不是算繪錯誤，而是中介資料不一致。

sheet 的結構

把 sheet 想成一張表格。欄與列隱含在像素尺寸中：總寬度除以儲存格寬度即為欄數，總高度除以儲存格高度即為列數。一張 512 × 128、儲存格 64 × 64 的 sheet 有 8 欄 2 列，共 16 格。如果在儲存格之間加上一個像素的留邊，計算就會改變：寬 512 像素、儲存格 64 像素、留邊 1 像素，只能容納 7 格而非 8 格，因為留邊佔掉了 8 個像素。撰寫切分程式碼之前，必須先將留邊與間距納入計算。

原點為何重要

多數 WebGL 與 canvas 流程將原點放在圖片左上角，這與影像編輯工具使用的座標系統一致。有些遊戲引擎與較舊的框架會翻轉 Y 軸，並預期原點在左下角。如果你的 sprite 上下顛倒，請先檢查原點，再考慮調整尺寸。修正方式通常只是一行轉換，或改用相反的列順序重新產生，而不是整個重新匯出。

Sprite sheet、spritesheet 與 sprite atlas

拼法並沒有標準化。有空格的分寫「sprite sheet」是英語常見形式，也是多數文件與教學使用的寫法。連寫的「spritesheet」則出現在程式識別字、檔案名稱與部分引擎 API 中，因為空格在那些情境下並不方便。搜尋引擎將兩者視為近乎同義，所以你用哪種拼法都能找到同一種技術。

真正的區別在於 sheet 與 atlas。sprite sheet 是打包好的圖片，沒有強制附帶索引。sprite atlas 則是同樣打包好的圖片，再加上機器可讀的說明，指出什麼在哪裡 —— 通常是 JSON、XML 或二進位檔案，為每個區域命名。有了這份索引，工具才能找到待機影格、跑步影格與攻擊影格，而不必由你硬編碼像素座標。如果你的影格大小一致、循環也很單純，樸素的 sheet 就夠用。如果有不規則區域或具名狀態，你會需要 atlas。

• Sheet由大小一致的影格構成的格狀或條狀圖片。不需要中介資料。切分靠算術。
• Spritesheet同一個產物，只是連寫成一個字。常見於程式碼與素材檔名。
• Atlas打包的影格加上索引，將名稱或 ID 對應到矩形區域。可用名稱查詢，而不必做座標運算。

格狀 sheet 與橫向影格條

格狀 sheet 將影格排成列與欄，讓圖片盡量接近正方形。這很重要，因為在某些硬體上，材質記憶體與 GPU 取樣較偏好正方形或二的次方尺寸，也因為正方形 sheet 在影像編輯器中較容易預覽。格狀是引擎端切分的預設做法：設定儲存格尺寸與影格數後，引擎會逐列走訪格狀。

橫向影格條把所有影格排成單一列。這正是著色器與翻頁書材質預期的版面，因為 UV 位移簡化成一次乘法：影格索引除以影格總數即為 X 位移，Y 則保持不變。如果你把格狀 sheet 交給假設為條狀的著色器，動畫會跨列取樣，並以你意料之外的方式環繞。如果你把條狀交給假設為格狀的引擎切分器，它會把整條當成極寬的一列，或完全找不到列。

失敗情況一開始通常很細微：動畫會播，但節奏感覺不對，或影格不按順序重複。在偵錯動畫邏輯之前，先確認版面與取用端相符。在我們的 3D 遊戲建構器中，以 sprite 構成的角色使用格狀，因為引擎會處理切分；火焰或水這類由著色器驅動的效果則使用條狀，因為材質會直接取樣。

該匯出哪種格式

PNG 是安全的預設選擇。它支援完整 alpha、不失真，且每個引擎與瀏覽器都能解碼。對於邊緣銳利、色彩平坦的 sprite，PNG 壓縮效果很好。對於照片感或大量漸層的 sprite，WebP 通常能在相同視覺品質下產生更小的檔案，且目前所有瀏覽器都支援。當檔案大小重要、且你能確認目標執行環境能解碼時，就使用 WebP。GIF 是交付格式，不是製作格式：它只支援一位元透明度，所以每個半透明像素都會變成全不透明或全透明。如果你的來源有柔和邊緣，GIF 會讓它們產生邊緣雜邊。

當影格不是單純的一致格狀、當你需要具名狀態，或當取用端預期收到 atlas 時，請附上 JSON 附帶檔。附帶檔很小，而且能省去硬編碼座標的需要。如果影格大小一致、動畫只有單一循環，你可以略過，讓引擎自行計算矩形。絕不要將 sprite 匯出成 JPEG。JPEG 有失真且沒有 alpha 通道，透明度會變成黑色或白色，而壓縮失真正好落在定義 sprite 輪廓的銳利邊緣上。沒有任何設定能修正這點。

我們所有的轉換工具

這些是我們提供的轉換路徑。每一個都在瀏覽器中執行，所以你可以直接放入檔案並取得 sprite sheet，無需安裝任何東西。它們涵蓋常見來源：動畫 GIF、靜態圖片與影片片段。

對於動畫 GIF，轉換工具會逐格拆解，再打包成 sheet 或條狀；若你要求，也會在附帶檔中保留影格延遲。對於靜態圖片，轉換工具會將你提供的一連串圖片裁剪並排列成格狀。對於影片，轉換工具會以選定的速率取樣影格並寫入 sheet；取樣間隔與儲存格大小都由你控制。如果你正在為 The Cyclops' Island 製作角色，或為 Mini World 製作道具，就從你手上的來源格式開始，選擇對應的轉換工具。

• GIF 轉 sprite sheet逐格拆解動畫 GIF，並將影格打包成格狀或橫向條狀。
• 圖片轉 sprite sheet取用一連串靜態圖片，以一致的儲存格大小排列成均勻格狀。
• 影片轉 sprite sheet以選定的間隔從影片取樣影格，並寫入 sheet 或條狀。
• Agent Sprite Forge我們專注於 sprite 的工具，用於產生角色影格並打包成 3D 遊戲建構器使用的 sheet。

詞彙表

這些是閱讀 sprite sheet 文件、引擎設定或著色器程式碼時會遇到的術語。定義刻意簡短。

• Atlas打包的區域圖片，加上機器可讀的索引，將名稱或 ID 對應到矩形區域。
• Cellsheet 中容納單一影格的矩形。其寬度與高度即為儲存格尺寸。
• Frame strip以單一橫向列排列影格的 sheet，供著色器與翻頁書材質使用。
• Flipbook一種材質，隨時間一次取樣一個區域以產生動畫，通常來自影格條。
• Index為 atlas 中各區域命名或編號的附帶資料。沒有它，切分就只能靠算術。
• Origin座標所依據的圖片或儲存格角落，通常是左上或左下。
• Paddingsheet 中儲存格之間的額外像素，用來防止材質滲色。留邊會改變可容納的儲存格數量。
• Spacing儲存格之間的距離，常與留邊混用，但有時分開計算。

走進它所屬的世界

sprite 是無處可站的角色。最後一步是別人給不了的：把你剛做好的 sheet 放進一個有人能走動的世界 —— 一座小島、一顆星球、某個下雨的街角。這個網站上的每個世界都由一段文字描述製成，並發布成可直接遊玩的頁面。