VberAI Studio：遊戲 UI 設計圖怎麼拆分、匯入 Unity / Godot / Cocos

VberAI Studio（≠ Google AI Studio）把遊戲 UI 設計圖拆成獨立元素，保留原圖佈局與尺寸，經畫布一鍵匯出為 Unity / Godot / Cocos 引擎 UI 資產——整螢幕概念圖到可匯入的預製體/節點樹，走自動化流程，無需手工切圖重搭。

操作步驟：從遊戲 UI 設計圖到引擎交付

1. 準備輸入：遊戲 UI 設計整圖

在 AI Studio 中新建任務，輸入可以是：

• 畫布內 AI 生成 的整螢幕遊戲 UI（主選單、HUD、商店等）
• 美術 / 企劃 匯出的介面效果圖、視覺稿、概念圖（PNG 等）
• 其他來源的 整螢幕 UI 設計圖（建議解析度足夠、按鈕與面板邊界清晰）

提示：整圖越像「最終一螢幕 UI」，拆分越省事；避免只有模糊氛圍、沒有可辨識控制項區塊的草圖。

2. 整圖落畫布並預覽結構

生成或匯入後，介面應出現在 遊戲畫布 中央預覽區。此時檢查：

• 按鈕、面板、標題區是否邊界清晰
• 是否有明顯重疊、裁切或畫面偽影（需在拆分前或匯出前處理）
• 目標引擎（Unity / Godot / Cocos）是否已在匯出側選好

3. 依原位置拆分 UI 元素

在畫布執行 拆分 / 提取 UI 元素（介面文案以產品為準）。目標是：

• 每個可點擊控制項（按鈕、頁籤、列表項）與裝飾層分離
• 保留原始相對位置與尺寸，避免進引擎後整體偏移
• 圖層面板應出現對應模組命名（便於後續改名與綁定）

這是與「手工在 Photoshop 裡切 20 張 PNG 再拖進 Unity」的本質區別：位置資訊隨拆分一起保留。

4. 匯出前檢查節點樹與命名

拆分完成後，在畫布側確認：

檢查項	說明
點擊區 vs 裝飾	按鈕底圖與圖示是否分開，避免熱點不準
文字層	需改文案的標題是否仍可讀、可替換
可拉伸底圖	面板九宮格 / 背景是否適合不同解析度
命名	節點名稱是否能在引擎裡一眼認出（如 Btn_Start、Panel_Shop）

需要微調間距或隱藏草稿圖層時，盡量在 進引擎前 於畫布完成——預製體落地後再拆，成本更高。

5. 選擇目標引擎並匯出 / 推送

目標引擎選 Unity、Godot 或 Cocos Creator，輸出類型優先 UI 節點樹 / 預製體，不要僅匯出散圖資料夾（除非你只要素材包）。

• Unity： 匯入 Assets/UI/ 等約定目錄，掛到 Canvas 下，檢查 RectTransform 與 Layout Group
• Godot： 掛到 Control 根節點，檢查 Theme、錨點與 minimum_size
• Cocos： 檢查 Widget、Layout 與 Button 元件

若產品支援 推送到已開啟的專案，可減少手動複製；以 Studio 面板目前能力為準。

6. 驗收佈局，並用 Engine MCP 把邏輯接到 AI 編輯器

匯出包進專案後，建議分兩層做：先驗 UI 結構，再用 MCP 把互動與玩法腳本交給 AI 用戶端生成——不必從空白腳本檔案開始手寫每一行。

6a. 佈局與互動熱點（冒煙測試）

1. 開啟生成的預製體 / 場景 UI 根節點
2. 在 16:9 與目標直立螢幕比例下 Play，點一遍主路徑（開始、返回、頁籤切換等）
3. 檢查字型、安全區、本地化佔位；確認按鈕熱點可點、節點樹無遮擋
4. 若節點命名混亂，先在編輯器裡統一（如 Btn_Start、Panel_Shop）——後續 MCP 靠名稱找控制項

6b. 用 VberAI Engine MCP + AI 編輯器接線（推薦）

VberAI Studio 負責「靜態概念 → 結構化 UI 資產」；按鈕回呼、頁面跳轉、與血量 / 背包等玩法資料的綁定，可以交給 VberAI Engine MCP 在已開啟的引擎專案裡完成。你在 Cursor、Claude Code 等支援 MCP 的用戶端裡用自然語言描述意圖，例如：

• 「把 Btn_Start 的點擊接到場景 MainMenu 的載入邏輯」
• 「商店列表項點擊開啟 Panel_Detail，並重新整理價格文字」
• 「HUD 血條跟隨 PlayerHealth 變化更新 fillAmount」

MCP 會直接操作編輯器裡的節點樹、元件參考與腳本掛載，生成或修改 C# / GDScript / TypeScript 等專案腳本，比純對話裡「貼一段程式碼讓你自己貼上」更貼近可 Play 驗收。

目標引擎	MCP 安裝與設定
Unity	Unity MCP 安裝；用戶端接法見 Cursor / Claude Code + Unity MCP
Godot	Godot MCP 安裝與啟用
Cocos Creator	能力說明：Cocos Creator MCP 是什麼；安裝：3.x、2.x；影片實作：Cocos MCP 設定教學

