先說結論:3個步驟

本頁的圖片轉多圖層(Image to Layers)就是 Auto Layering(自動分層):把一張合成圖拆成可單獨編輯的圖層。不用畫框:檢測邊緣切圖,匯出有意義命名的圖片檔案。和 Layer Split 在同一工具欄;目標一樣,按框定尺寸的走那一頁。

為什麼切完之後,名字、位置和互動還要跟著進引擎:從圖片到多圖層:如何把角色圖拆成圖層,加快遊戲資源準備

用作 Auto Layering 源圖的貓之旅 UI 底板

步驟 1:開啟 Auto-Layering

選中畫板(例如 cat_journey_UI)。開啟重疊圖層選單,選 Auto-Layering(自動分層)

重疊圖層選單,含 Auto-Layering 和 Layer Split

步驟 2:確認開始分層

對話方塊是 Run AI auto-layering?,再點 Start layering。彈窗裡若仍寫 Manual Layering,對應現在的 Layer Split

確認對話方塊:Run AI auto-layering,Start layering

步驟 3:檢查帶名字的圖層

帶名字的邊界會出現在圖上,這意味著分層切分的圖片都處理好了。結果鋪在原圖右側。複雜的 HUD 和場景件會自動框出來。

Auto Layering 結果:貓之旅 UI 上帶命名的邊界

演示影片

同樣要拆層,但手動畫框:Layer Split。圖層已經切好之後,用 PNG 到 PSD 寫成 Photoshop 檔案。同一批圖層也可以匯入到 Unity 中:Figma 到 Unity,或 PSD 到 Unity