一站式游戏开发全流程：VberAI 从 AI 生图、原位切图写入 Unity

游戏界面常在工具之间断开：图像在一个软件里，切图在另一个软件里，进入引擎后还要重新摆放层级。本文用同一张暗黑哥特风主界面，说明 VberAI 演示中的四步：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。