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 必須知道的四件事是：儲存格的寬度與高度（像素）、欄數、列數，以及原點（多數引擎為左上，但有些框架假設為左下）。

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

sheet 的結構

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

原點為何重要

多數 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 對應到矩形的索引。可依名稱查詢，而不必做座標運算。

Grid sheet 與 horizontal frame strip

grid sheet 把影格打包成列與欄，讓圖片接近正方形。這很重要，因為在某些硬體上，材質記憶體與 GPU 取樣對正方形或 2 的次方尺寸更友善，也因為正方形 sheet 在影像編輯器中較容易預覽。格線是引擎端切割的預設做法：你設定儲存格大小與影格數，引擎便逐列走訪格線。

horizontal frame strip 把所有影格排在單一列。這是 shader 與 flipbook 材質預期的版面，因為 UV 位移變成單純的乘法：影格索引除以影格數即為 X 位移，Y 則保持不變。如果你把 grid sheet 交給假設是橫條的 shader，動畫會跨列取樣，並以你意料之外的方式環繞。如果你把橫條交給假設是格線的引擎切割器，它會把橫條當成一個很寬的單列，或完全找不到列。

失敗模式起初通常很細微：動畫會播放，但時間感不對，或影格以錯誤順序重複。在除錯動畫邏輯之前，先確認版面與取用端相符。在我們的 3D 遊戲建構器中，sprite 角色使用格線，因為引擎會處理切割；火焰或水這類由 shader 驅動的效果則使用橫條，因為材質會直接取樣它。

該匯出哪種格式

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

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

我們所有的轉換器

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

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

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

詞彙表

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

• Atlas一張包含各區域的打包圖片，加上把名稱或 ID 對應到矩形的機器可讀索引。
• Cellsheet 中容納單一影格的矩形。其寬度與高度即為儲存格大小。
• Frame strip以單一水平列影格排成的 sheet，供 shader 與 flipbook 材質使用。
• Flipbook一種隨時間一次取樣一個區域以產生動畫的材質，通常來自 frame strip。
• Index為 atlas 中各區域命名或編號的 sidecar 資料。沒有它，切割就只是算術。
• Origin座標所測量的圖片或儲存格角落，通常是左上或左下。
• Paddingsheet 中儲存格之間的額外像素，用來防止材質滲色。padding 會改變可容納的儲存格數量。
• Spacing儲存格之間的距離，常與 padding 混用，但有時分開計算。

走進它所屬的世界

sprite 是一個無處可站的角色。最後一步是別人沒提供的那一步：把你剛做好的 sheet 放進一個有人能走動的世界 —— 一座小島、一顆行星、一個下雨的街角。本網站的每一個世界都源自一段文字描述，並以可遊玩的頁面形式發佈。