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。