圖片與影片轉 Sprite Sheet 轉換器 — PNG 影格轉遊戲圖集

圖片轉 sprite sheet 轉換器會接收一連串 PNG 影格（或一段短片），並將其打包成單一圖集，可直接交給遊戲引擎使用。在 Neta Studio 上，轉換完全在瀏覽器中執行：沒有上傳佇列、沒有伺服器往返、沒有任何檔案離開你的裝置。你放入一個裝有編號 PNG 的資料夾或單一 MP4，設定欄數、列數、儲存格大小與去背，然後匯出 sprite sheet 及對應的 JSON manifest。

真正會出問題的地方並不是打包。而是排序（frame_10 排在 frame_2 之前）、邊距（濾波器取樣到相鄰儲存格而產生邊緣殘色），以及儲存格大小（sprite sheet 的尺寸無法被網格整除，導致最後一欄被裁切）。本頁會具體說明這幾點，另外也會說明如何從影片中切出影格，以及如何在真實的 3D 世界中檢查成果的動畫播放。

放入圖片或影片

第一個畫面只有一個放置目標與兩條分支。放入一個資料夾，或多選 PNG、WebP 或 JPG 影格，工具會將輸入視為有序的圖片序列。放入單一影片檔——瀏覽器能解碼的 MP4、WebM 或 MOV——工具會切換到擷取分支，你在此選擇取樣率，它會透過 WebCodecs 路徑擷取影格，並以隱藏的 video 元素作為後備方案。

兩條分支都會進入同一個編輯器：右側是儲存格網格，左側是設定欄，還有一個可原地逐格檢視 sprite sheet 的即時預覽。在你按下匯出之前，不會寫入任何磁碟。靜態圖片在主執行緒解碼，影片則在 worker 中解碼，因此 4K 短片仍能保持介面順暢，但 300 張的 PNG 序列在解碼時會短暫阻塞畫面繪製。

如果放入的內容被拒絕，原因幾乎總是以下三者之一：影片編碼在瀏覽器中無法解碼（MOV 中的 HEVC 很常見）、圖片尺寸不一致，或影格數量超出你所設定網格的儲存格上限。工具會指出失敗的檔案，而不是默默丟棄。

如何從 PNG 影格製作 sprite sheet

排序是第一個決定，而如果你的檔名不一致，工具就可能排錯。預設比較器會將每個檔名拆成文字與數字片段再加以比較，因此 walk_0001.png … walk_0048.png 會落在正確順序，walk_1.png … walk_48.png 也一樣。如果你的影格是以時間戳或 UUID 命名，排序就是任意的——請先重新命名，或在打包前拖曳縮圖列調整順序。

將影格數量與你對該動畫的預期互相核對。12 格的待機循環與 24 格的行走循環在縮圖網格中以小尺寸檢視時看起來一模一樣。開啟預覽，檢視到最後一格，確認它正是接回第一格之前應該出現的影格——那通常是循環看起來破功的地方。

每個影格都必須有相同寬高。打包器會採用第一張圖片的尺寸，並拒絕之後任何尺寸不同的檔案。如果你的匯出工具在裁切時加上了 1px 邊框，或是以不同的錨點輸出了某個 sprite，那些影格就是異類，應該從來源修正，而不是在這裡補邊距。

將影片轉換成 sprite sheet

從影片擷取影格時，有一個數字決定結果是否可用：擷取率。影片通常是 24、30 或 60 fps；sprite 動畫則很少需要這麼高。一段三秒的 30 fps 短片若以 30 fps 取樣，會產生 90 格與一個不必要地龐大的圖集。同一段短片以 12 fps 取樣只產生 36 格，對大多數角色動作而言播放效果幾乎無從分辨。

請依動畫的預定播放速率來選擇擷取率，而不是依來源。如果 sprite 在遊戲中會以 12 fps 播放，就以 12 fps 擷取。如果你打算重新調整時間，就以 24 擷取，並在引擎中每隔一格丟棄——你保留了調整空間，代價是 sprite sheet 較大。

儲存格大小來自套用任何縮放之後的影片尺寸。1920×1080 的短片縮放至 480×270 會得到 480×270 的儲存格。請保持來源的長寬比；非等比例縮放會讓每個影格變形，沒有任何邊距設定能修正這點。當影片有黑邊時，請在擷取前先裁掉黑邊，而不是事後去背，因為移動中的主體可能會接觸到黑邊的顏色。

PNG 轉 sprite：透明度與邊距