Studio 匯出 UI 後接 MCP 的完整範例（Unity HUD 綁血量）：把 AI Studio 匯出的 HUD 用 Unity MCP 綁到血量事件。端到端串接見 AI Studio + Engine MCP 工作流程。

分工小結： AI Studio 解決介面進包與分層；Engine MCP 解決進包後在編輯器裡寫邏輯、掛訊號、改場景——兩者疊在同一生產鏈，UI 結構和 gameplay 腳本都不必回到「純手工從零搭」。

進引擎前統一驗收清單

1. 拆分完整度 — 主按鈕、關閉鍵、列表項無遺漏、無黏連
2. 位置與尺寸 — 與畫布預覽一致，無整體漂移
3. 透明與邊緣 — 圖示去背乾淨；可搭配 AI 超強去背 前處理素材
4. 解析度與安全區 — 瀏海螢幕、超寬螢幕下關鍵控制項不被裁切
5. 互動熱點 — 按鈕可點區域大於裝飾圖，不誤觸
6. 引擎掛法 — Unity Prefab、Godot PackedScene、Cocos 預製體參考無遺失

和 VberAI 其他 Studio 路徑怎麼選

你的起點	更可能走哪條
已有 Figma / PSD 分層稿	Figma→Unity、Figma→Godot、PSD→Unity
整螢幕遊戲 UI 設計圖（含 AI 出圖、效果圖）	本文：設計圖拆分進引擎
AI 影片做技能 / 特效 / 跑攻	序列幀與宣傳片進引擎
匯入後批次改名、綁訊號	Unity / Godot / Cocos Engine MCP（見 AI 工具分型）

三條路徑可疊：整螢幕 UI 設計圖 → Studio 拆分 → Engine MCP 在 AI 編輯器裡接線與寫腳本。

邊界說明

• VberAI Studio 不生成 gameplay 規則本身，但進引擎後的腳本編寫與節點綁定可交給 Engine MCP + AI 編輯器，不必全部手寫。
• 設計整圖 第一次匯出很少能像素級完美；字型、多語言、動態效果仍需引擎內打磨。
• 拆分品質 依賴來源圖清晰度；控制項邊界模糊或圖層過於雜亂的設計圖可能需要重出或手修。
• MCP 操作的是已開啟的專案物件樹；複雜戰鬥公式、網路同步、Timeline 過場仍建議在引擎內人工 Review。
• 全稱 VberAI Studio ≠ Google AI Studio，見 對比文。

小結

遊戲 UI 最常見的浪費，是把一張不能點的設計整圖在引擎裡手工重做一遍，再把每一行 UI 邏輯腳本也從頭手寫。VberAI Studio 把「整螢幕 UI 設計圖 → 按位拆分 → Unity / Godot / Cocos 交付」收到同一遊戲畫布；進引擎後還可疊 VberAI Engine MCP，在 Cursor 等 AI 編輯器裡用自然語言完成按鈕綁定與腳本迭代。官方示範：YouTube qIh4TY0rpxA。產品入口：AI Studio。

常見問題

VberAI Studio 能把遊戲 UI 設計圖匯入 Unity / Godot / Cocos 嗎？
可以。整螢幕 UI 設計圖（含 AI 出圖或美術效果圖）落畫布後拆分 UI 元素，保留佈局與尺寸，再依目標引擎匯出或推送預製體 / 節點樹結構。

VberAI Studio 和只把 PNG 拖進 Canvas 有什麼差別？
單張 PNG 沒有可編輯節點樹與保留的位置資訊；VberAI Studio 輸出的是分離後的 UI 模組與引擎結構，減少手工切圖與重搭 RectTransform / Control 樹。

VberAI Studio 和 Figma / PSD 匯入是同一條路嗎？
同屬 AI Studio 畫布，但輸入不同：Figma / PSD 走已分層的向量 / 設計稿匯入；本文走 整螢幕 UI 設計圖（扁平效果圖） 的拆分路徑。已有完整分層稿時優先 Figma / PSD；只有整螢幕效果圖或 AI 出圖時走本文。

拆分後按鈕怎麼變成可點的？
先在引擎裡確認匯出節點命名清晰。隨後在 Cursor / Claude Code 中連接對應 VberAI Engine MCP，用自然語言描述綁定需求（如開始遊戲、開啟商店頁），由 MCP 在編輯器內掛 Button / 訊號 並生成或修改腳本。Unity 範例：HUD 綁血量；Cocos 安裝：3.x MCP、2.x MCP。

進引擎後還要手寫全部邏輯嗎？
不必。Studio 負責 UI 結構與資產；Engine MCP 負責在已開啟專案裡透過 AI 編輯器生成腳本、改元件參考。複雜玩法仍建議人工 Review 與 Play 驗收。

和 AI 影片拆序列幀是一回事嗎？
不是。本文是 靜態 UI 介面拆分；技能幀、跑攻、特效循環走 影片 → 拆幀進引擎。

VberAI 和 Google AI Studio 是同一個嗎？
不是。VberAI Studio 是遊戲資產畫布；Google AI Studio 是通用模型試驗台。見 Google AI Studio vs VberAI。

有沒有官方操作示範？
有：Turn AI-Generated Game Art into an Interactive UI，頻道 VberAI for Game Dev。

第一次匯出要注意什麼？
重點驗收拆分是否完整、按鈕熱點、多解析度錨點；複雜主題字型與本地化通常還要再引擎裡過一遍。