什麼是精靈圖產生器？

精靈圖產生器將多張單獨的圖片合併為一張最佳化的精靈圖。上傳你的畫面或圖示，或拖入一個動態 GIF——每一格畫面都會自動擷取——選擇版面（網格、橫向條、縱向條或緊湊排列），設定透明或純色背景，然後匯出合併後的圖片，並附上 JSON、JSON 陣列、XML TextureAtlas 或 CSS 座標資料。

網格模式將所有畫面排成統一的 N×M 版面，適合每格尺寸相同的動畫循環。橫向條和縱向條把畫面排成單列或單行——這是簡單 2D 引擎動畫的標準版面。緊湊模式透過裝箱演算法，讓不同尺寸的圖示以最少浪費拼合。拖入動態 GIF 後，每一格畫面都會被解碼進圖中，無需先單獨匯出各格。輸出預設保留透明背景，也可選一種純色作為色鍵填充。中繼資料提供四種格式——JSON 雜湊、JSON 陣列、XML TextureAtlas 和 CSS——可直接用於 Phaser、PixiJS、Unity、Godot 或 CSS 的 background-position。動畫預覽可讓你以 1 到 60 FPS 逐格檢視，確保下載前時序正確。可逐格單步檢視以找出任何錯位的精靈，裁掉每格的透明邊緣讓圖集更精簡，還能把整段序列匯出為動態 GIF，無需遊戲引擎即可分享成果。

使用方法

1. 上傳您想合併到精靈圖中的各張圖片。
2. 挑選版面（網格、橫向、縱向或緊湊），調整間距，將背景設為透明或實心顏色。
3. 下載精靈圖圖片以及CSS或JSON格式的位置資料。

何時使用

• 把角色走路迴圈或爆炸動畫打包成一張圖，方便遊戲引擎呼叫。
• 將UI圖示集合併成單張資源，讓頁面只發一次HTTP請求而非四十次。
• 準備地塊（tilemap）素材時保留一致的內邊距，避免相鄰圖塊互相滲色。

結果

一位遊戲開發者上傳了16張角色動畫圖片（每張64×64像素）。工具將它們排列成4×4網格，產生一張256×256的精靈圖，並附帶JSON格式的影格座標供遊戲引擎使用。

常見問題

什麼情況下選緊湊版面配置而不是網格？

影格大小完全一致時用網格，例如32×32的角色動畫。要做單列或單行序列時選橫向或縱向條帶，是大多數遊戲引擎最容易載入的排版。圖示大小不一時選緊湊，例如16×16和48×48混在一起的UI圖集；它能讓貼圖最小，但中繼資料沒那麼容易手動閱讀。

內邊距設定是用來做什麼的？

內邊距會在每一格周圍加上透明像素。如果不加，使用線性過濾的渲染器會把相鄰影格的色彩滲到當前影格的邊緣。1到2像素的內邊距就足以消除這種瑕疵。

我該匯出哪種中繼資料格式？

JSON（雜湊）是大多數引擎載入的 TexturePacker 格式，每一格畫面以名稱作為鍵。JSON 陣列把畫面存成有序清單，Phaser 3 和部分流程較偏好它。XML 是 Starling/Sparrow 的 TextureAtlas，Unity、Godot 和 Friday Night Funkin 都在使用。CSS 則提供 background-position 類別，適合網頁圖示集。依你的算繪器需要選擇即可。

匯出結果會保留透明背景嗎？

預設會保留。精靈圖匯出為PNG，保留Alpha通道，源PNG的透明背景照常帶入。若需要不透明的輸出，可在版面選項旁邊挑一個實心顏色背景，適合做色鍵或給忽略Alpha的引擎使用。如果在意透明，請不要用JPG作為源檔案，JPG在上傳前就已經把透明部分合成成白色了。

一張精靈圖最多能放多少格？

實際上手機GPU對單張紋理的尺寸上限通常是2048或4096像素。一張4096×4096的圖按64×64分格可以容納4096格。但動畫用途建議拆成兩張2048×2048，對舊裝置更安全。

相關工具