保留 alpha 通道。人們回報的打包問題，多數可追溯到轉換器在匯出時將 RGBA 壓平為 RGB，這會依畫布填色讓每個透明像素變成黑色或白色。使用本工具時，匯出畫布建立時不帶不透明背景，因此已去背或預先去背的 PNG 在打包後仍保有 alpha。

邊距之所以存在，是因為材質濾波會取樣到儲存格之外。在 sprite 邊緣，雙線性或三線性濾波會讀取相鄰儲存格的像素並將其混入，產生一條 1px 的邊緣殘色，顏色會隨相鄰的 sprite 而改變。每個儲存格周圍留 2px 的透明邊距可阻止濾波器取樣到外部。邊距值會寫入 manifest，因此引擎讀取圖集時可依邊距位移 UV。

多數引擎已不再要求 sprite sheet 尺寸為 2 的次方，但在硬體上，以及假設如此的老舊流程中仍有幫助。設定欄數與列數，使（儲存格 + 2 × 邊距）× 欄數與（儲存格 + 2 × 邊距）× 列數落在 256、512、1024、2048 或 4096。如果你的網格無法整除，最後一列或最後一欄就會被裁切或填滿空白——工具會即時顯示最終 sprite sheet 尺寸，讓你在匯出前就能看出這點。

自動偵測儲存格大小

工具會從來源讀取儲存格大小。若是圖片序列，會採用第一張成功解碼影格的尺寸；若是影片，則採用縮放後的輸出尺寸。該值會預先填入 Cell size 欄位，並用來計算預設網格，因此一資料夾的 64×64 影格會以 64×64 儲存格開啟。

當主體周圍的透明邊界大於主體時，請手動覆寫。以寬鬆邊距匯出的 sprite 會產生大多為空的儲存格，圖集也會比實際需要更大。修剪設定會找出所有影格中非透明像素的邊界框，並裁切至其聯集——不是逐格裁切，因為逐格修剪會讓 sprite 在播放時抖動。

當影格不一致時，請以另一種方式覆寫。如果序列混雜了 64×64 與 66×66，因為某次匯出加了外框，儲存格大小偵測會鎖定第一個檔案，其餘的則被縮放或拒絕。請修正來源。沒有任何儲存格大小能讓尺寸不符的影格變正確。

在 3D 中看它動起來

sprite sheet 唯有播得出來才算正確。The Cyclops' Island 是 Neta Studio 上一個可遊玩的世界，使用了 sprite 風格的角色，也是檢查圖集動態最快的方式——帶著角色走動，觀察循環點，看看鏡頭拉遠、濾波生效時邊距殘色是否顯現。

如果你想自己建立測試，3D 遊戲建構器讓你將匯出的 PNG 與其 manifest 放入場景，並以計時器驅動 UV 位移。將影格時間設為你選擇的擷取率，動畫就會以你預期的速度播放。如果在這裡看起來不對，在你的引擎裡也會不對，而原因幾乎總是 manifest 中的儲存格或邊距值。

Mini World 是較小的沙盒，適合你只想要一個平面放上 sprite sheet，搭配可環繞的鏡頭，這通常已足以看出 sprite 邊緣的去背瑕疵。

更多免費工具

本轉換器與另外三個工具並列，它們共用同一個編輯器與匯出格式。在其中一個製作的 sprite sheet 可直接在另一個開啟，無需轉換。

GIF 轉 sprite sheet 接收動畫 GIF 並擷取其影格。GIF 的影格延遲是逐格定義的，因此工具會讀取這些延遲並回報 sprite sheet 的實際播放速率，而不是假設固定值。Sprite sheet 轉 GIF 則是反方向：在儲存格上選擇時間範圍，以指定的影格延遲匯出動畫 GIF，適合在不想附上 PNG 的情況下分享循環動畫。Sprite 動畫器接收 sprite sheet 與 manifest，在畫布中播放，並提供速度、方向與循環控制，讓你可在投入引擎前檢查影格時間。

每個工具匯出的 manifest 結構相同。儲存格寬、儲存格高、欄數、列數、邊距，以及有序的影格清單——因此從影片擷取器開始、在動畫器結束的 sprite sheet，全程帶著相同的數值。

走進它所屬的世界

sprite 是一個無處可站的角色。最後這一步是其他人沒有提供的：把你剛做好的 sprite sheet 放進一個有人能走動的世界——一座小島、一顆行星、一個下雨的街角。本站的每個世界都是由一段文字描述生成，並發布為可直接遊玩的頁面。