# 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**](/profile/cook1470)、[**Gamelet.Online**](https://gamelet.online/user/114899766849308759711@google/board)、[**Youtube**](https://www.youtube.com/@cook1470)