精靈圖集只完成了一半。引擎還需要知道每一格在哪裡、持續多久。這個工具會把你的影格打包成網格、長條或緊密圖集，並以引擎真正能匯入的格式寫出這些資料：TexturePacker/Phaser JSON、Aseprite JSON、Godot 4 SpriteFrames 資源、CSS，以及 Unity 切割設定。影格會依你編號的習慣排序，所以 walk_10 會排在 walk_9 之後。
精靈圖集製作工具使用教學
- 一次拖放所有影格 PNG。它們會依名稱自然排序，隨時都能再加入。
- 用箭頭調整順序、移除多餘的影格，或反轉順序。
- 選擇版面配置：網格（自動或固定欄數）、單列、單欄，或裁掉透明邊緣後緊密打包。
- 設定影格間的內距、外邊界與邊緣延伸。如果目標平台需要 64、128、256 px 材質，請開啟 2 的次方尺寸。
- 在預覽中檢查動畫並設定 FPS。
- 下載 PNG 與一個資料檔，或包含 PNG 與所有格式的 ZIP。
你會得到什麼
- PNG 精靈圖集，含透明度，與預覽完全一致。
- Phaser / TexturePacker JSON（hash 與 array），包含裁切偏移，緊密打包的影格仍能對齊。
- Aseprite JSON，含影格標籤與時長。
- Godot 4 SpriteFrames .tres，使用 AtlasTexture，可直接用於 AnimatedSprite2D。
- CSS sprite，每格一個 class 並附逐格動畫，另有 Unity 匯入與切割設定。
適用哪些引擎
- Phaser 3：
this.load.atlas(key, 'sheet.png', 'sheet.json')，再用影格名稱建立動畫。 - Godot 4：把 .tres 放在 PNG 旁邊，指定給 AnimatedSprite2D 的 Sprite Frames。
- Unity：網格版面用設定檔中的數值以 Grid By Cell Size 切割。使用 Point 過濾並關閉壓縮。
- PixiJS、Defold、Cocos、Construct：可直接或透過各自的匯入器讀取 TexturePacker JSON (hash)。
來自實際做遊戲的技巧
- 角色動畫請用網格版面與統一尺寸的影格。引擎的網格切割與洋蔥皮工具都預期這種格式。
- 道具與 UI 圖集包含很多尺寸不同的圖片時，用緊密打包並開啟裁切。
- 如果圖集會以非整數倍縮放或產生 mipmap，加上 1–2 px 的邊緣延伸，可以避免相鄰影格在邊緣滲色。
- 影格名稱要有意義（hero_walk_00…），它們會成為 JSON 中的影格鍵名。
使用情境
- 把從 Aseprite、Blender 或 Spine 匯出的影格打包成一張材質。
- 替網頁遊戲製作 UI 或道具圖集。
- 把 AI 生成的影格做成引擎能直接播放的精靈圖集。
- 替形象頁製作 CSS sprite 動畫。
常見問題
能匯出哪些資料格式？
hash 與 array 兩種形式的 TexturePacker JSON（Phaser、PixiJS 與許多引擎都能讀取）、Aseprite JSON、Godot 4 SpriteFrames .tres、附關鍵影格的 CSS sprite 類別，以及包含 Unity 匯入與切割設定的文字檔。
緊密打包是做什麼的？
它會裁掉每一格的透明邊框，把裁切後的影格依高度排序後逐列排放，嘗試多種寬度並保留最小的圖集。JSON 會記錄每格的原始尺寸與偏移，確保繪製位置正確。
什麼是邊緣延伸？
邊緣延伸會把每一格最外圈的像素往外複製 1–4 px。當 GPU 取樣稍微超出影格範圍時（過濾、mipmap、非整數縮放），讀到的是這一格自己的邊緣，而不是相鄰影格。
我的影格尺寸不一樣，會怎樣？
在網格、單列與單欄版面中，每個格子都和最大的影格一樣大，較小的影格會依底部置中、置中或左上對齊。緊密打包則維持每格原本的尺寸。
影格數量有限制嗎？
沒有固定限制。所有處理都在瀏覽器中進行，實際上限取決於裝置的記憶體。幾百張 64 px 影格完全沒問題。
我的圖片會被上傳嗎？
不會。影格在本機讀取與打包，不會傳送到任何伺服器。