Sprite 圖集轉 GIF 轉換器 — 將 Sprite 圖集變成動畫 GIF

GIF 是時間中的影格。Sprite 圖集是空間中的影格。將 Sprite 圖集轉成 GIF，就是把圖集依正確順序切成格子，再為每個格子指定延遲，讓瀏覽器將它們播放成動態。這款轉換器完全在瀏覽器中執行，並能處理通常會出錯的部分：最後一列不完整、網格不規則，以及透明背景。

拖入 Sprite 圖集，設定影格尺寸、欄、列與 FPS，然後下載 GIF。你可以在匯出前預覽循環，這在最後一列較短，或延遲不是整數影格時很重要。

拖入 Sprite 圖集

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

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

預覽會直接在頁面上播放循環。如果某個影格看起來被切開 — 角色有一半偏移到下一個格子 — 代表影格尺寸差了幾個像素。如果動畫漂移，代表欄數有誤。修正數字後，預覽就會更新。

運作方式

檔案永遠不會離開瀏覽器。影像會使用瀏覽器本身的影像解碼器在本機解碼，繪製到離屏畫布，再以像素資料讀回。沒有上傳步驟，因為根本不需要。

轉換器會量測圖集：檢查寬度是否能被宣告的影格寬度整除，以及高度是否能被宣告的影格高度整除。如果兩者都能整除，網格就是規則的。如果不能，餘數會告訴你，不是影格尺寸有誤，就是有邊距與間距需要納入計算。

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

以 12 FPS 匯出的 32 影格圖集來說，每個影格的延遲約為 8 百分之一秒，也就是 GIF 所稱的 8 厘秒。總循環時間是 32 除以 12，約 2.67 秒。

最後一列不完整的圖集

許多圖集會以固定網格匯出，尾端留有未使用的格子。4 x 4 的圖集可能只包含 13 個影格。最後一列有三個空白格子。如果你把影格數留在網格容量，那些空白格子就會變成 GIF 中的三個空白影格，循環會閃爍或停頓。

請設定真正的影格數。如果動畫有 13 個影格，就設 13。轉換器會在第 13 個影格停止，並忽略空白格子。最後一列是較短、且格子寬度不同的列時，也是如此。

如果你無法判斷圖集尾端是否有空白影格，就把影格數設為你能看到的最後一個影格再加一。匯出、觀看預覽，如果看到空白就減一。在預覽中檢查比手動檢視圖集更快。

透明背景會保持透明

GIF 只有一個透明色，沒有 alpha 通道。也就是 1 位元 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 的匯出檔在某些情況下可能會以 10 FPS 播放，無論檔案內容為何。請在目標瀏覽器中測試匯出的 GIF。

反向操作

反向操作很常見。你有一個動畫 GIF，想要做成 Sprite 圖集：一張把所有影格排列在網格上的圖片，讓遊戲引擎能將它切成一段動畫。GIF 轉 Sprite 圖集轉換器就能做到：它會解碼 GIF 影格，將它們打包成規則網格，並匯出帶有影格尺寸與影格數的 PNG。

反向流程的棘手之處，是同樣的透明度問題。GIF 只有一個透明色。當你將它解開成圖集時，那個顏色會成為圖集的透明像素，而任何在 GIF 中已被壓平的抗鋸齒邊緣，仍會保持壓平。圖集會繼承 GIF 所失去的一切。

輸出時也會遺失影格延遲。Sprite 圖集沒有時間資訊；時間是由引擎或動畫工具指定的。如果你需要保留時間資訊，請在轉換前記下 GIF 的 FPS，並在目標動畫中設定。

在 3D 中觀看 GIF 播放

GIF 循環是平面的動畫。The Cyclops' Island 是在 Neta Studio 中建構的可遊玩 3D 世界，Sprite 是角色，而世界是它生活的地方。你可以把轉換後的動畫載入到角色上，並讓它在場景中移動。

這會改變你檢查的重點。在頁面上看起來沒問題的 GIF，放到世界中可能顯得不對：在白底上看起來滑順的影格率，對上移動中的幾何物件時可能顯得緩慢，而你為透明度選擇的補色也可能與環境不符。

Mini World 與 3D 遊戲建構器是另外兩個能放置成果的地方。Mini World 是一個小型世界，具備相同的建構介面。Agent Sprite Forge 會產生可匯出與製作動畫的 Sprite 角色。這些全都可在瀏覽器中執行。

更多免費工具

如果你正在處理 Sprite，轉換器只是流程中的一個步驟。以下是其他工具。

Sprite 動畫工具：以設定的 FPS 播放圖集，並提供洋蔥皮與逐格檢視，讓你在匯出前檢查循環。適合在不必先匯出 GIF 的情況下找出有問題的影格。

Sprite 圖集製作工具：將個別影格圖片打包成網格，並可選擇格子尺寸、欄數與邊距。當影格是以個別檔案而非單一圖集送達時，就適合使用這個工具。

Sprite 資源庫：一組現成的 Sprite 與圖集，可用來測試轉換器，包括最後一列不完整與透明背景的圖集。

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

走進它所屬的世界

Sprite 是一個無處可站的角色。最後一步是其他人都沒有提供的：把你剛做好的圖集放進一個有人能走動的世界 — 一座小島、一顆行星、一個下雨的街角。這個網站上的每個世界，都是從一段文字描述製作而成，並發佈成可遊玩的頁面。

常見問題