可视化界面编辑器提供 27 种面向创作者的元素。基础元素负责排版,控件负责玩家输入,智能组件直接连接引擎能力。
LetsGal Studio 可视化界面元素库

基础元素

元素适合制作
文字标题、说明、数值和变量文本
图片背景、Logo、图标、立绘和装饰
按钮菜单入口、确认、关闭和自定义动作
矩形面板底色、遮罩、描边和分区
线条分隔线和装饰线
分组把多个元素作为一个整体移动、排序和复用
选中分组后,图层树会展开其子元素。组内元素仍可在画布中直接点选、拖动和缩放,也可在右侧属性检查器中单独修改内容、样式、位置与尺寸;位置以分组左上角为基准。 文字、图片、按钮和分组都可以配置点击动作。分组选择「无动作」时不会触发自身动作,也不会阻挡内部按钮;分组有动作时,点击内部按钮仍只执行按钮自己的动作。需要菜单选中反馈时,可为多个分组填写同一个「选择组」,并分别设置默认选中项、按下反馈时长和动作延迟。图片还可以为普通、悬停等状态使用不同素材。

图片轮播

v1.9.0 新增
图片元素开启「轮播」开关后,可以循环播放多张图片,适合标题画面背景、展示位轮换等场景:
  • 默认方案:添加多张图片组成播放列表,可调整顺序;少于两张时保持静态显示。
  • 停留时间:每张图片的展示时长,默认 3 秒。
  • 切换效果:「淡入淡出」(可调过渡时长)或「直接切换」。
  • 循环播放:默认开启,播完最后一张从头继续。

轮播条件方案

轮播还支持按变量条件切换整组图片。在「条件方案」中添加方案,每个方案由一组条件(可读取界面状态或游戏变量,支持「全部满足 / 任一满足」)和一组图片组成:
  • 方案从上到下匹配,第一条命中的生效;都不命中时回退播放默认方案。
  • 游戏运行时实时求值切换;编辑器画布按变量初始值预览。
  • 典型用法:按好感度、章节进度切换标题画面的背景组图。

表单控件

元素适合制作
下拉跳过模式等枚举选项
开关全屏、对话时停止语音等布尔设置
滑块主音量、音乐、音效、语音、文字速度和自动播放速度
勾选框另一种布尔设置表现形式
输入框普通文本输入;默认不会自动写入游戏变量
页签在同一面板中组织多个内容页
控件可以只作为视觉和交互元素使用,也可以绑定引擎提供的设置项。绑定后,控件会读取当前值,并在玩家操作时自动写回。 下拉控件可分别设置框体底色、描边和圆角,以及展开菜单的间距、底色、文字、描边、圆角、选项高度、选中项/悬停项底色和阴影颜色。 滑块可以设置轨道高度与圆角、把手尺寸、底色、外环和阴影,也可以设置数值后缀、把 0–100 映射为「慢、正常、快」等文字,并调整数值位置、间距、宽度、字体和字号比例。 开关未使用状态图片时,可以分别设置开态/关态轨道和把手的颜色、尺寸、边距、描边、圆角与切换时长。 页签可以设置页签栏高度、激活字重、三态文字颜色、悬停偏移、容器表面,以及激活指示器和花饰的填充、尺寸、位置与过渡时长。
如果需要把玩家填写的内容写入剧情变量,请使用「输入对话框」智能组件。普通输入框不会自行持久化数据。

智能组件

元素内置能力
存档格子分页或滚动显示存档槽位,支持保存和读取模式
数据列表把扩展存档、数据集合或扩展变量显示为网格、列表或图文列表
词条书显示分类词条、未解锁占位、未读标记和详情,适合辞典与角色档案
CG 鉴赏显示已解锁 CG,并打开大图预览
音乐鉴赏显示曲目列表,提供播放、暂停和切歌
片段鉴赏显示已解锁剧情片段并启动回放
历史记录显示对话历史,并支持语音重放
对话框兼容旧版复合对话框配置;新样式优先使用拆分图层
角色名显示当前对白角色名,供对话框样式独立排版
对白文本显示当前对白正文,供对话框样式独立排版
对白头像框按当前角色和表情显示头像,供对话框样式设置位置、裁切和边框
对话工具栏跳过、自动、存读档、快存快读、历史、设置和隐藏对话
选项列表接收当前分支 Block 的真实选项并返回选择结果
输入对话框校验玩家输入并写入指定变量
消息框提示或双按钮确认框,支持信息、成功、警告和危险四种消息语义
智能组件的行为由引擎负责,创作者主要配置外观、排版和展示参数。例如「存档格子」可以设置列数、行数、间距、总槽位数、是否显示时间和摘要字数上限;超过上限的摘要会以 ... 结尾,文本框宽度不足时也会自动显示省略号。「历史记录」会直接读取当前游戏的对话历史;三种鉴赏组件会读取默认鉴赏系统的解锁记录。 「选项列表」在设计画布中使用示例选项,可指定设计态选中项和确认反馈延迟;运行时会自动替换为当前剧情分支。它是自定义剧情选项界面的核心组件,不适合放进普通菜单中单独使用。

自定义智能组件内部模板

