跳到主要内容

UI 编辑器

本页解决什么问题：带你把 UI 设计图变成可编辑的界面结构，理解两步工作流、UI Tree、Inspector、预览、保存和导入限制。

从哪里进入​

  1. 打开 资源管理，进入 UI 交互 栏目或其他包含 UI 设计素材的栏目。
  2. 选中一张 UI 设计图或 UI 设计 JSON。
  3. 点击工具条上的 UI 编辑器。

如果选中的是 UI 设计图片，客户端会先把它准备成一份可编辑的 UI 设计文档，再打开编辑器。如果选中的是已经通过校验的 UI 设计 JSON，会直接打开现有文档。

没有正式素材身份的临时图、文档或普通图片不会显示可用的 UI 编辑器 入口。

编辑器由哪些区域组成​

  • 中间是 UI 预览画布；左侧是 UI Tree、界面图、独立素材和项目字体。
  • 右侧 Inspector 编辑当前节点、素材或字体；底部是两步流程和概览。
  • 顶部提供显示辅助、撤销、重做、清空、保存、保存并生成代码。

两步工作流​

第一步：识别界面结构​

  1. 确认左侧 界面图 已导入 1–4 张设计图。
  2. 点击底部 识别界面结构。
  3. 查看 识别概览 的已识别 Node、待用户检查、无问题、必须修复，点数量卡可逐项定位。
  4. 检查节点名称、层级、位置和布局状态。
  5. 点击 继续 进入自动切分素材。

识别只负责生成结构草稿，不会自动补齐所有视觉组件。组件为空时，后续步骤会继续要求切分素材。

识别完成后如果发现问题，可以点 重新运行。重新识别可能整体替换当前界面树，执行前请确认没有未保存的手工调整。

第二步：自动切分素材​

  1. 进入 自动切分素材。
  2. 查看 自动切分素材概览 的槽位、回填、待处理、必须修复和独立素材数量。
  3. 点击 自动切分素材，等待切图、登记和回填。
  4. 继续在 Inspector 中修正组件、位置或素材引用。

如果上次切分留下可恢复状态，客户端会弹窗询问：

  • 继续上次自动切分素材：接着处理上次的进度。
  • 开始新的自动切分素材：放弃恢复状态，重新开始。
  • 取消：先不处理。

切分完成后仍可点 重新运行。切分返回部分问题节点时，已完成素材会保留，问题节点需要在 Inspector 里继续处理。

UI Tree​

左侧 UI Tree 把每张界面图的结构放在一个虚拟超级根 UI Trees 下。

  • 虚拟超级根和页面根节点不能拖动；虚拟超级根没有右键菜单。
  • 页面根节点只能新增子节点，不能删除或新增同级。
  • 普通节点可以拖动到同一界面内的其他父节点，也可以拖到另一张界面图的页面根下。
  • 同界面移动会重新计算局部变换，尽量保持页面位置；跨界面移动只保留原局部变换，不保证像素位置不变。
  • 跨界面移动不会自动切换当前正在看的界面图。

每个节点行右侧有眼睛和删除按钮：眼睛切换预览显示，隐藏会连同子树一起隐藏但不删除；删除叶子节点直接生效，包含后代时先确认节点名和后代数量。

隐藏状态是当前编辑会话的临时状态，不写入 UI 文档，也不影响游戏最终数据。切换界面图时保留隐藏状态，重新加载、清空或删除节点后失效。

右键菜单​

在 UI Tree 或预览里的节点上点右键，会打开 新增子节点 → 新增同级节点 → 删除节点及子节点；后两项在页面根不显示。菜单会在点击外部、按 Escape、窗口失焦、滚动或调整窗口大小时关闭。

键盘删除​

选中节点后按 Delete 或 Backspace 可删除。页面根节点不会被删除；包含后代的节点会走同一套确认流程。

Inspector​

右侧 Inspector 会根据当前选择显示节点、素材、字体或界面图属性。顶部徽章显示 只读 或 可编辑。

Transform​

节点的 Transform 可编辑锚点预设、自定义锚点、左上 / 右下偏移，以及当前页面坐标中的左、上、宽、高。

页面根节点的 Transform 只读。只读状态下所有会改变文档的输入、选择器和按钮都会禁用。

你还可以选择子节点行为：

  • 子节点跟随父节点变化：移动或缩放父节点时带动子节点。
  • 子节点保持不变：移动或缩放父节点时，尽量保持子节点在页面上的位置。

节点基础信息​

  • 名称、描述、是否在预览中显示。
  • 布局状态和组件状态：无问题、待审或已阻塞。
  • 是否允许 LLM 修改布局或组件。
  • 子节点显示模式：叠加 或 互斥。

当父节点是 Container 时，Inspector 会提示：Transform 仍保留，但预览会按 Container 规则忽略它。

组件​

节点可以没有组件，也可以有一个图片或文本组件。

  • 新增：选择图片或文本后创建默认组件；替换 会确认后覆盖当前配置；移除 会确认后删除组件。
  • 图片组件可设置素材、图片类型和对应的拉伸 / 平铺 / 填充参数。
  • 文本组件可设置内容、字体资源、字体样式、字号策略、颜色和对齐等参数。

新增或替换组件会打开确认；移除组件也会确认。当前组件类型暂不支持编辑时会明确提示。

Sprite 九宫格​

选中独立素材后，Inspector 会显示 九宫格切片：

  • 快捷预设 1:2:1、1:1:1；清除 恢复四边边距为 0。
  • 可直接输入左、右、上、下边距，也可在预览图上拖动参考线。

