簡介
精靈圖的存在是為了讓遊戲能夠從一張紋理中繪製多幀。但有時你需要反向操作：例如，你想重繪某一幀，從已發布的遊戲中提取舊素材，或者重建一張沒有人保留源文件的精靈圖。
在影像編輯器中手動剪下畫面對於三個精靈圖來說還算可以，但對於三百個精靈圖來說就非常繁瑣了。精靈圖解包器可以在瀏覽器標籤頁中完成這項工作：如果你有資料文件，只需將其指向即可；或讓它自動查找精靈圖。
這裡介紹如何選擇正確的切片方式，在沒有資料檔時該怎麼辦，以及如何在下載前檢查幀是否播放正常。
四種切紙的方法
切片的建構方式各不相同，因此沒有唯一的正確切片方法。來自舊遊戲的等間距圖塊切片需要網格。而幀被裁剪過的緊湊圖集則需要資料文件，因為沒有資料檔案就無法確定幀的結束位置和下一幀的開始位置。
解包器提供四種模式。它會根據您拖放的內容自動選擇一種模式，您可以隨時切換。圖像和任何資料檔案都會在您的瀏覽器中讀取；無需上傳任何內容。
- 自動模式：透過尋找不透明像素區域來找到每個精靈。適用於精靈之間有間隙的鬆散圖。
- 設定模式：讀取圖的資料檔案（JSON、plist、XML、.atlas 等），並依照檔案指定的位置精確切割每一幀，並保留其名稱。
- 網格模式：將圖分割成等寬的單元格。您可以設定儲存格的大小、偏移和間距。
- 手動模式：在圖上手動繪製方框，適用於上述所有模式都無法處理的特殊圖。
逐步分割紙張
首先，選擇下列圖面影像：PNG、JPG、WebP、GIF 或 BMP。如果您有隨附的資料文件，例如 JSON 或從 TexturePacker 匯出的 plist 文件，請同時將其拖曳到。解包程式會識別格式並切換到設定模式。裁剪過的幀將按原始大小重建，旋轉過的幀將恢復到正常方向，使其與打包前對齊。
沒有資料檔？請先嘗試自動模式。如果精靈彼此接觸或位於純色背景上，請切換到網格模式並輸入儲存格大小。檢查圖紙上繪製的輪廓，按一下幀仔細查看，然後下載。
- 放入圖面影像，如有資料文件，也請一併放入。
- 檢查所選模式（自動、設定、網格或手動），如有需要請變更。
- 檢查圖面上的輪廓，修正任何偏差。
- 將幀下載為 ZIP 文件，如果只需要幾個幀，也可以下載為單獨的文件。
下載前先回放一下影格
提取幀只是成功的一半。另一半是確保它們仍然能夠正常播放動畫。啟用動畫預覽，解包器會按順序播放幀，這樣您就可以看到整個序列的動畫效果。
調整幀速率，直到它看起來與遊戲中的效果一致。缺少的幀會表現為卡頓，而幀被裁剪掉幾個像素則會表現為抖動。這兩種情況在這裡都比將所有內容匯入引擎後更容易發現。
- 將擷取的影格循環播放。
- 您可以變更幀速率（預設為 12 fps）。
- 卡頓和抖動會暴露缺失或錯位的訊框。
你手邊有哪個資料檔？
資料檔案只是一個幀名稱和矩形的列表，但每個引擎寫入資料的方式略有不同。如果您正在使用其他人製作的素材，了解素材類型有助於您瞭解任何警告訊息。
解包器可以讀取 JSON 的雜湊和陣列佈局（Phaser、PixiJS 和 TexturePacker 的通用導出格式），Cocos2d 的 plist 文件，Starling 和 Sparrow 的 XML，CSS 的集圖 0.文字文件，以及 Unity 的 YAML 精靈元資料。多頁圖集也適用，只需將每頁圖像都添加到解包器即可。
接下來通常會發生什麼事？
幀匯出後，通常需要對其進行一些處理。如果幀過大，請使用影像壓縮器進行壓縮。如果您想將它們放在一個更整潔的新工作表上，請將它們載入到 Texture Packer 中並重新打包。如果您使用自動或網格切片，並且想要一個結果的數據文件，解包器可以只匯出元數據，而不是圖像。
所有這些操作都在瀏覽器中執行，因此您可以從舊工作表轉換為全新的工作表，而無需將素材離開您的電腦。
撰寫者
Ankit Kumar
ToolBuddy 資深軟體工程師兼創辦人
使用 WebAssembly、Web Audio 和 Canvas 技術設計瀏覽器優先的實用程序，上傳要求為零。