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 装饰	按钮底图与图标是否分开，避免热点不准
文本层	需改 copy 的标题是否仍可读、可替换
可拉伸底图	面板九宫格 / 背景是否适合不同分辨率
命名	节点名是否能在引擎里一眼认出（如 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。

第一次导出要注意什么？
重点验收拆分是否完整、按钮热点、多分辨率锚点；复杂主题字体与本地化通常还要在引擎里过一遍。