精靈表轉 GIF 轉換器 — 把精靈表變成動畫 GIF

GIF 是時間裡的影格。精靈表是空間裡的影格。把精靈表轉成 GIF，就是把這張表依照正確順序切成格子，再給每個格子一個延遲時間，讓瀏覽器把它們播成動作。這款轉換器完全在瀏覽器裡執行，並處理那些平常會出錯的部分：最後一列不完整、不均勻網格、透明背景。

把精靈表拖進來，設定影格大小、欄、列與 FPS，然後下載 GIF。你可以在匯出前預覽迴圈，這在最後一列比較短、或延遲無法剛好對上整數影格時特別重要。

把精靈表拖進來

工具就是第一個畫面。沒有註冊步驟，也不用排隊。你把 PNG 或 GIF 拖到頁面上，解碼器會立刻讀出精靈表尺寸。

你要設定四件事：影格寬度與高度、欄數、列數，以及 FPS。影格大小就是格子大小，單位是像素。欄數乘列數是網格的容量。如果這張表是 512 x 256、格子是 64 x 64，那就是 8 欄 4 列，容量 32。FPS 決定每個影格的延遲。接著下載 GIF。

預覽會直接在原地播放迴圈。如果某個影格看起來被切開——角色有一半偏移到下一格——那就是影格大小差了幾個像素。如果動畫會漂移，那就是欄數錯了。修正數字，預覽就會更新。

運作原理

檔案不會離開瀏覽器。圖片是用瀏覽器自己的圖片解碼器在本機解碼，畫到離屏畫布上，再讀回像素資料。沒有上傳步驟，因為根本不需要。

轉換器會量測這張表：檢查寬度是否能被宣告的影格寬度整除，高度是否能被宣告的影格高度整除。如果兩者都整除，網格就是均勻的。如果除不盡，餘數代表不是影格大小錯了，就是有邊距與間距要納入計算。

接著它會從左到右、由上而下走訪網格。每個格子都會複製到影格緩衝區。透明像素會保持透明。編碼器寫入 GIF 時會帶上每個影格的延遲，所以時間資訊存在檔案裡，而不是播放器裡。

以 32 影格、12 FPS 匯出的表為例，每個影格的延遲約是 0.08 秒，換成 GIF 的單位就是 8 厘秒。總迴圈長度是 32 除以 12，約 2.67 秒。

最後一列不完整的精靈表

很多精靈表會以固定網格匯出，尾端留下沒用到的格子。一張 4 x 4 的表可能只有 13 個影格。最後一列會有三個空格。如果你把影格數留在網格容量，那些空格就會在 GIF 裡變成三個空白影格，迴圈就會閃一下或停頓。

設定真正的影格數。如果動畫有 13 個影格，就設 13。轉換器會在第 13 個影格停下來，忽略那些空格。最後一列比較短、格子寬度不同時，也是同樣處理。

如果你看不出這張表尾端有沒有空白影格，就把影格數設成你看得到的最後一個影格再加一。匯出、看預覽，如果看到空白就減一。在預覽裡檢查比用手檢查精靈表快多了。

透明背景會保持透明

GIF 只有一個透明色，沒有透明通道。那是 1-bit alpha：像素不是全透明，就是全不透明。這個格式沒有半透明。邊緣柔和的精靈表匯出後會出現硬邊，除非你另外處理。

轉換器會保留來源的透明度。它把透明色寫進 GIF 調色盤，並把那些像素標成透明。alpha 低於門檻的像素會變成透明；高於門檻的會變成不透明。

要避免的失敗模式是扁平化。如果精靈表在編碼前被畫到不透明畫布上，透明像素就會變成畫布原本的顏色。那通常是白色或黑色，放到新背景上就會變成一整塊實色。保留來源 PNG 的 alpha，匯出前不要合成。

遇到柔和邊緣時，請把邊緣的底色設成影格實際顯示的背景色。如果 GIF 會放在白色頁面上，就把邊緣底色設成白色，讓反鋸齒的光暈對得上。如果會放在深色背景上，就設成那個顏色。單一底色不可能同時對兩種背景都正確。

不是均勻網格的精靈表

打包式精靈表常在格子之間有間距，精靈表周圍也有邊距。一個 64 x 64 的格子加上 2 像素間距，就是 66 像素的步幅。如果你把影格寬度填 64，第一個之後的每個格子都會累積偏移 2 像素，動畫就會漂移。

