圖片與影片轉精靈表轉換器 — PNG 影格轉遊戲圖集

圖片轉精靈表轉換器吃一串 PNG 影格，或一段短影片，把它們壓成一張可以交給遊戲引擎的圖集。在 Neta Studio 上，轉換全程在瀏覽器裡跑：沒有上傳佇列、沒有伺服器來回、檔案不離開你的機器。你丟進一個編號好的 PNG 資料夾或一個 MP4，設定欄數、列數、儲存格尺寸與去背，匯出一張圖集加上一份對應的 JSON manifest。

真正會壞掉的不是打包。是排序（frame_10 排在 frame_2 前面）、留邊（濾鏡去採隔壁儲存格，邊緣冒出一圈雜邊）、還有儲存格尺寸（圖集尺寸不能被網格整除，最後一欄被切掉）。這頁把這幾件事逐一講清楚，再加上怎麼從影片切影格，以及怎麼在一個真的 3D 世界裡確認它動起來是對的。

丟進圖片或影片

第一屏只有一個拖放區和兩條分支。丟進一個資料夾，或多選一批 PNG、WebP、JPG 影格，工具就把它當成有序的圖片序列。丟進單一影片檔——瀏覽器能解碼的 MP4、WebM 或 MOV——工具就切到抽取分支，在那裡你選取樣率，它走 WebCodecs 路徑抽影格，不行的話退回一個隱藏的 video 元素。

兩條分支最後都進同一個編輯器：右邊是儲存格網格，左邊是設定欄，中間是一個直接就地拖動預覽的即時預覽。在你按下匯出之前，什麼都不會寫到磁碟。靜態圖在主執行緒解碼，影片在 worker 上解，所以一段 4K 影片不會卡住介面，但 300 張 PNG 的序列在解碼時會短暫擋住重繪。

如果丟進去的東西被拒，原因幾乎都是這三種之一：影片編碼在瀏覽器裡解不開（MOV 裡的 HEVC 很常見）、圖片尺寸不一致、或影格數超過你設定的網格能容納的儲存格上限。工具會指出是哪個檔案出問題，而不是默默丟掉。

怎麼用 PNG 影格做精靈表

排序是第一個要做的決定，而如果你的檔名不一致，工具就會排錯。預設比較器會把每個檔名切成文字段與數字段再比對，所以 walk_0001.png … walk_0048.png 會排對，walk_1.png … walk_48.png 也會排對。如果你的影格是用時間戳或 UUID 命名的，排序結果就是任意的——先改檔名，或者在打包前拖動縮圖列自己排。

拿影格數跟你預期的動畫長度對一下。12 影格的待機循環和 24 影格的走路循環，縮圖縮小時看起來一模一樣。打開預覽，拖到最後一格，確認它就是接回第一格之前該出現的那張——循環看起來斷掉，通常就斷在這格。

每一格影格的寬高必須一樣。打包器取第一張圖的尺寸，之後任何尺寸不同的檔案都會被拒絕。如果你的匯出工具在裁切時多加了 1px 邊框，或是以不同錨點輸出了一張精靈，那幾張就是異類，該回頭修來源，而不是在這裡補邊。

把影片轉成精靈表

從影片抽影格只有一個數字決定結果能不能用：抽取率。影片通常是 24、30 或 60 fps；精靈動畫很少需要這麼多。一段 30 fps、三秒的影片用 30 fps 取樣會產生 90 格和一個毫無必要的大圖集。同一段影片用 12 fps 取樣產生 36 格，對大多數角色動作來說播放起來看不出差別。

抽取率要照動畫預定的播放速率選，不是照來源。如果精靈在遊戲裡要跑 12 fps，就用 12 fps 抽。如果你打算重新計時，就用 24 fps 抽，在引擎裡每隔一格丟一格——你保留了彈性，代價是圖集更大。

儲存格尺寸來自影片縮放後的尺寸。一段 1920×1080 縮到 480×270，儲存格就是 480×270。保持來源的長寬比；非等比縮放會讓每一格變形，沒有任何留邊設定救得回來。影片有黑邊時，要在抽取前先裁掉黑邊，而不是抽完再去背，因為移動中的主體會碰到黑邊的顏色。

PNG 轉精靈：透明通道與留邊

