Sprite Sheet 製作工具：免費線上 Sheet 與圖集建構器
打造自己的 Sprite Sheet 製作工具
將影格合併成單一 Sheet — 設定欄數、邊距與縮放，匯出 PNG 與 JSON 圖集 — 或從單一提示詞產生完整的動畫 Sheet。
Sprite Sheet 製作工具只做一件事：把一組個別影格打包成一張已知座標的圖片。你餵給它 PNG、JPG 或 WebP 檔案，選擇欄數、邊距與縮放，它會回傳一張 PNG 加上一份 JSON 圖集，將每個影格名稱對應到 x、y、寬度與高度的矩形。你的渲染器只需要這個矩形，就能繪製正確的格子。
這個詞涵蓋兩種不同的工具。一種是打包器：你已經有影格，想把它們放到同一張 Sheet 上。另一種是產生器：你寫一段提示詞，就能得到一張風格一致、完整的動畫角色 Sheet。Neta Studio 的瀏覽器 3D 世界建構工具兩者都支援，輸出可直接放進 Three.js 場景，不需要轉換步驟。
用你的影格製作 Sprite Sheet
這是打包路徑。你把影格拖進去，Sheet 會以確定性的方式建立：由左至右、由上至下，依照你提供的順序排列。第一個影格佔用格子 (0,0)，第二個位於右邊一格，依此類推，直到該列填滿，打包就會換到下一列。
在這裡，順序比什麼都重要。打包器不會依檔名排序，也不會從名稱推斷動畫群組。如果你的影格命名為 frame_1.png 到 frame_8.png，而你以錯誤的順序拖入，匯出的 Sheet 就是錯的，JSON 圖集也會忠實記錄錯誤的順序。拖入前先排序，或在匯出前檢查縮圖列。
輸出是兩個檔案。PNG 是打包後的圖片。JSON 是一個以影格名稱為鍵的小型物件，每個值包含矩形與來源尺寸。大多數引擎可以直接使用該 JSON；如果你的引擎不行，這些數字也很單純，可以手動重新對應。
01
將影格匯出為帶透明度的 PNG，或如果你不需要 Alpha 通道，也可使用 JPG/WebP。讓每個影格保持相同的像素尺寸。
02
依照播放順序將影格拖進打包器。確認縮圖列由左至右的閱讀順序，與動畫應播放的方式一致。
03
設定欄數。如果你想要大致呈正方形的 Sheet，就保持自動；如果你要單一橫向長條，就將它固定為影格數量。
04
設定邊距與縮放。邊距會在格子之間加入透明像素；縮放會使用最近鄰，將每個影格乘上整數倍。
05
同時匯出 PNG 與 JSON 圖集。在接到渲染器之前，先用 JSON 裡的其中一個矩形對照可見的 Sheet 檢查。
從提示詞產生 Sprite Sheet
Sprite 製作工具的第二種意思與網格打包無關。你描述一個角色，就會取回完整的 Sheet — 一整組以一致風格渲染、並且已經排成網格的姿勢。沒有來源美術可以拖入，因為美術本身就是輸出。
有用的部分是一致性。一次產生行走循環的八個方向，能讓輪廓、調色盤與比例在所有格子間保持一致。分開請求產生每個影格則做不到，這種偏移會顯示為角色在影格之間似乎改變了體態。
Neta Studio 會產生 8 方向行走循環、待機、攻擊與施法組合。Agent Sprite Forge 是工作室內負責產出這些 Sheet 的資產；你可以將產生的 Sheet 放進 3D 遊戲建構工具中的世界，並用打包器原本會產生的相同圖集 JSON 來驅動它。
- 8 方向行走一張 Sheet 涵蓋八個羅盤方向，因此在場景中轉動角色時，只需查詢對應的列，而不是重新產生。
- 待機、攻擊、施法以與行走相同風格產生的獨立動作組合，因此你可以在執行階段切換，而不會出現明顯的風格斷層。
- 風格延續只要描述角色一次，姿勢組合就會繼承調色盤與比例；這正是逐格產生影格時通常會失敗的地方。
欄數、邊距、縮放與 JSON 圖集
四項設定決定一張 Sheet 是否可用。在匯出時就設定正確，因為事後修正意味著要重新打包，並重新測試每個引用舊座標的動畫。
JSON 圖集是 Sheet 與你的程式碼之間的契約。它會儲存每個影格在格子中的位置與大小。如果你變更 Sheet 卻沒有重新產生圖集，Sprite 就會取樣到錯誤的區域，導致鄰近影格的邊緣滲入該格子。
- 欄數固定每一列在換行前有多少個格子。橫向長條的欄數等於影格數量；網格則使用接近平方根的數值。
- 邊距與間距在格子之間插入透明像素。當你的渲染器使用任何濾鏡取樣時，這點很重要，因為在零邊距時，鄰近影格的邊緣像素會滲過邊界。
- 縮放使用最近鄰將每個影格乘上整數倍。使用平滑濾鏡進行非整數縮放會柔化像素邊緣，破壞你當初匯出這些影格所追求的銳利外觀。
- JSON 圖集將每個影格名稱對應到 x、y、寬度與高度。將原點視為角色的腳底，而不是圖片左上角，這樣放到地平面時就不需要逐格偏移。
什麼是紋理圖集
圖集是一張紋理，容納許多較小的圖片，再加上一張描述每張圖片所在位置的表格。Sprite Sheet 是常見情況，其中那些較小的圖片是同一對象的動畫影格。
圖集存在的原因是 Draw Call。為每個影格綁定個別紋理，會迫使渲染器在每個影格之間切換狀態，而當螢幕上有大量 Sprite 時，狀態切換會主導影格時間。將所有內容打包到一張紋理上，代表整組只需一次綁定。幾何仍會逐 Sprite 繪製，但紋理不會改變。
取捨是編輯粒度很粗。變更一個影格意味著要重新打包 Sheet 並更新圖集，而任何持有舊矩形的程式碼現在都是錯的。這就是為什麼圖集要以資料形式匯出，而不是寫死座標。我們的 Sprite Sheet 指南會更深入說明打包決策。
適用於 RPG、平台遊戲與等角遊戲的 Sprite Sheet 產生器
你想要的版面大多取決於遊戲類型。RPG 依方向與動畫階段索引，因此網格讀起來很自然。平台遊戲通常一次執行單一動作，所以橫向長條比較簡單。等角世界需要符合菱形投影的格子尺寸，否則 Sprite 會重疊。
在設定欄數之前先選好版面，並依照該版面撰寫查詢程式碼。事後把網格改成以長條為基礎的索引，是機械但繁瑣的變更，而且會影響每個動畫呼叫位置。
| 類型 | 典型版面 | 備註 |
|---|---|---|
| RPG | 4 方向網格 | 列是方向，欄是影格。先依方向再依階段索引。 |
| 平台遊戲 | 單一橫向長條 | 每張 Sheet 一個動作。播放是線性索引，不需要列運算。 |
| 等角 | 菱形格子 | 格子尺寸必須符合投影。比平常增加更多邊距，以防止邊緣滲色。 |
角色 Sprite Sheet
當角色超過一個時，最困難的部分是讓整個角色群保持一致。個別看起來合理的 Sheet，放在一起就會失敗：調色盤偏移、比例改變，或站在同一場景中的角色之間光線方向相反。
一次產生角色的完整動作組合，而不是一次只產生一個動作。調色盤與比例會在同一次產生中延續到各個姿勢；跨次產生則不會，而當兩個角色出現在同一個影格時，差異就會顯現。
讓角色群中每個角色的格子尺寸完全相同，即使美術沒有填滿格子。統一的格子讓場景可以將任何角色放到任何位置，而不需要逐角色的偏移表。角色 Sprite 製作工具的使用案例會以完整角色群走過一遍這個流程。
切開現有的 Sheet
如果你已經有一張 Sheet，並需要把影格取回來，那是切片，不是打包，而且屬於反向操作。GIF 轉換器與動畫工具會處理這條路徑 — 你提供 Sheet，定義格子網格或影格邊界，就能取得個別影格。
有兩件事會讓切片失敗。邊距不均的 Sheet 無法用猜測的格子尺寸整除，所以要測量已知的格子，而不是用估計的欄數去除圖片寬度。從有損格式匯出的 Sheet 會在格子邊界帶有壓縮失真，而當格子被分開並放大後，這些失真就會變得明顯。
走進它所屬的世界
Sprite 是一個無處可站的角色。最後一步是其他地方沒有提供的：把你剛做好的 Sheet 放進一個有人可以走動的世界 — 一座小島、一顆行星、一個下雨的街角。這個網站上的每個世界都是從一段文字描述製成，並發佈成你可以遊玩的頁面。
常見問題
來源影格可以使用哪些檔案格式？ +
PNG、JPG 與 WebP。PNG 是三者中唯一能可靠攜帶 Alpha 通道的格式，因此任何有透明度的內容都請使用它。
為什麼我的 Sprite Sheet 放大後看起來模糊？ +
你使用了非整數倍縮放，或渲染器套用了平滑濾鏡。只使用整數倍縮放，並將紋理濾鏡設為最近鄰。
影格之間需要邊距嗎？ +
通常需要。在零邊距且使用任何紋理濾鏡時，某個影格的邊緣像素會取樣到鄰近格子，在動畫期間產生可見的接縫。
JSON 圖集實際上包含什麼？ +
每個影格一筆項目，記錄它在 Sheet 上的 x、y、寬度與高度。有些匯出工具也會記錄來源影格尺寸與原點；對角色而言，原點通常位於腳底。
匯出後可以變更欄數嗎？ +
不重新打包就沒辦法。變更欄數會移動 Sheet 上的每個影格，因此舊圖集矩形不再指向正確的格子，每個引用它們的動畫都會失效。
Sprite Sheet 製作工具與 Sprite Sheet 產生器有什麼差別？ +
製作工具會把你已有的影格打包成網格。產生器則從提示詞建立影格 — 例如一套風格一致、完整的 8 方向行走組合 — 因此美術是輸出，而不是輸入。
返回 3D 遊戲建構工具
全部 31 個完成的 3D 世界、遊戲與場景都在同一頁 — 每一個都可以遊玩。
從資料庫範本開始
這個資料庫中的每項資產都是透明、可直接用於遊戲的 PNG，並附有記錄的提示詞 — Sprite 資源庫與免費 Sprite Sheet，依動作、風格與主題標記。可免費瀏覽與下載。