可视化界面编辑器

可视化界面编辑器用于制作标题页、存读档、设置菜单、HUD 和剧情交互面板。 每个界面都属于一个扩展，并保存为扩展 ui/ 目录下的一份 JSON 文档。只做界面时，扩展不需要初始化程序，也不需要安装 npm 依赖。

​

从哪里进入

进入 个性化 → 项目设置。左侧第二级导航的下半部分是当前项目的扩展树：

1. 新建或选择一个本地扩展。
2. 展开扩展下的「界面」。
3. 点击旁边的新增按钮，输入界面名称。
4. 选中新建的界面，编辑器会在右侧打开。

市场扩展和系统扩展是只读的。你仍然可以在界面上右键，将整个界面复制到自己的本地扩展中再修改。修改默认游戏壳中的系统界面时，Studio 会为当前项目创建一份可编辑副本，并提供「恢复原始界面」操作。

​

四个视图

界面编辑器顶部提供四种视图，它们操作的是同一份界面文档：

​

认识设计视图

设计视图由三个区域组成：

• 左侧：界面列表和图层树。可搜索、筛选、排序、锁定、隐藏和编组元素。
• 中间：元素工具栏与游戏画布。这里显示项目的设计分辨率和实际布局。
• 右侧：属性检查器。用于编辑内容、位置、样式、绑定、动作和组件专属参数。

​

添加元素

工具栏里有三种常用放置方式：

• 单击一种元素，再在画布上单击确定位置；
• 从工具栏拖到画布上的目标位置；
• 双击元素，直接添加到画布中心。

完整的 27 种元素和适用场景见界面元素。

​

选择和整理图层

• 单击选择一个元素，按住 Shift 追加或范围选择。
• 在空白处拖动可以框选多个元素。
• 多选后可以统一移动、对齐、编组或批量修改属性。
• 支持复制、剪切和粘贴，也可以跨界面、跨本地扩展粘贴。
• 「锁定」防止误选和误移动，但不会影响玩家端显示。
• 「隐藏」会同时从设计画布和玩家端渲染中移除元素。

​

画布导航

设计视图支持独立缩放和平移，不会修改界面文档和玩家端布局：

• 双指滚动、按住 Space 后左键拖动，或用鼠标中键拖动来平移；
• 按住 ⌘/Ctrl 滚动来连续缩放；
• 空白处拖动框选，按住 Shift 追加选择。

放大后仍可以自由移动到画布外缘，不会被旧的平移边界截断。

​

旋转与镜像

旋转、水平镜像和垂直镜像现在适用于全部可视化元素，而不只图片：

• 拖动元素上方的旋转柄；
• 按住 R，再拖动任意角控制柄进入快捷旋转；
• 旋转时按住 Shift，以 15° 为单位吸附；
• 在右侧检查器精确输入角度，或切换左右、上下镜像；
• 多选后可以批量应用相同变换。

旋转后的元素仍可以使用控制柄缩放；按住 Shift 会保持原始宽高比。

​

定位与自适应

元素使用项目的设计画布坐标。右侧检查器可以直接输入位置和尺寸，也可以选择九宫格锚点，让元素相对画布的角、边或中心定位。 制作会随窗口缩放的界面时，先确定锚点，再微调坐标。标题按钮组通常锚定左下或右下；居中弹窗通常锚定中心；铺满画布的背景应与画布同尺寸。 页签元素有自己的内容区域。把元素拖入当前页签的内容区后，它会归属于该页；切换页签时，只显示当前页的内容。

​

保存、撤销与预览

编辑器默认开启自动保存，停止操作约一秒后写入文件。自动保存开启时不会显示手动保存按钮；关闭后，需要主动保存修改。 编辑过程中可以撤销和重做。Studio 还会记住最近打开的界面，重新进入项目设置后可以继续上次的工作。 预览视图使用真实 UI 运行时：

• 按钮会真正执行打开、关闭、存档、设置等动作；
• 变量文本和数据列表会读取当前运行数据；
• 入场、退场和页面动画会实际播放；
• 智能组件会使用游戏内的存档、历史记录和设置能力。

设计画布不会执行点击动作，避免编辑时误触。配置动作后请到预览视图验证。

​

界面状态与条件显示

界面文档可以定义不写入游戏存档的局部状态，例如当前页签、折叠状态或分步流程。元素可以根据界面状态、剧情变量、扩展数据和游戏设置决定是否显示，按钮也可以修改这些值。 状态和条件的完整配置方法见界面数据与动作。

​

接下来