智慧分層：圖片轉多圖層

先說結論：4個步驟

Smart Layering（智慧分層） 把一張介面圖拆成多圖層。Image to Layers 指的就是這一步。已經在用的介面，如果一次切完就不再看，後面通常還要手工改。所以切開之前會停一下：哪些框留下，哪些區域是程式文字，要不要開 HD enhance（高畫質增強）。確認之後，切好的圖放在一塊新畫板上，墊在源圖的一份複製上。

拆開並不難。匯入到引擎中時，原來的位置和互動還在不在，才是後面要盯住的。原圖層的上下文資訊要保留，並和畫面同步。具體寫在從圖片到多圖層。

步驟 1：用 AI Auto Box 圈出各塊

選中畫板。開啟 AI tools（AI 工具），點 Smart Layering（智慧分層），再點 AI Auto Box（AI 自動圈選）。這一步讀整張圖，把要單獨切開的元素各自圈出來。列表還沒確認時，可以在已有框裡再畫一個，也可以移動框、改框的大小。

步驟 2：核對圖層列表

每個框標成 UI element（介面元素），或 Program text（程式文本）。標成程式文本的區域，匯出時按文書處理，不做成圖片圖層。框疊在一起時有前後。拖動某一行，可以改哪一塊在上面。這張圖裡，生命數、金幣數和波次是程式文本。圖示和卡面是介面元素。

步驟 3：確認數量，再決定要不要高畫質增強

對話方塊標題是 Start manual layering?（開始手動分層？）。裡面寫著要切多少個元素，以及這次的估算。勾選 HD enhance（高畫質增強） 之後，切出來的圖層會再交給影像模型處理一次。細節更清楚，邊緣更乾淨。模型能補上的殘缺，也會補上。估算和上一步標的內容一致，再點確認。

步驟 4：在新畫板上看結果

處理完會新建一塊畫板。切分結果鋪在源圖的一份複製上。各塊貼得很緊。拖動某一層，或者拉動框邊上的控制點，才能看出它和原圖是分開的。圖層名字也一起寫上，例如 life_count、shield_icon、skull_tower_card_one。

演示影片

圖層切好、名字也寫上之後，用 PNG 到 PSD 存成 Photoshop 檔案。同一批圖層也可以匯入到 Unity 中：Figma 到 Unity，或 PSD 到 Unity。