SpritesheetMaker（圖集製作工具）

把散圖打包成 CG 可直接使用的 Spritesheet（圖集動畫）的小工具，支援在同一張圖集裡定義多個動畫。

做好後匯出一個 ZIP，裡面是一個同名資料夾，內含同名的 .json + .png，可直接匯入到 CG 專案中使用。

怎麼用

1. 匯入圖幀（左欄）：拖入 PNG 或整個資料夾、點擊選圖、切割現成 sheet、還原既有 ZIP，或從 CG 公開專案匯入素材。圖幀可直接改名、拖曳排序、依名稱排序。
2. 打包（右欄 Pack 設定）：圖一匯入就自動排版成圖集，可調 Trim、Padding、Extrude、排版法與最大尺寸，變更即時更新。
3. 定義動畫（右欄）：點「+ 新增」開一個動畫，再點左欄圖幀加入序列，可拖曳重新排序；一張圖集可有多個動畫。
4. 預覽（中欄）：「成品圖」看打包結果（滾輪縮放、拖曳平移，滑過小圖顯示範圍）；「動畫」播放預覽，可調速度、循環、殘影 onion。預覽背景可切棋盤 / 深 / 淺。
5. 匯出：填好上方「圖集名稱」，按「⬇ 下載 ZIP」。

打包設定、圖集名與預覽背景會記住，下次開啟沿用。每個設定旁的 ? 滑上去有說明。

匯入來源

• PNG：拖入或點擊選擇多張圖片。
• 切割 Sheet：把一張排好的大圖依格子尺寸或行列數切成多個圖幀。
• 還原 ZIP：把本工具匯出的 ZIP（json + png）讀回來繼續編輯。
• 從 CG 專案匯入：貼上 CG 公開專案的資源 JSON，一鍵還原現成圖集成幀＋動畫，或挑選專案圖片加入。

匯出格式

TexturePacker hash 格式的 JSON（frames / animations / meta）+ 圖集 PNG，PixiJS 可直接讀取。動畫資訊存在 meta.animationSettings（各動畫的 fps 與 loop）。

作者

酷可：Code.Gamelet、Gamelet.Online、Youtube