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

基础元素

元素适合制作
文字标题、说明、数值和变量文本
图片背景、Logo、图标、立绘和装饰
按钮菜单入口、确认、关闭和自定义动作
矩形面板底色、遮罩、描边和分区
线条分隔线和装饰线
分组把多个元素作为一个整体移动、排序和复用
文字、图片和按钮都可以配置点击动作。图片还可以为普通、悬停等状态使用不同素材。

图片轮播

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

轮播条件方案

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

表单控件

元素适合制作
下拉跳过模式等枚举选项
开关全屏、对话时停止语音等布尔设置
滑块主音量、音乐、音效、语音、文字速度和自动播放速度
勾选框另一种布尔设置表现形式
输入框普通文本输入;默认不会自动写入游戏变量
页签在同一面板中组织多个内容页
控件可以只作为视觉和交互元素使用,也可以绑定引擎提供的设置项。绑定后,控件会读取当前值,并在玩家操作时自动写回。
如果需要把玩家填写的内容写入剧情变量,请使用「输入对话框」智能组件。普通输入框不会自行持久化数据。

智能组件

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

词条书

v1.9.0 新增
词条书把扩展存档中的词条数组显示为「分类列表 + 详情」。它支持:
  • 合并全局共享与当前存档的数据源;
  • 按分类生成页签;
  • 隐藏未解锁词条,或用「???」占位;
  • 显示未读标记并调用扩展方法标记已读;
  • 绑定玩家主题变量,让玩家切换界面配色。
官方用语辞典和角色档案图鉴使用同一个词条书组件。自定义扩展也可以按相同数据结构复用。

对话框专用元素

v1.9.0 新增
编辑对话框样式时,元素库会集中显示「角色名」「对白文本」「对白头像框」三种专用组件。它们在设计画布中使用预览数据,运行时自动读取当前对白。 角色名和正文可以各自设置字体、尺寸、颜色、阴影和动画;头像框只保存显示方式,头像图片来自角色对白头像配置。完整流程见个性化与项目设置 · 对话框样式
制作系统界面时,优先使用智能组件。它们已经处理了存档、翻页、历史语音等运行时细节,比用基础元素重新拼一套逻辑更稳妥。

通用属性

不同元素会显示不同的专属设置,但以下属性大多通用:

位置与尺寸

  • X、Y 坐标和宽高;
  • 九宫格锚点;
  • 图层顺序、锁定和隐藏;
  • 分组和页签归属。

文字

  • 字体、字号、颜色、字重;
  • 斜体、下划线、字距;
  • 水平与垂直对齐。

外观

  • 填充色、描边、圆角和透明度;
  • 背景模糊;
  • 图片素材和状态图片;
  • 旋转、水平镜像和垂直镜像;
  • 自定义 CSS。
自定义 CSS 可以写普通声明,也支持 &:hover& img@keyframes。它适合补充检查器里没有提供的细节;关键布局仍建议优先使用可视化属性,后续更容易维护。

元素引用名

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