精靈表完整解說：格式、工具，以及如何轉換任何動畫

精靈表就是一張圖，裡面把一段動畫的每一帧按固定網格或條狀排好，渲染器每一帧只要取其中一塊區域，不必載入幾十個檔案。如果你從 3D 動畫匯出過帧，卻怎麼也搞不懂角色為什麼抖動、背景為什麼變黑，問題通常就出在精靈表。

這一頁把整條路徑講完：精靈表到底是什麼、它跟 atlas 差在哪、什麼時候用網格什麼時候用橫向條狀、該匯出哪種格式，以及怎麼在瀏覽器裡把 GIF、圖片、影片轉成可用的精靈表。範例會引用我們自己的工具與世界——Agent Sprite Forge、The Cyclops' Island、Mini World，以及 3D game builder——因為那是我們實際出貨並測試的流程。

什麼是精靈表

精靈表是一張點陣圖，每個動畫帧佔用規則網格中大小相同的单元格。精靈表本身不帶任何語意，不會告訴你哪一格是第幾帧；那個對應關係存在檔名規則、旁邊的 JSON 索引，或引擎的動畫設定裡。要切一張精靈表，你必須知道四件事：单元格的寬與高（像素）、欄數、列數，以及原點（多數引擎在左上，但有些框架假定在左下）。

這四個值只要錯一個，失敗立刻看得見。单元格寬設成 32 而不是 33，每前進一帧整張圖就往右偏一像素，看起來像慢慢水平漂移。原點設錯，動畫會上下顛倒。帧數設錯，最後一帧會被丢掉，走路循環就會以一個硬切收尾，而不是收在接觸姿勢。這些不是渲染 bug，是中介資料對不上。

精靈表的解剖

把精靈表想成一張表格。欄與列藏在像素尺寸裡：總寬除以单元格寬就是欄數，總高除以单元格高就是列數。一張 512 × 128、单元格 64 × 64 的精靈表，就是 8 欄 2 列，共 16 帧。如果单元格之間留了一像素的邊距，算法就變了：寬 512、单元格 64、邊距 1，只塞得下 7 格而不是 8 格，因為邊距吃掉 8 像素。寫切圖程式之前，padding 和 spacing 都要先算進去。

原點為什麼重要

多數 WebGL 與 canvas 流程把原點放在圖片左上角，跟影像編輯工具的座標系一致。有些遊戲引擎和較舊的框架會翻轉 Y 軸，預期原點在左下。如果你的精靈上下顛倒，先檢查原點，不要急著改尺寸。修法通常是一行 transform，或用相反的列序重新產生，而不是整批重新匯出。

Sprite sheet、spritesheet 與 sprite atlas

拼法沒有統一。中間有空格的「sprite sheet」是英文常見寫法，多數文件與教學都用這個。寫成一字的「spritesheet」出現在程式識別字、檔名和某些引擎 API，因為那些地方塞空格很彆扭。搜尋引擎把它們當近義詞，所以兩種拼法都會找到同一套技術。

真正該分的是 sheet 與 atlas。精靈表是一張打包好的圖，不強制附索引。sprite atlas 則是同一張打包圖，外加一份機器可讀的描述，說明哪塊區域在哪裡——通常是 JSON、XML 或二進位檔，替每個區域命名。有了這份索引，工具才能自己找到待機帧、跑步帧、攻擊帧，不必由你硬寫死像素座標。帧大小一致、循環單純，用普通精靈表就夠。區域不規則或有具名狀態，就該用 atlas。

• Sheet大小一致的帧排成網格或條狀。不需要中介資料。切圖就是算術。
• Spritesheet同一個東西，寫成一字。常見於程式碼與素材檔名。
• Atlas打包好的帧，外加一份把名稱或 ID 對應到矩形的索引。可以按名字查找，不必算座標。

網格精靈表與橫向帧條

網格精靈表把帧排進列與欄，讓圖片盡量接近正方形。這有兩個好處：某些硬體對正方形或 2 的次方尺寸的貼圖記憶體與 GPU 取樣比較友善；正方形在影像編輯器裡也比較好預覽。引擎端的切圖預設就是網格：你設定单元格尺寸和帧數，引擎逐列走過去。

