
基础元素
| 元素 | 适合制作 |
|---|---|
| 文字 | 标题、说明、数值和变量文本 |
| 图片 | 背景、Logo、图标、立绘和装饰 |
| 按钮 | 菜单入口、确认、关闭和自定义动作 |
| 矩形 | 面板底色、遮罩、描边和分区 |
| 线条 | 分隔线和装饰线 |
| 分组 | 把多个元素作为一个整体移动、排序和复用 |
图片轮播
v1.9.0 新增
- 默认方案:添加多张图片组成播放列表,可调整顺序;少于两张时保持静态显示。
- 停留时间:每张图片的展示时长,默认 3 秒。
- 切换效果:「淡入淡出」(可调过渡时长)或「直接切换」。
- 循环播放:默认开启,播完最后一张从头继续。
轮播条件方案
轮播还支持按变量条件切换整组图片。在「条件方案」中添加方案,每个方案由一组条件(可读取界面状态或游戏变量,支持「全部满足 / 任一满足」)和一组图片组成:- 方案从上到下匹配,第一条命中的生效;都不命中时回退播放默认方案。
- 游戏运行时实时求值切换;编辑器画布按变量初始值预览。
- 典型用法:按好感度、章节进度切换标题画面的背景组图。
表单控件
| 元素 | 适合制作 |
|---|---|
| 下拉 | 跳过模式等枚举选项 |
| 开关 | 全屏、对话时停止语音等布尔设置 |
| 滑块 | 主音量、音乐、音效、语音、文字速度和自动播放速度 |
| 勾选框 | 另一种布尔设置表现形式 |
| 输入框 | 普通文本输入;默认不会自动写入游戏变量 |
| 页签 | 在同一面板中组织多个内容页 |
如果需要把玩家填写的内容写入剧情变量,请使用「输入对话框」智能组件。普通输入框不会自行持久化数据。
智能组件
| 元素 | 内置能力 |
|---|---|
| 存档格子 | 分页或滚动显示存档槽位,支持保存和读取模式 |
| 数据列表 | 把扩展存档、数据集合或扩展变量显示为网格、列表或图文列表 |
| 词条书 | 显示分类词条、未解锁占位、未读标记和详情,适合辞典与角色档案 |
| CG 鉴赏 | 显示已解锁 CG,并打开大图预览 |
| 音乐鉴赏 | 显示曲目列表,提供播放、暂停和切歌 |
| 片段鉴赏 | 显示已解锁剧情片段并启动回放 |
| 历史记录 | 显示对话历史,并支持语音重放 |
| 对话框 | 兼容旧版复合对话框配置;新样式优先使用拆分图层 |
| 角色名 | 显示当前对白角色名,供对话框样式独立排版 |
| 对白文本 | 显示当前对白正文,供对话框样式独立排版 |
| 对白头像框 | 按当前角色和表情显示头像,供对话框样式设置位置、裁切和边框 |
| 对话工具栏 | 跳过、自动、存读档、快存快读、历史、设置和隐藏对话 |
| 选项列表 | 接收当前分支 Block 的真实选项并返回选择结果 |
| 输入对话框 | 校验玩家输入并写入指定变量 |
| 消息框 | 提示或双按钮确认框,支持信息、成功、警告和危险四种消息语义 |
... 结尾,文本框宽度不足时也会自动显示省略号。「历史记录」会直接读取当前游戏的对话历史;三种鉴赏组件会读取默认鉴赏系统的解锁记录。
「选项列表」在设计画布中使用示例选项,可指定设计态选中项和确认反馈延迟;运行时会自动替换为当前剧情分支。它是自定义剧情选项界面的核心组件,不适合放进普通菜单中单独使用。
自定义智能组件内部模板
在设计画布中双击已有的智能组件,可以进入它的模板子页面。子页面会继续沿用「默认游戏壳」当前选择的主题,在不同内部模板之间切换时也不会回退到其他预设。除了词条书和数据列表,目前还可以设计以下内部模板:- 音乐鉴赏:曲目模板、播放器模板;播放器初始模板包含扫描线面板、播放状态、动态波形、当前曲目信息和切歌控制;
- 存档格子:已有存档模板、空存档模板、分页模板、滚动条模板;
- CG 鉴赏:CG 卡片模板、CG 大图模板、分页模板、滚动条模板;
- 片段鉴赏:片段卡片模板、分页模板、滚动条模板;
- 历史记录:历史条目模板;
- 对话工具栏:完整工具栏内容模板,可分别编辑每个按钮、图标、文字、分隔线和顶部装饰,并为按钮选择要执行的工具栏功能;
- 输入对话框:完整输入框内容模板,可分别编辑背景图、标题、说明、输入区、校验提示、字符计数和确认/取消按钮;
- 消息框:完整消息框内容模板,可分别编辑面板背景、语义标记、标题、消息内容、辅助说明、关闭按钮和确认/取消按钮;原版使用通用左对齐布局,春日书简保留居中的书页式布局。
CG 图片加载与大图兼容
CG 鉴赏会分别优化列表和大图:列表优先显示轻量缩略图;玩家准备打开条目时,引擎会提前加载并解码高清图。新打包的工程会在构建产物中为可识别的静态场景素材生成列表缩略图,不会改写项目素材、解锁记录或可视化界面文件。实时预览会尽量复用 Studio 已有的缩略图缓存;没有缓存、生成失败或遇到动画图片时,会直接回退原图。 选中「CG 鉴赏」,可在右侧 大图性能 → 渲染策略 中选择:| 策略 | 适合场景 | 行为 |
|---|---|---|
| 自动兼容(推荐) | 大多数新旧工程 | 安全时预解码大图;识别到自定义大图模板、依赖详情图片结构的 CSS 或动画素材时,自动保留原始图片实现 |
| 原始渲染 | 必须完整保持旧版图片 DOM 与地址的工程 | 列表和大图均使用原图,不启用自动缩略图替换或位图大图 |
| 强制位图加速 | 已确认大图均为静态图,且自定义样式不依赖原始图片 DOM | 强制预解码并按显示尺寸准备大图;可能使动画或依赖 img 的深度定制失效 |
[src] 选择器识别列表图片,自动模式会保留原始列表图片地址。
检查器会把上述选择保存到组件的 detailImageOptimization 属性,值分别为 auto、legacy 和 bitmap;通常不需要手工编辑 JSON。扩展或自定义数据源还可以为 CG 条目提供可选的 thumbnailImage:它只作为列表缩略图使用,大图仍读取 layers,没有图层快照时再读取 coverImage。不提供该字段也不会影响旧记录。
全量修改的边界
可视化界面中的“全量修改”包含:所有普通图层和分组子元素的位置、尺寸、内容、样式、动画、条件与点击动作;支持模板的智能组件内部图层;以及检查器中列出的组件布局、状态外观和交互反馈参数。主题预设只提供初始值,之后的修改会随当前界面保存,不需要编辑 JSON 或源码。 运行时数据和系统能力不属于静态外观。例如真实存档、对话历史、剧情选项、玩家输入、设置值、解锁记录,以及存读档、播放、确认和变量写入,仍由引擎或扩展提供。可视化界面负责决定这些内容显示在哪里、以什么样式和反馈呈现,不会把运行时数据改成固定文案。 存档格子的「已有存档模板」和「空存档模板」彼此独立。运行时会按槽位是否存在存档选择其中一份,不会把空档装饰叠加到已有存档模板上;两份模板都可以绑定槽位编号,已有存档模板还可以绑定截图、存档时间、游戏时长和存档文本。 存档格子、数据列表、词条书、CG 鉴赏和片段鉴赏可以在属性检查器中开启「滚动模式」。关闭时按列数与行数(词条书按每页行数)分页并显示分页模板;开启后会隐藏分页器,一次生成全部内容并在组件内容区纵向滚动,同时使用各自的滚动条模板。 滚动条模板初始包含「滚动条轨道」和「滚动滑块」。模板画布宽度决定组件为滚动条预留的宽度,轨道的位置和高度决定滑块的移动范围;滑块的宽度、最小高度、圆角、描边和颜色可以自由设计。运行时会根据内容长度自动调整滑块高度,并同步滚轮、轨道点击、滑块拖动和键盘滚动。 模板只决定外观,智能组件继续接管播放与切歌、翻页、CG 大图关闭、剧情片段重播、历史语音重播、存读档、工具栏动作、玩家输入的聚焦、校验和变量写入,以及消息框的提示/确认模式、Esc 关闭和确认结果。工具栏模板按钮使用右侧「工具栏按钮 → 绑定功能」决定运行时行为,不使用普通「点击时」动作;新增或复制按钮后也可以重新选择功能,选择「仅作装饰」则保持不可点击。其他带动作的模板按钮仍按模板角色识别,可以自由调整外观和位置;如果删除按钮,对应操作入口也会消失。输入控件本身由引擎投影到「输入控件」模板元素的位置,不需要另配点击事件。 音乐鉴赏支持「列表 + 播放器」和「播放器卡片网格」两种布局。卡片网格可以设置列数、每页行数和卡片间距;每张卡片仍由引擎接管播放、暂停和动态波形,超过单页容量时使用可编辑的分页模板。切回列表布局后,播放器模板中的上一首、播放/暂停、下一首和波形元素仍然保留。 消息框的内容模板同时覆盖 alert 单按钮提示和 confirm 双按钮确认。alert 模式会隐藏取消按钮;confirm 模式会保留确认、取消和关闭入口。运行时没有传入辅助说明时,会隐藏辅助说明图层,不会把设计画布中的示例说明带进存档覆盖等系统确认框。 输入对话框和消息框都可以在属性检查器中设置「面板背景图」。进入内容模板后,可以继续移动或替换对应的背景图层。没有进入过模板子页面的旧界面继续使用原有内置外观,不需要迁移。首次进入时,Studio 会按当前默认外观创建初始模板。
选项按钮模板
新版选项列表把每个运行时选项拆成四个重复生成的模板图层:| 模板 | 可独立设置 |
|---|---|
| 选项框体 | 底色、背景图片、描边、圆角、背景模糊、透明度和键盘焦点强调色 |
| 选项指示器 | 颜色、圆角、发光范围,以及各交互状态的透明度 |
| 选项序号 | 数字或字母格式、起始值、前后缀、字体、对齐和各状态颜色 |
| 选项正文 | 字体、字号、字重、字距、行高、对齐和各状态颜色 |
数据列表
数据列表会把绑定的数据集合或扩展变量重复生成可分页或滚动的条目。检查器中的「显示模式」可以选择「列表模式」「网格模式」或「图文列表模式」。 在设计画布中双击数据列表,会先进入当前显示模式对应的模板。左侧「自定义项」可以在五份模板之间切换:- 列表项模板:适合横向信息行;
- 网格项模板:适合带图片的卡片墙;
- 图文列表项模板:适合左图右文的信息列表;
- 分页模板:三种显示模式共用,设计上一页按钮、页码和下一页按钮;
- 滚动条模板:三种显示模式共用,设计滚动模式下的轨道和滑块。
没有进入过模板子页面的旧数据列表继续使用原有外观,不需要迁移。
词条书
v1.9.0 新增
- 合并全局共享与当前存档的数据源;
- 直接选择已启用扩展声明的数据集合;
- 按分类生成页签;
- 隐藏未解锁词条,或用「???」占位;
- 显示未读标记并调用扩展方法标记已读;
- 绑定玩家主题变量,让玩家切换界面配色。
自定义词条书内部模板
在设计画布中双击已有的词条书,可以进入智能组件子页面。左侧「自定义项」提供五份可切换模板:- 分类页签模板:重复生成「全部」和每个分类页签,初始包含页签背景与分类名称;
- 词条项模板:重复生成左侧列表项,初始包含条目背景、选中标记、词条标题、词条副标题、未解锁标记和未读标记;
- 词条详情模板:显示当前选中词条的详情,初始包含图片、分类、标题、副标题、强调线和正文;图片没有绑定内容时会自动隐藏;
- 分页模板:显示左侧词条列表的分页控件,初始包含上一页按钮、页码和下一页按钮;
- 滚动条模板:显示滚动模式下左侧词条列表的滚动条,初始包含轨道和滑块。
profile.faction 这样的嵌套字段路径。
分类页签模板中的文本支持:
{{category.label}}:当前分类名称,「全部」页签使用词条书设置的全部分类文案;{{category.index}}:从 1 开始的页签序号。
{{item.title}}:标题;{{item.subtitle}}:副标题;{{item.category}}:分类;{{item.body}}:正文;{{item.image}}:图片路径;{{item.index}}:从 1 开始的当前序号。
{{item.字段名}},嵌套内容使用点号路径,例如 {{item.profile.faction}}。字段可以从「内容来源」选择;文本中也可以把占位符与固定文字组合使用。未解锁词条不会向模板暴露原始子字段,仍按词条书的占位标题与占位说明显示。
分页模板中的文本支持 {{pagination.current}}(当前页码)和 {{pagination.total}}(总页数)。设计画布会用 1 / 3 预览分页效果,保存时仍保留原始占位符;上一页和下一页按钮的翻页行为、首尾页禁用状态仍由词条书自动控制。开启词条书的「滚动模式」后,左侧会显示全部词条并纵向滚动,分页模板不再显示,改用滚动条模板。
运行时会按高级数据集合中的记录与分类投影这些模板。初始模板里的选中标记、未解锁标记和未读标记仍由词条书状态自动控制,选中态、分类选中态和强调标记会跟随词条书的强调色。模板子页面会自动保存;切换模板时当前修改会保留,点击顶部返回按钮后可继续编辑父界面。分页模板只改变外观,翻页、分类切换、玩家主题切换、点击词条、标记已读和详情主操作仍由词条书组件接管。
没有进入过模板子页面的旧词条书继续使用原有外观,不需要迁移。
对话框专用元素
v1.9.0 新增
通用属性
不同元素会显示不同的专属设置,但以下属性大多通用:位置与尺寸
- X、Y 坐标和宽高;
- 九宫格锚点;
- 图层顺序、锁定和隐藏;
- 分组和页签归属。
文字
- 字体、字号、颜色、字重;
- 斜体、下划线、字距;
- 水平与垂直对齐。
外观
- 填充色、描边、圆角和透明度;
- 背景模糊;
- 图片素材和状态图片;
- 旋转、水平镜像和垂直镜像;
- 自定义 CSS。
&:hover、& img 和 @keyframes。它适合补充检查器里没有提供的细节;关键布局仍建议优先使用可视化属性,后续更容易维护。
元素引用名
检查器中的「引用名」供扩展程序查找元素。它在同一个界面里必须唯一,例如:ctx.visualUI 获取它。只有纯可视化界面时,可以不填写。
下一步可以继续了解数据与动作,或者直接回到可视化界面编辑器开始制作。
加载进度与高级外观
加载进度组件及文字渐变、纹理、双层描边和多层阴影。
动态文案与按钮描边
v2.5.0 新增