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

精靈表就是一張圖片，把一段動畫的每個影格按固定網格或單列排好，渲染器每個影格只要取樣其中一個區域，不必載入幾十個檔案。如果你曾從 3D 動畫匯出影格，然後納悶角色為什麼會抖、背景為什麼變黑，問題通常就出在精靈表上。

這一頁涵蓋完整流程：精靈表究竟是什麼、它和圖集差在哪裡、什麼時候用網格、什麼時候用橫向影格條、該匯出哪種格式，以及如何在瀏覽器裡把 GIF、圖片、影片來源轉成可用的精靈表。文中例子都來自我們自己的工具與世界——Agent Sprite Forge、The Cyclops' Island、Mini World 與 3D game builder——因為那正是我們實際出貨並測試的流程。

什麼是精靈表

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

這四個值只要有一個錯，問題立刻看得見。儲存格寬度填 32 而不是 33，每往後一個影格就右偏一個像素，看起來像整段動畫慢慢往右飄。原點設錯，動畫會上下顛倒。影格數填錯，最後一格會不見，走路循環就以抽動收尾，而不是停在接觸姿勢。這些不是渲染的 bug，是中介資料對不上。

精靈表的結構

把精靈表想成一張表格。欄與列藏在像素尺寸裡：總寬除以儲存格寬就是欄數，總高除以儲存格高就是列數。一張 512×128、儲存格 64×64 的精靈表有 8 欄 2 列，也就是 16 個影格。如果儲存格之間加上 1 像素的 padding，算法就變了：寬 512 像素、儲存格 64 像素、padding 1 像素，只能放 7 格而不是 8 格，因為 padding 吃掉 8 個像素。寫切圖程式之前，必須先把 padding 與 spacing 算進去。

原點為什麼重要

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

精靈表、spritesheet 與精靈圖集

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

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

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

網格精靈表 vs 橫向影格條

網格精靈表把影格排成列與欄，讓整張圖儘量接近正方形。這有兩個原因：某些硬體對正方形或 2 的次方尺寸的貼圖記憶體與 GPU 取樣比較友善；正方形的精靈表在影像編輯器裡也比較好預覽。引擎端的切圖預設就是網格：你設定儲存格大小與影格數，引擎就一列一列走下去。

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

這類錯誤一開始通常很細微：動畫有播，但節奏不對，或影格重複的順序很怪。在動畫邏輯開始除錯之前，先確認版面和消費端一致。在我們的 3D game builder 裡，用精靈做的角色走網格，因為切圖由引擎處理；火焰、水面這類靠著色器驅動的特效走單列，因為材質直接取樣。

該匯出哪種格式

PNG 是安全的預設選項。它支援完整透明通道、無損，而且每個引擎和瀏覽器都解得了。邊緣銳利、色塊平坦的精靈，PNG 壓得不錯。照片感或大量陰影漸層的精靈，WebP 通常在同樣畫質下檔案更小，而且目前所有瀏覽器都支援。檔案大小是重點、又能確認目標執行環境解得開，就用 WebP。GIF 是交付格式，不是製作格式：它只支援 1 位元透明，所有半透明像素不是變成全不透明就是全透明。來源如果有柔邊，GIF 會把它鋸齒化。

影格不是單純的均勻網格、需要具名狀態，或消費端預期收到圖集時，就附一份 JSON sidecar。sidecar 很小，而且省掉把座標寫死的麻煩。影格大小一致、動畫只有一個循環，那就不必附，讓引擎自己算矩形。精靈絕對不要匯出成 JPEG。JPEG 有損，又沒有透明通道，透明區域不是變黑就是變白，壓縮失真還剛好落在決定精靈輪廓的銳利邊緣上。沒有任何設定能救。

我們所有的轉換工具

以下是我們實際出貨的轉換流程。全部都在瀏覽器裡跑，把檔案丟進去就得到精靈表，不必安裝任何東西。涵蓋常見來源：動態 GIF、靜態圖片、影片片段。

動態 GIF 的轉換工具會把每個影格拆出來，再打包成精靈表或單列，你要的話可以把影格延遲寫進 sidecar。靜態圖片的部分，轉換工具會裁剪你提供的一串圖片並排成網格。影片則是依你選的頻率取樣影格寫進精靈表，取樣間隔與儲存格大小都自己控制。如果你正在替 The Cyclops' Island 做角色，或替 Mini World 做道具，就從手邊的來源格式開始，挑對應的轉換工具。

• GIF 轉精靈表把動態 GIF 逐格拆開，再打包成網格或橫向影格條。
• 圖片轉精靈表接收一串靜態圖片，排成儲存格大小一致的均勻網格。
• 影片轉精靈表依指定間隔從影片取樣影格，寫成精靈表或單列。
• Agent Sprite Forge我們專門處理精靈的工具，負責產生角色影格並打包成精靈表，供 3D game builder 使用。

詞彙表

這些是你讀精靈表文件、引擎設定或著色器程式碼時會遇到的詞。定義刻意寫得簡短。

• Atlas把各區域打包成一張圖，再加上把名稱或 ID 對應到矩形的機器可讀索引。
• Cell精靈表裡裝著單一影格的矩形。它的寬與高就是儲存格大小。
• 影格條把影格排成單一橫列的圖片，供著色器與翻頁貼圖使用。
• Flipbook一種貼圖，隨時間一次取樣一個區域來產生動畫，通常來自影格條。
• 索引替圖集裡各區域命名或編號的附帶資料。沒有它，切圖就只是算術。
• 原點計算座標時所依據的圖片或儲存格角落，通常是左上角或左下角。
• Padding精靈表中儲存格之間多留的像素，用來避免貼圖滲色。padding 會改變能塞進幾格。
• Spacing儲存格之間的距離，常和 padding 混用，但有時分開計算。

走進它所屬的那個世界

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