橫向帧條把所有帧排在同一列。這是著色器與 flipbook 貼圖預期的排版，因為 UV 位移簡化成一次乘法：帧索引除以帧總數就是 X 位移，Y 固定不變。把網格精靈表丟給假定條狀的著色器，動畫會跨列取樣，並且用你沒預期的方式繞回來。把條狀丟給假定網格的引擎切圖器，它會把整條當成一列超寬的網格，或乾脆找不到列。

失敗模式一開始通常很隱微：動畫有在播，但節奏不對，或帧的順序跳來跳去。先別急著 debug 動畫邏輯，先確認排版跟消費端一致。在我們的 3D game builder 裡，以精靈為基礎的角色用網格，因為引擎負責切圖；火焰、水面這類由著色器驅動的效果用條狀，因為材質直接取樣。

該匯出哪種格式

PNG 是安全預設。它支援完整透明通道、無損，而且每個引擎與瀏覽器都解得了。邊緣銳利、色塊平坦的精靈，PNG 壓得很好。照片感或大量漸層陰影的精靈，WebP 通常在同一個視覺品質下檔案更小，而且現行瀏覽器都支援。檔案大小是重點、又能確認目標執行環境解得開時，就用 WebP。GIF 是發佈格式，不是作者格式：它只支援一位元透明，所以每一個半透明像素不是變全不透明就是變全透明。來源有柔邊的話，GIF 會把它鋸出毛邊。

帧不是單純的均勻網格、需要具名狀態，或消費端預期吃 atlas 時，就附一份 JSON 索引。索引很小，能省掉硬寫死座標的麻煩。帧大小一致、動畫只有一段循環，可以省略，讓引擎自己算矩形。精靈永遠不要匯出成 JPEG。JPEG 有損又沒有透明通道，透明會變成黑或白，而壓縮瑕疵正好落在定義精靈輪廓的那些銳利邊緣上。沒有任何設定能救回來。

我們全部的轉換工具

這些是我們實際提供的轉換路徑。每一個都在瀏覽器裡跑，檔案丢進去就能拿到精靈表，不必安裝任何東西。涵蓋常見來源：動態 GIF、靜態圖片、影片片段。

動態 GIF 的轉換工具會逐帧拆開，再打包成精靈表或條狀；要索引的話，帧延遲也會寫進索引裡。靜態圖片的部分，轉換工具把你提供的一串圖片裁切、排進網格。影片的部分，轉換工具按你選的頻率取樣，寫進精靈表；取樣間隔和单元格尺寸都由你控制。如果你正在替 The Cyclops' Island 做角色，或替 Mini World 做道具，就從手上現有的來源格式開始，挑對應的轉換工具。

• GIF 轉精靈表把動態 GIF 逐帧拆開，再打包成網格或橫向條狀。
• 圖片轉精靈表拿一串靜態圖片，排成单元格尺寸一致的均勻網格。
• 影片轉精靈表按選定的間隔從影片取樣，寫進精靈表或條狀。
• Agent Sprite Forge我們專攻精靈的工具，用來產生角色帧並打包成 3D game builder 使用的精靈表。

詞彙表

讀精靈表文件、引擎設定或著色器程式碼時，會一直遇到這些詞。定義刻意寫短。

• Atlas打包好的區域圖，外加一份機器可讀的索引，把名稱或 ID 對應到矩形。
• 单元格精靈表中裝著一帧的矩形。它的寬與高就是单元格尺寸。
• 帧條排成單一橫列的條狀精靈表，供著色器與 flipbook 貼圖使用。
• Flipbook一種貼圖，隨時間一次取樣一個區域來產生動畫，通常來自帧條。
• 索引atlas 的附帶資料，替區域命名或編號。沒有它，切圖就只能靠算術。
• 原點座標測量所依據的圖片或单元格角落，通常是左上或左下。
• 邊距精靈表中单元格之間多留的像素，用來防止貼圖滲色。邊距會改變塞得下的格數。
• 間距单元格之間的距離，常與邊距混用，但有時分開計算。

走進它所屬的那個世界

精靈是一個無處可站的角色。最後一步是別人都沒給的：把你剛做好的精靈表放進一個有人能走動的世界——一座小島、一顆行星、一個下雨的街角。這個網站上的每個世界都是由一段文字描述生成，並發佈成可以直接玩的一頁。