可视化界面编辑器

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

​

从哪里进入

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

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

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

​

四个视图

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

​

HTML 与稳定 Selector

在「源码」视图顶部切换到 HTML，可以查看当前设计画布提交给浏览器的真实 DOM 快照。这里提供：

• 复制完整 HTML，检查实际元素层级、属性和运行时结构；
• 回到设计视图选中元素后，查看并复制该元素的 CSS Selector；
• 在 HTML 中定位所选元素对应的节点。

每个元素都有由 Studio 维护的稳定 Selector 标识。重命名元素、移动位置、调整图层或更换父级时，这个标识不会改变，适合扩展程序、自动化测试和自定义 CSS 精确定位。复制、创建副本或新建元素时会生成新的标识，避免两个元素共用 Selector。

​

认识设计视图

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

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

画布中双击支持自定义内部外观的智能组件，可以进入它的模板子页面。目前包括词条书、数据列表、音乐鉴赏、存档格子、CG 鉴赏、片段鉴赏、历史记录、对话工具栏、输入对话框和消息框。左侧「自定义项」用于切换该组件的条目、详情、播放器、分页、滚动条或内容模板；选中文本或图片后，可在右侧「内容来源」中选择组件内置字段，支持数据源的组件还会列出已绑定数据集合或扩展变量的子字段。设计画布使用示例内容预览，保存时仍保留字段占位符。点击顶部返回按钮即可回到父界面。 模板决定子元素的排版和外观，翻页、播放、存读档、剧情重播、语音重播、工具栏动作、输入变量写入和消息框确认／取消结果等行为仍由智能组件接管。工具栏内容模板中的按钮可在右侧「绑定功能」选择跳过、自动、存读档等功能；选择「仅作装饰」时按钮不会响应点击。删除带动作的模板按钮会同时移除对应的玩家操作入口。 带分页器的存档格子、数据列表、词条书、CG 鉴赏和片段鉴赏还提供「滚动模式」开关。关闭时使用分页模板；开启后隐藏分页器，在组件内容区纵向滚动，并使用滚动条模板定义轨道与滑块外观。 S08 · 对话框设计画布与空白区域穿透

​

添加元素

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

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

也可以把本地图片直接拖到设计画布。Studio 会打开与资源总览相同的导入窗口，并默认选择「界面」分类；确认导入后，图片会直接添加到释放位置。一次拖入多张图片时，它们会依次错开放置。 完整的 27 种元素和适用场景见界面元素。

​

选择和整理图层

• 单击选择一个元素，按住 Shift 追加或范围选择。
• 在空白处拖动可以框选多个元素。
• 多选后可以统一移动、对齐、编组或批量修改属性。
• 支持复制、剪切和粘贴，也可以跨界面、跨本地扩展粘贴。
• 「锁定」防止误选和误移动，但不会影响玩家端显示。
• 「隐藏」会同时从设计画布和玩家端渲染中移除元素。
• 默认游戏壳的主题统一从扩展树父节点末尾的主题标签切换。对话框、标题、存读档、设置、历史、鉴赏、工具栏、剧情选项、输入框或消息框不再各自保存主题选择。

单击主题标签会打开统一选择窗口，其中的经典、V3 彩色 A、琥珀织纹、春日书简、放课后纪事、电影居中和握草·原都是完整、同层级的游戏壳主题。当前子界面只显示继承状态；需要更换时回到「默认游戏壳」父节点，再通过同一标签打开选择窗口并使用「应用到全部界面」。旧项目的当前外观会归入「我的预设」，打开项目不会自动改盘。 七彩小标识表示「官方精选主题」：这类主题包含官方深度定制的预制布局、组件和素材。春日书简会显示该标识。

​

画布导航

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

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

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

​

旋转与镜像

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

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

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

​

定位与自适应

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

​

保存、撤销与预览

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

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

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

​

界面状态与条件显示

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

​

接下来

​

设计流程

先在默认游戏壳父节点确定整套主题，再进入具体页面。可在画布选择当前工程场景作为参考背景，核对对话框与舞台的对比；参考背景不等于往 UI 中插入一张背景图。 双击数据列表、词条书、存档格子、音乐鉴赏、工具栏等支持模板的智能组件，进入条目、详情、分页或内容模板，修改后通过顶部导航返回父页面。组件仍负责翻页、播放和存读档等行为，不需要重新实现逻辑。 文字填充、双层描边、多层阴影和状态覆盖见高级文字外观。复杂组件的字段和滚动模式见元素说明。

​

常驻界面的空白区域穿透

取消元素选择，在「界面属性」开启「空白区域穿透」。配合显示界面中的「显示后继续剧情」，按钮仍可操作，透明空白处的点击会传到下层对白或界面。 「显示后等待关闭」仍按模态方式阻止操作底层游戏，穿透不会取消这个等待。分别测试按钮和空白区域，避免装饰层挡住对白推进。