在设计画布中双击已有的智能组件,可以进入它的模板子页面。子页面会继续沿用「默认游戏壳」当前选择的主题,在不同内部模板之间切换时也不会回退到其他预设。除了词条书和数据列表,目前还可以设计以下内部模板:
  • 音乐鉴赏:曲目模板、播放器模板;播放器初始模板包含扫描线面板、播放状态、动态波形、当前曲目信息和切歌控制;
  • 存档格子:已有存档模板、空存档模板、分页模板、滚动条模板;
  • CG 鉴赏:CG 卡片模板、CG 大图模板、分页模板、滚动条模板;
  • 片段鉴赏:片段卡片模板、分页模板、滚动条模板;
  • 历史记录:历史条目模板;
  • 对话工具栏:完整工具栏内容模板,可分别编辑每个按钮、图标、文字、分隔线和顶部装饰,并为按钮选择要执行的工具栏功能;
  • 输入对话框:完整输入框内容模板,可分别编辑背景图、标题、说明、输入区、校验提示、字符计数和确认/取消按钮;
  • 消息框:完整消息框内容模板,可分别编辑面板背景、语义标记、标题、消息内容、辅助说明、关闭按钮和确认/取消按钮;原版使用通用左对齐布局,春日书简保留居中的书页式布局。
模板图层可以像普通基础元素一样移动、缩放、改色、替换图片或增删。选中文本或图片后,右侧「内容来源」会列出当前模板可用的字段,例如曲目名称和艺术家、存档截图、存档时间和游戏时长、鉴赏标题和图片,以及历史记录的说话人和对话内容。设计画布会显示示例值,运行时再按真实曲目、存档、解锁记录或历史内容逐条投影。CG 鉴赏宿主还可以直接调整卡片上浮、缩放、描边、阴影、图片滤镜和各段过渡时长。

CG 图片加载与大图兼容

CG 鉴赏会分别优化列表和大图:列表优先显示轻量缩略图;玩家准备打开条目时,引擎会提前加载并解码高清图。新打包的工程会在构建产物中为可识别的静态场景素材生成列表缩略图,不会改写项目素材、解锁记录或可视化界面文件。实时预览会尽量复用 Studio 已有的缩略图缓存;没有缓存、生成失败或遇到动画图片时,会直接回退原图。 选中「CG 鉴赏」,可在右侧 大图性能 → 渲染策略 中选择:
策略适合场景行为
自动兼容(推荐)大多数新旧工程安全时预解码大图;识别到自定义大图模板、依赖详情图片结构的 CSS 或动画素材时,自动保留原始图片实现
原始渲染必须完整保持旧版图片 DOM 与地址的工程列表和大图均使用原图,不启用自动缩略图替换或位图大图
强制位图加速已确认大图均为静态图,且自定义样式不依赖原始图片 DOM强制预解码并按显示尺寸准备大图;可能使动画或依赖 img 的深度定制失效
只修改卡片、分页器、滚动条或网格布局不会关闭与大图无关的优化。若自定义 CSS 使用 [src] 选择器识别列表图片,自动模式会保留原始列表图片地址。 检查器会把上述选择保存到组件的 detailImageOptimization 属性,值分别为 auto、legacy 和 bitmap;通常不需要手工编辑 JSON。扩展或自定义数据源还可以为 CG 条目提供可选的 thumbnailImage:它只作为列表缩略图使用,大图仍读取 layers,没有图层快照时再读取 coverImage。不提供该字段也不会影响旧记录。
不要仅为了追求速度对未知素材选择「强制位图加速」。GIF、APNG、动态 WebP,以及依赖大图 img、canvas、子元素层级或详情选择器的自定义 CSS,应继续使用「自动兼容」或「原始渲染」。

全量修改的边界

可视化界面中的“全量修改”包含:所有普通图层和分组子元素的位置、尺寸、内容、样式、动画、条件与点击动作;支持模板的智能组件内部图层;以及检查器中列出的组件布局、状态外观和交互反馈参数。主题预设只提供初始值,之后的修改会随当前界面保存,不需要编辑 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。
自定义 CSS 可以写普通声明,也支持 &:hover、& img 和 @keyframes。它适合补充检查器里没有提供的细节;关键布局仍建议优先使用可视化属性,后续更容易维护。

元素引用名

检查器中的「引用名」供扩展程序查找元素。它在同一个界面里必须唯一,例如:
title
close-button
player-name
没有填写引用名的元素仍会正常显示,只是程序无法通过 ctx.visualUI 获取它。只有纯可视化界面时,可以不填写。 下一步可以继续了解数据与动作,或者直接回到可视化界面编辑器开始制作。

加载进度与高级外观

加载进度组件及文字渐变、纹理、双层描边和多层阴影。
「加载进度」用于加载界面,支持进度颜色、轨道、文字和预览百分比。运行时百分比来自当前资源准备窗口,不是任意倒计时。配置见加载策略。 文字元素及支持文字的智能组件使用高级文字外观。普通、悬停等状态可以沿用默认或独立覆盖;段落未读与已读样式分别管理。 滑块使用图片作为填充时,可选择「拉伸铺满」或「按比例裁切显示」。分别检查 0%、中间值与最大值,确认填充方向和图案没有被误解为把手。 存档格子、数据列表、词条书、CG 鉴赏和片段鉴赏支持滚动模式与滚动条模板。分页模板和滚动条模板对应不同浏览方式,切换后要检查首尾项目、长列表和选中态。

动态文案与按钮描边

v2.5.0 新增
消息框、系统确认和音乐组件可以使用运行时动态文案。进入组件或内容模板,在检查器选择对应文字角色与内容来源,再设置字段缺失、未选择曲目或播放状态下的替代文案。曲名、作者和说明来自实际曲目数据;设计示例文字不代表运行时会固定显示这段内容。 按钮文字支持自定义描边,修改后分别检查常态、悬停、焦点与禁用状态,以及不同背景上的可读性。