保留 alpha 通道。大家回報的打包問題，大部分源頭都是轉換器在匯出時把 RGBA 壓成 RGB，於是每個透明像素不是變黑就是變白，看你畫布填什麼色。這個工具的匯出畫布建立時就沒有不透明背景，所以去過背或本來就帶透明通道的 PNG 在打包過程中會保住它的 alpha。

留邊存在的理由是貼圖濾鏡會採到儲存格外。在精靈邊緣，雙線性或三線性濾鏡會讀到隔壁儲存格的像素並混進來，產生一圈 1px 的雜邊，顏色還會隨旁邊放的是哪張精靈而變。每格周圍留 2px 透明邊就能讓濾鏡採不出去。留邊值會寫進 manifest，引擎讀圖集時可以照留邊量偏移 UV。

圖集尺寸要是二的次方，多數引擎已經不要求了，但在硬體上、在假設這件事的舊管線裡還是有幫助。設定欄數與列數，讓 (儲存格 + 2 × 留邊) × 欄數 與 (儲存格 + 2 × 留邊) × 列數 落在 256、512、1024、2048 或 4096 上。如果你的網格除不盡，最後一列或最後一欄就會被切掉或補上空白——工具會即時顯示最終圖集尺寸，讓你在匯出前就看到。

自動偵測儲存格尺寸

工具會從來源讀儲存格尺寸。圖片序列取第一張解碼成功的影格尺寸；影片取縮放後的輸出尺寸。這個值會預填在 Cell size 欄位，並用來算預設網格，所以一資料夾 64×64 的影格打開時就是 64×64 的儲存格。

當主體周圍的透明留白比主體本身還大時，就覆寫它。一張帶著大把留白匯出的精靈會產生幾乎全空的儲存格，圖集也就比它需要的更大。trim 設定會找所有影格裡非透明像素的邊界框，然後裁到它們的聯集——不是逐格裁，因為逐格裁會讓精靈播放時抖動。

影格尺寸不一致時，反向覆寫它。如果序列混了 64×64 和 66×66——因為某一次匯出多描了一圈外框——儲存格尺寸偵測會鎖在第一個檔案，其他張不是被縮放就是被拒絕。去修來源。沒有哪個儲存格尺寸能讓尺寸不一致的影格變正確。

在 3D 裡看它動

精靈表只有播得起來才算對。The Cyclops' Island 是 Neta Studio 上一個可以玩的世界，角色就是用精靈風格做的，也是確認一張圖集動起來對不對最快的方法——操著角色走一圈，看循環點順不順，看鏡頭拉遠、濾鏡開始作用時留邊的雜邊會不會跑出來。

如果你想自己搭測試，3D game builder 可以讓你把手上的 PNG 和它的 manifest 丟進場景，用計時器驅動 UV 偏移。影格時間設成你選的抽取率，動畫就會用你預期的速度跑。在這裡看起來不對，在引擎裡也會不對，而原因幾乎都是 manifest 裡的儲存格值或留邊值。

Mini World 是更小一點的沙盒，你只想要一個平面放圖集、一台可以環繞的攝影機時就用它，這樣通常就足以看出精靈邊緣的去背有沒有做壞。

更多免費工具

這個轉換器旁邊還有三個工具，共用同一套編輯器與匯出格式。在其中一個做好的圖集，開進另一個不用轉檔。

GIF to sprite sheet 讀一張動畫 GIF，把影格抽出來。GIF 的影格延遲是逐格記的，所以工具會把它們讀出來，回報這張圖集實際的播放速率，而不是假設它是固定值。Sprite sheet to GIF 走反方向：在儲存格上選一段範圍，用指定的影格延遲匯出一張動畫 GIF，想分享一個循環又不想附 PNG 時很好用。Sprite animator 讀一張圖集加 manifest，在 canvas 裡播它，有速度、方向與循環控制，讓你在投入引擎之前先檢查影格計時。

每個工具匯出的 manifest 形狀都一樣。儲存格寬、儲存格高、欄數、列數、留邊，加上有序的影格清單——所以一張從影片抽取器開始、在動畫器結束的圖集，一路帶著同一組數字。

走進它所屬的世界

精靈是沒有地方站的角色。最後一步是別人沒給的：把你剛做好的圖集放進一個有人能走來走去晃的世界——一座小島、一顆行星、一個下雨的街角。這個網站上的每個世界都是從一句文字描述做出來的，發佈成一個可以玩的頁面。