没有可用预览时，仍可用数值和预设编辑。九宫格设置只影响素材在界面中的切片方式，不会裁剪原始图片文件。

字体​

选中项目字体后，Inspector 显示：

  • 字体家族、字体面、字重、样式、源文件名和引用数。
  • 中英文、数字与标点的多字号样张。

如果当前 WebView 无法加载该字体，会显示「字体无法在当前 WebView 中预览」，预览回退到系统字体，但不会阻止后续编辑。

预览​

显示框线、原图和组件​

顶部有三个显示开关：显示框线（边界、名称和选中轮廓）、显示原图（底层参考图）、显示组件（实际图片和文本内容）。

要检查更接近最终效果的画面：

  1. 勾选 显示组件。
  2. 关闭 显示框线。
  3. 按需关闭 显示原图。
备注

当前客户端只有一个预览画布，没有独立的「最终预览」页签。最终效果通过上面的显示开关组合检查，以当前客户端显示为准。

选择和拖动节点​

  • 单击节点：选中并同步左侧 UI Tree；拖动节点或八个缩放手柄调整位置和大小。
  • 按住 Shift 拖动四角手柄：等比缩放。横向或纵向变化更大的轴决定缩放方向，另轴按初始宽高比推导。
  • 点击画布空白：取消节点选择。

预览里的拖动和缩放是编辑操作，会进入撤销历史；平移和缩放视口不会。

平移和缩放​

  • 按住鼠标右键拖动、中键拖动或空格加左键拖动：平移预览。
  • 滚轮平移或缩放；右下角提供缩小、缩放滑杆、百分比 / 适配和放大。

右键只有在没有明显拖动时才会打开节点菜单；一旦越过拖动阈值，就按平移处理，松手后不会再弹菜单。

互斥子节点​

把父节点的 子节点显示模式 设为 互斥 后，选中该父节点会看到一排子节点标签：

  • 首次加载时默认只显示第一个直接子节点；点击其他标签切换到对应子节点。
  • 再次点击当前可见子节点可以隐藏它，允许进入全部隐藏状态。
  • 切换回 叠加 后，所有直接子节点恢复显示，后代节点自己的隐藏状态保留。

保存、只读和返回​

顶部有 保存 和 保存并生成代码：前者保存当前 UI 设计文档，后者先保存再生成一份 UI 代码产物。

保存前如果有非阻断检查问题，会弹出 检查发现问题，可选择 仍然保存、仍然保存并生成 或 取消。

保存成功会显示「保存成功」；保存并生成成功会显示「代码已生成」和生成文件路径，可复制路径。失败时显示 操作失败，并提供 重试保存 或 重试保存并生成。

如果文档已在别处更新，会提示「资源已在别处更新；请重新加载后再保存」。此时不要继续覆盖，先重新加载最新内容。

以下情况会进入只读或禁止保存：

  • 当前任务正在运行，编辑器状态被锁定。
  • 文档加载失败或版本未就绪，或正在保存、生成代码、执行 AI 工作流。

只读状态下，Inspector 仍可查看和复制，但所有会修改文档的控件都不可用。

返回资源​

点击左上角关闭按钮返回资源：

  • 没有未保存修改时直接返回；有修改时弹 返回资源？，可选择 取消、不保存 或 保存并返回。

保存失败时不会离开页面，确认框保留，方便你修复、重试或重新加载。

导入界面图、独立素材和字体​

界面图​

  • 最多 4 张，单张最多 5 MiB。
  • 支持 PNG、JPEG、WebP，可从本地项目或电脑导入。

独立素材​

  • 单批最多 100 张，单张最多 20 MiB，支持 PNG、JPEG、WebP。
  • 项目内已有但未登记的候选会显示为“待导入”，确认后才登记为正式素材。

项目字体​

  • 单批最多 64 个字体面，单文件最多 8 MiB，单批总量最多 32 MiB。
  • 支持 TTF、OTF、WOFF、WOFF2；只允许本地来源，不展示云端素材库。
  • 集合字体、符号链接、无法安全解析的压缩 Web Font 会被拒绝。
  • 相同内容的字体复用已有登记；删除字体只移除当前编辑器内容里的字体和文本引用，不删除项目文件或项目资产登记。
注意

字体是否能在浏览器里加载，不等于客户端安全校验一定能通过。导入被拒绝时请按错误原因更换字体文件，不要只凭系统里能预览就判断可用。

清空和删除​

  • 清空：确认后移除当前编辑器里的界面图、独立素材、项目字体、组件树和绑定。
  • 删除仍在使用的素材：确认后删除，并清理对应的组件树、图片引用和字体引用。

删除只影响当前 UI 编辑文档的编辑器内容，不会自动删除项目里已登记的原始文件。需要彻底清理项目素材，请回资源画布单独删除。

常见失败​

现象处理
界面图无法读取或尺寸无效重新导入有效 PNG / JPEG / WebP
识别界面结构不可用确认界面图已导入且不超过 4 张
自动切分素材不可用先完成结构识别，并检查界面图是否仍存在
节点被阻塞在概览或 Inspector 定位节点，按提示处理后重试
文本或图片组件缺素材在 Inspector 里补选素材或字体，或重新运行切分
保存提示资源已在别处更新重新加载最新文档后再保存
字体无法预览换一个可解析字体；预览失败不阻止其他编辑，但保存前仍需检查引用
清空后想恢复清空会移除当前编辑器内容，请先确认或提前保存

需要生成 UI 设计图，请阅读 图片生成与规范图。需要查看游戏实际运行效果，请阅读 运行与预览。