一站式遊戲開發全流程：VberAI 從 AI 生圖、原位切圖寫入 Unity

遊戲介面常常在工具之間斷開：圖在一個軟體裡，切圖在另一個軟體裡，進引擎之後還得重排層級。本文用同一張暗黑哥德風主介面，說明 VberAI Studio（≠ Google AI Studio）示範裡的四步：AI 生圖、原位切圖、寫入引擎、動作預覽。

入口：VberAI Studio。

1. 先準備一張完整主介面

示範用的原圖是一張已經排好的主介面：左側是角色，右側是 STORY、ARENA 等入口，背景是月夜場景。輸入是整屏介面，不是散落的圖示。

這一步是 AI 生圖。立繪或主介面先以整張圖進入流程。後面的切圖、寫入和預覽都用這一張。

2. 原位切圖，並取出背景

整張圖拆開之後，按鈕、角色和貨幣圖示離開原位，畫面上只留下沒有介面控制項的月夜背景。切圖依原圖座標取出元素，背景單獨保留。

若在 Photoshop 裡一張張匯出 PNG，位置資訊通常會丟掉。原位切圖會保留相對位置與尺寸，進引擎後不必再對著效果圖手動對齊。步驟見 原位切圖。

3. Engine MCP：寫入目前的 Unity 場景

切好的資源接著進入引擎。示範開啟 Engine MCP 面板，畫面上的指令原文是「把图层3写入当前 Unity 工程」。「图层3」是這張主介面的檔名。結論先出現，接著完成五項檢查：

• 匯入生成的原畫
• 把拆出的元素放回原位
• 取出乾淨背景
• 把角色寫入場景
• 檢查目前的場景

五項都通過後，面板顯示寫入完成。

寫入目標是目前的 Unity 場景。版面依切圖結果歸位，而不是把沒有名稱的 PNG 丟進資料夾。若要在 Cursor 裡繼續接按鈕和數值，用的是同一條 Engine MCP。安裝見 Unity MCP 安裝教學。

4. 在同一張介面上預覽動作

預覽用的是剛剛切出的圖層。背景是取出的月夜場景，角色是同一張立繪，STORY 和 ARENA 是切出的按鈕。角色向前揮杖，法術從杖尖掃過，按鈕在原位亮起。

左上角的訊息氣泡留在原地，不跟著角色移動。它是介面上的固定控制項。

這一步說明：切出來的靜態圖層可以回到同一張背景上，看成一段動作，並看到按鈕在原位亮起。按鈕跳轉和數值仍要在 Unity 裡用 Engine MCP 或腳本接上。

四步各自省下哪一種手工

步驟	畫面上的結果	省下的手工
AI 生圖	一整屏哥德風主介面	從零拼一版效果圖
原位切圖	元素離位，只留背景	在 Photoshop 裡按按鈕逐張匯出
Engine MCP	圖層寫入目前的 Unity 場景	進引擎後重排層級
動作預覽	同一角色和按鈕在原背景上動作	另做一套演示畫面

邊界

• 示範只用這一張主介面。切圖品質取決於原圖是否清楚，以及控制項邊緣好不好辨認。
• MCP 面板顯示的是寫入完成、檢查通過。按鈕跳轉和數值結算，還要在 Unity 場景裡再接邏輯。
• 動作預覽用的是這張立繪和切出的按鈕，和前面的主介面是同一套圖層。

小結

從一張介面圖到可預覽的一屏，可以留在同一條流程裡：AI 生圖、原位切圖、寫入 Unity，再讓同一批圖層動起來。產品入口：AI Studio。