VberAI 原位切圖：遊戲 UI 設計圖一鍵導入 Unity / Godot / Cocos

VberAI Studio（≠ Google AI Studio）支援原位切圖：把整屏遊戲 UI 設計圖拆成獨立 UI 元素，保留原圖佈局與尺寸，再一鍵匯出到 Unity / Godot / Cocos——無需手工切散圖後在引擎裡重搭層級。

演示影片：YouTube zDQTmox1f1k。

傳統切圖 vs 原位切圖

	傳統切圖	VberAI 原位切圖
做法	逐框切 PNG → 拖進引擎 → 重調位置與層級	AI 識別 UI 元素 → 按原位置拆分 → 按引擎匯出
產出	散圖為主	分層模組 + 可匯入的 UI 層級 / 預製體
位置資訊	切完常遺失，進引擎靠手對齊	相對位置與尺寸隨拆分保留

什麼是原位切圖

1. 原位 — 拆出的按鈕、面板等仍落在原始相對座標與尺寸上。
2. 切圖 / 拆分 — AI 識別按鈕、面板、圖示、標題等，形成可命名、可匯出的模組。
3. 一鍵入引擎 — 選擇 Unity / Godot / Cocos Creator，匯出 UI 層級或預製體（以 Studio 面板為準）。

已有 Figma / PSD 拆分圖層時，可直接匯入並匯出到引擎，不必再原位切圖；見 Figma→Unity 等。只有扁平整屏效果圖或 AI 出圖時，走本文。

操作步驟

1. 準備整屏 UI 設計圖

輸入可以是：

• 畫布內 AI 生成的主選單、HUD、商店等
• 美術 / 企劃匯出的介面效果圖（PNG 等）
• 其他來源的整屏 UI 設計圖（建議解析度足夠、控制項邊界清晰）

2. 原位拆分 UI 元素

在畫布執行拆分 / 提取：

• 可點擊控制項與裝飾層分離
• 保留原始相對位置與尺寸
• 圖層面板出現可讀模組名（便於改名與綁定）

3. 一鍵匯出到目標引擎

選擇 Unity、Godot 或 Cocos Creator，優先匯出 UI 層級 / 預製體。

• Unity： 匯入後掛到 Canvas，檢查 RectTransform
• Godot： 掛到 Control 根，檢查錨點與 Theme
• Cocos： 檢查 Widget、Layout、Button

4. 進引擎後驗收

1. 開啟產生的預製體 / 場景 UI 根節點
2. 在 16:9 與目標直式比例下 Play，點一遍主路徑
3. 確認無明顯整體漂移、按鈕可點、層級無遮擋
4. 需要綁邏輯時，可用 Engine MCP 在 Cursor 等用戶端裡接線

更細的步驟與 MCP 接線見：遊戲 UI 設計圖拆分進引擎。

邊界說明

• 首次匯出很少像素級完美；字型、多語言、動效仍需引擎內打磨。
• 拆分品質依賴來源圖清晰度；控制項糊邊或圖層過亂可能需重出或手修。
• 原位切圖解決結構進包，不替代玩法腳本。
• VberAI Studio ≠ Google AI Studio，見 對比文。

小結

遊戲 UI 交接裡，常被浪費的是把整屏效果圖在引擎裡手工切圖重搭。VberAI Studio 把「整屏設計圖 → 原位切圖 → Unity / Godot / Cocos」收到同一畫布。演示：YouTube zDQTmox1f1k。產品入口：AI Studio。

常見問題

什麼是 VberAI 原位切圖？
在 VberAI Studio 中對整屏遊戲 UI 設計圖做 AI 元素識別與按原位置拆分，保留佈局與尺寸後再匯出到引擎。

能一鍵匯入 Unity / Godot / Cocos 嗎？
可以按目標引擎匯出或推送 UI 層級 / 預製體（以 Studio 目前能力為準）。匯入後建議 Play 冒煙。

和手工切 PNG 有什麼差別？
手工切圖常得到無佈局語意的散圖；原位切圖輸出分層模組與引擎結構，減少重搭。

和 Figma / PSD 匯入是同一條路嗎？
同屬 AI Studio，輸入不同。Figma / PSD 若已拆分圖層，可直接走設計稿匯入，保留層級後匯出到引擎，不必再做原位切圖；見 Figma→Unity、PSD→Unity。只有扁平整屏效果圖（未分層）時，才走本文的原位切圖。

演示影片在哪？
YouTube zDQTmox1f1k。