把格子大小加上間距當成步幅，並把邊距當成偏移量。有些匯出工具會把整張表寫成格子加間距、沒有邊距；有些則會加邊界。讀檔案的中繼資料，或量測第一個格子，找出這兩個數字。

當最後一格大小不同時——例如最後一個影格為了殘影或特效而比較寬——均勻網格沒辦法一次描述它。把精靈表拆開：先讓規則的影格用同一個範圍跑轉換，再單獨加入那個特例影格，或在轉換前把它裁成共用格子大小。

如果精靈表是打包的，不是網格排列，就沒有簡單的步幅。請從來源工具把它匯出成網格，或用逐格矩形切出格子，再個別把那些影格餵進去。

挑選 FPS

GIF 以厘秒儲存影格延遲。10 FPS 就是每影格 10 厘秒。30 FPS 是 3.33，會四捨五入成 3，結果約 33 FPS。這個格式無法表達任意的小於厘秒延遲，所以請挑能整除 100 的 FPS：10、20、25 或 50 FPS。

延遲不均會造成抖動。如果你設 24 FPS，延遲是 4.17 厘秒，四捨五入不一致，有些影格就會比其他影格停得久。在短迴圈裡，每個循環會看到一次卡頓。改用 20 或 25。

讓迴圈長度符合動畫原本預期的長度。一個設定為 0.8 秒的走路循環，應該產生 0.8 秒迴圈一次的 GIF。以 16 影格來說，正好是 20 FPS。改影格數，預期的 FPS 也會跟著變。

多數瀏覽器也會強制最小延遲。低於 2 厘秒的延遲，經常會被檢視器夾到約 10 厘秒，所以 50 FPS 匯出的 GIF，在某些情況下不管檔案內容如何都會以 10 FPS 播放。請用你目標的瀏覽器測試匯出的 GIF。

反方向轉換

反方向很常見。你有一個動畫 GIF，想要一張精靈表：一張把所有影格排在網格上的圖片，讓遊戲引擎可以把它切成動畫。GIF 轉精靈表轉換器就是做這件事：解碼 GIF 影格，把它們打包成均勻網格，再匯出帶有影格大小與影格數的 PNG。

反向路徑麻煩的地方是一樣的透明度問題。GIF 只有一個透明色。當你把它拆成精靈表，那個顏色會變成精靈表的透明像素，而任何在 GIF 裡已經被扁平化的反鋸齒邊緣都會維持扁平。精靈表會繼承 GIF 失去的東西。

影格延遲在轉出時也會被丟掉。精靈表沒有時間資訊；時間是由引擎或動畫工具指定的。如果你需要那個時間，轉換前先記下 GIF 的 FPS，再設定到目標動畫裡。

看 GIF 在 3D 裡播放

GIF 迴圈是平面的動畫。The Cyclops' Island 是在 Neta Studio 裡做出的可遊玩 3D 世界，精靈是角色，世界是它生活的地方。你可以把轉換好的動畫載到角色上，讓它在場景裡移動。

這會改變你要檢查的東西。一張在頁面上讀起來很順的 GIF，放進世界裡可能讀起來不對：在白色背景前看起來滑順的影格率，對上會動的幾何物件可能顯得慢；而你為了透明選的底色，也可能和環境不合。

Mini World 和 3D game builder 是另外兩個能放結果的地方。Mini World 是一個小世界，使用同樣的 builder 介面。Agent Sprite Forge 會產生可匯出、可做成動畫的精靈角色。它們全都跑在瀏覽器裡。

更多免費工具

如果你在處理精靈，轉換器只是流程中的一步。這些是其他工具。

精靈動畫工具：用指定 FPS 播放精靈表，支援洋蔥皮與逐格播放，讓你在匯出前檢查迴圈。要找出壞影格又不想先匯出 GIF 時很好用。

精靈表製作工具：把個別影格圖片打包成網格，可選格子大小、欄數與邊距。當影格是一堆分開的檔案、而不是一張精靈表時，就用這個。

精靈資源庫：一組現成的精靈與精靈表，可以用來測試轉換器，包含最後一列不完整、以及透明背景的精靈表。

這些都不需要上傳。它們和轉換器一樣在瀏覽器裡執行。

走進它所屬的世界

精靈是沒有地方站的角色。最後一步是別人沒提供的：把你剛做好的精靈表放進一個有人可以走動的世界——一座小島、一顆行星、一個下雨的街角。這個網站上的每個世界都是由一段文字描述做出來，並發布成你可以玩的頁面。

常見問題