1. 基本语法结构
立绘指令采用方括号包裹的形式:[修饰词 角色ID]。多个修饰词用空格分隔,多立绘用逗号分隔。
1.1 角色名称标识符
为了实现基于角色的自动替换与属性继承,你可以在指令开头添加一个自定义的“角色名称标识符”。
- 严格语法:标识符必须紧挨着左方括号
[,格式为[标识符 修饰词 资源ID]。 - 互斥显示:如果屏幕上已存在同名标识符,新指令会自动替换旧立绘。
- 属性继承:若新指令未指定位置或缩放,新立绘将自动继承旧立绘当前的屏幕状态。
// 基础显示:在左侧显示“角色A” chars: "[角色A 左 lh1]" // 属性继承:替换为 lh4,但自动保持在“左侧”位置 chars: "[角色A lh4]" // 显式覆盖:移动到右侧并放大 10% chars: "[角色A 右 10% lh3]" // 多角色并存:不同标识符互不干扰,可同时显示 chars: "[角色A 左 lh1],[角色B 右 lh2]" // 连续动作:标识符支持逗号分隔的状态序列 chars: "[角色A 左,中,右 lh1]" // 通过名称消失:精准移除指定标识符对应的立绘 chars: "[消失 角色A]"
chars: "[中 lh01]" // 基础用法 chars: "[lh01]" // 简化写法 - 等同于 [中 lh01] chars: "[左 lh01],[右 lh02]" // 同时显示两个立绘 chars: "[左,中,右 lh01]" // 连续动作:依次经过左、中、右
2. 中英文别名支持
所有修饰词均支持中英文别名,可在同一指令中自由混合使用。
// 纯中文 chars: "[左 下 前 lh01]" // 纯英文 chars: "[left down front lh01]" // 中英文混合 chars: "[中 front lh01]" chars: "[left 下 lh02]"
3. 水平位置控制
| 中文 | 英文 | 屏幕百分比 (Left) | 说明 |
|---|---|---|---|
| 左左 | leftl | 15% | 最左侧 |
| 左 | left | 25% | 偏左侧 |
| 左右 | leftr | 35% | 微偏左 |
| 中 | middle / center | 50% | 屏幕正中央(默认值) |
| 右左 | rightl | 65% | 微偏右 |
| 右 | right | 75% | 偏右侧 |
| 右右 | rightr | 85% | 最右侧 |
4. 垂直位置控制
通过关键词控制立绘的垂直偏移(Bottom)。不指定时默认为 0(底部对齐)。
4.1 向下偏移
| 中文 | 英文 | 偏移量 (Bottom) | 说明 |
|---|---|---|---|
| 下 | down | -25% | 向下轻微偏移 |
| 中下 | downm | -50% | 向下中等偏移 |
| 下下 | downd / bottom | -65% | 向下大幅偏移 |
4.2 向上偏移
| 中文 | 英文 | 偏移量 (Bottom) | 说明 |
|---|---|---|---|
| 上 | up | 25% | 向上轻微偏移 |
| 中上 | upm | 50% | 向上中等偏移 |
| 上上 | upu / top | 65% | 向上大幅偏移 |
// 向下偏移 chars: "[中 下 lh01]" // bottom: -25% chars: "[middle downm lh01]" // bottom: -50% // 向上偏移 chars: "[中 上 lh01]" // bottom: 25% chars: "[中 up lh01]" // bottom: 25%(英文) chars: "[中 中上 lh01]" // bottom: 50% chars: "[中 top lh01]" // bottom: 65%(英文别名)
5. 精确坐标控制
使用 x: 和 y: 前缀指定精确百分比坐标。
- X轴:以屏幕中心为 0%,负值向左,正值向右
- Y轴:以屏幕底部为 0%,负值向下,正值向上
- 优先级:精确坐标 > 文字指令
// 基础用法 chars: "[x:10% y:-5% lh01]" // 向右10%,向下5% chars: "[x:-20% y:15% lh02]" // 向左20%,向上15% // 仅指定一个轴 chars: "[x:30% lh01]" // X轴精确,Y轴默认 chars: "[y:10% lh01]" // Y轴精确,X轴居中 // 与其他修饰词组合 chars: "[x:15% y:-10% front 10% lh01]" // 精确坐标 + 层级 + 缩放 chars: "[瞬 x:-25% y:20% lh01]" // 瞬移 + 精确坐标 // 精确坐标优先于文字指令 chars: "[x:10% 左 lh01]" // 使用 x:10%,忽略“左”
6. 层级控制
调整立绘的堆叠顺序(zIndex)。基础层级为 10。
| 中文 | 英文 | zIndex 值 | 说明 |
|---|---|---|---|
| 前 | front | 11 | 顶层(覆盖在其他立绘之上) |
| 后 | back | 9 | 底层(被其他立绘遮挡) |
// lh01 在前,lh02 在后 chars: "[中 前 lh01],[中 后 lh02]"
7. 缩放比例
使用带有 % 符号的数字调整大小。计算规则:最终缩放 = 1 + (数值 / 100)。
- 正值:放大。例如
10%表示放大到 110% - 负值:缩小。例如
-20%表示缩小到 80% - 零值:
0%表示保持 100% 原始大小
chars: "[中 15% lh01]" // 放大到 115% chars: "[中 -20% lh01]" // 缩小到 80% chars: "[中 0% lh01]" // 保持 100%
8. 渐入与渐出
通过渐入/渐出指令,可以让立绘以平滑的淡入淡出效果出现或消失。
| 中文 | 英文 | 效果 |
|---|---|---|
| 渐入 | fadeIn | 立绘从透明平滑过渡到不透明(约0.8秒) |
| 渐出 | fadeOut | 立绘从不透明平滑过渡到透明并移除(约0.8秒) |
// 渐入示例:支持与其他修饰词组合 chars: "[中 渐入 lh01]" // 在中间位置渐入 chars: "[左 fadeIn lh02]" // 在左侧渐入 // 渐出示例:建议单独使用,不要添加位置指令 chars: "[渐出 lh01]" // 正确用法:直接渐出 chars: "[fadeOut lh02]" // 英文写法 // 注意:不要在渐出时添加位置指令,否则会先闪到目标位置再消失 chars: "[左 渐出 lh01]" // 不推荐:会先移动到左侧再渐出 // 批量渐出所有立绘 chars: "[渐出 all]" // 所有立绘同时渐出 chars: "[fadeOut 全部]" // 中英文混合
使用
[渐出] 或 [fadeOut] 时,请保持指令纯净,不要添加任何位置或层级修饰词。
如果写成 [左 渐出 lh1],立绘会先瞬间移动到左侧,然后再执行渐出动画。
除非你确实需要这种“先移动再消失”的效果,否则请只使用 [渐出 lh1]。
9. 动画控制
瞬 指令禁用动画。
| 中文 | 英文 | 效果 |
|---|---|---|
| 瞬 | moment / instant | 禁用过渡动画,立绘立即切换 |
chars: "[瞬 左 lh01]" // 瞬间移动,无动画 chars: "[instant right lh01]" // 英文写法
10. 动作指令
动作指令为立绘提供丰富的动态效果。使用动作指令时,瞬/instant 会被自动忽略。
10.1 动作指令列表
| 中文 | 英文 | 效果说明 |
|---|---|---|
| 后退 | retreat | Y轴向上+10%,缩放-10%,层级强制变为"后"(zIndex=9) |
| 前进 | forward | Y轴向下-10%,缩放+10%(上限2.0),层级强制变为"前"(zIndex=11) |
| 吓一跳 | scare | 先放大7%再缩小7%,重复2次,总时长约1秒 |
| 发抖 | shake | X轴左右偏移±2%,重复3次,总时长约480ms |
| 持续发抖 | cshake | 持续左右抖动,需手动停止 |
| 结束发抖 | sshake | 停止持续发抖,恢复原位 |
| 点头 | nod | 执行一次"上移2% → 下移4% → 回归原位"序列,总时长约450ms |
10.2 动作指令示例
// 后退效果 chars: "[中 retreat lh01]" // Y轴向上+10%,缩小10%,层级变后 chars: "[中 后退 lh01]" // 中文等价 // 前进效果 chars: "[中 forward lh01]" // Y轴向下-10%,放大10%,层级变前 chars: "[中 前进 lh01]" // 中文等价 // 吓一跳 chars: "[中 scare lh01]" // 放大7%再缩小7%,重复2次 chars: "[中 吓一跳 lh01]" // 中文等价 // 发抖 chars: "[中 shake lh01]" // 左右抖动3次 chars: "[中 发抖 lh01]" // 中文等价 // 持续发抖与停止 chars: "[中 cshake lh01]" // 开始持续发抖 chars: "[sshake lh01]" // 停止发抖 chars: "[中 持续发抖 lh01]" // 中文开始 chars: "[结束发抖 lh01]" // 中文停止 // 点头效果 chars: "[中 nod lh01]" // 执行一次点头动画 chars: "[中 点头 lh01]" // 中文等价
10.3 动作指令优先级规则
- 屏蔽瞬移:
[瞬 retreat lh01]中 '瞬' 被忽略,后退动画正常播放 - 多动作取第一个:
[后退 吓一跳 lh01]只执行'后退',忽略'吓一跳' - 与其他修饰词组合:
[左 retreat lh01](左侧位置 + 后退效果)
10.4 后退 vs 前进对比
| 属性 | 后退 (retreat) | 前进 (forward) |
|---|---|---|
| Y轴 | +10% (向上) | -10% (向下) |
| 缩放 | -0.1 (缩小) | +0.1 (放大) |
| 层级 | 强制变后 (9) | 强制变前 (11) |
11. 连续动作指令
允许在一个指令中定义一系列按顺序执行的状态变化,使用逗号 , 作为分隔符。
11.1 基础语法与统一化状态帧
每个逗号分隔的片段都是一个完整的、独立的立绘状态帧。片段内部依然使用空格分隔不同属性。
// 基础连续移动 chars: "[左,中,右 lh01]" // 多属性组合:每个片段内部使用空格分隔不同属性 chars: "[左 下,中 上,右 中下 lh01]"
11.2 属性继承与覆盖
引擎在处理每一帧时,会基于立绘的当前状态应用该帧指定的所有修饰词。未在该帧中指定的属性将保持上一帧的状态。
// 示例解析:[左 下,右 上 后 瞬,中 y:+10% 10% lh01] // Step 0: "左 下" -> 移动到左侧并向下偏移。 // Step 1: "右 上 后 瞬" -> 瞬间移动到右侧、向上偏移并置于底层。 // Step 2: "中 y:+10% 10%" -> 平滑移动到居中,Y轴+10%,缩放110%(层级保持“后”)。 chars: "[左 下,右 上 后 瞬,中 y:+10% 10% lh01]"
11.3 动画与瞬移
默认情况下,每个片段之间的切换会保留平滑过渡动画(0.5s)。可以通过以下方式实现局部瞬间切换:
1. 独立标记:
[左,瞬,右 lh01]。从“左”到“右”是瞬移。2. 片段内标记:
[左,右 上 后 瞬,中 lh01]。立绘会瞬间移动到“右侧、上方、底层”,并在此状态停留约 0.5 秒,然后再平滑移动到“中间”。3. 核心原则:
瞬 仅禁用 CSS 过渡动画,不跳过该状态的展示时间。
// 混合瞬移:左->瞬间右->平滑中->瞬间左左 chars: "[左,瞬,右,中,瞬,左左 lh01]" // 片段内瞬移:瞬间切换到右侧上方底层 chars: "[左,右 上 后 瞬,中 lh01]" // 精确坐标混合 chars: "[x:10%,左,x:-10% lh01]"
11.4 中断处理
如果用户在连续动画执行过程中点击鼠标(推进剧情),引擎会立即停止当前未完成的中间动画,并将立绘直接跳转到指令序列中最后一个片段所定义的状态。
11.5 复杂组合与属性继承
连续动作指令支持与层级、缩放、动作指令等所有修饰词的组合。每个逗号分隔的片段都是一个完整的立绘状态描述。
1. 完整状态帧:每个片段内部使用空格分隔不同属性(如
"左 前")。2. 属性继承:如果某一步骤只指定了部分属性,未指定的属性将保持上一步的状态。
// 多属性同时变化 chars: "[左 下,中 上,右 中下 lh01]" // 属性继承示例:Step 1 只改变了位置,层级和缩放保持 Step 0 的状态 chars: "[左 前 10%,右 lh01]" // Step 0: 左侧 + 顶层 + 放大10% // Step 1: 右侧 + 顶层(继承) + 放大10%(继承) // 带动作指令 chars: "[中 retreat,中 forward lh01]"
12. 互斥处理规则
对于同一类型的属性,如果出现了多个同类型关键词,默认执行第一个,忽略后续的同类关键词。
// 只取第一个水平位置 "左",忽略后面的 "right" chars: "[左 right lh01]" // 结果:left = 25% // 只取第一个垂直位置 "下",忽略后面的 "downm" chars: "[下 downm lh01]" // 结果:bottom = -25% // 复杂冲突:每类取第一个 chars: "[left right 下 downm front back 10% lh01]" // 结果:left=25%(取left), bottom=-25%(取下), zIndex=11(取front), scale=110%
注意:不同类型的关键词不冲突,可以同时生效。
13. 组合指令示例
您可以将多个修饰词组合在一个指令中,顺序不影响解析结果。
// 水平 + 垂直 chars: "[左 下 lh01]" // 三属性组合:水平 + 垂直 + 缩放 chars: "[左 下 10% lh01]" // 四属性组合:水平 + 垂直 + 层级 + 缩放 chars: "[右 中下 前 -15% lh01]" // 完整组合:包含瞬移 chars: "[瞬 中 下下 20% 前 lh01]" // 中英文混合组合 chars: "[left down front 10% lh01]" chars: "[中 front 15% lh02]" chars: "[instant right downm -10% lh03]" // 精确坐标组合 chars: "[x:10% y:-5% lh01]" chars: "[x:-15% y:10% front 10% lh02]" chars: "[瞬 x:20% y:-10% lh03]"
14. 清除立绘
使用 消失 指令移除指定立绘或全部立绘。
14.1 单个立绘清除
| 中文 | 英文 | 效果 |
|---|---|---|
| 消失 | hide / remove | 移除指定立绘 |
// 移除单个立绘 chars: "[消失 lh01]" chars: "[hide lh01]" chars: "[remove lh01]" // 同时移除多个立绘 chars: "[消失 lh01],[消失 lh02]"
14.2 批量清除所有立绘
一键清除屏幕上所有活跃立绘,包括自动停止所有动画状态(如持续发抖)。
// 中文指令 chars: "[消失 全部]" // 英文指令 (hide) chars: "[hide all]" // 英文指令 (remove) chars: "[remove all]" // 实际应用场景:场景切换前清除所有立绘 chars: "[消失 all]"
- 会自动清理所有动画状态(如
cshake 持续发抖的定时器)- 空状态时调用不会报错
- 完全兼容原有的单立绘清除功能
15. 测试指南
本引擎提供了完整的立绘测试场景,位于
scenes\1.html。使用方法:
1. 在浏览器中打开
scenes\1.html2. 逐个点击推进,观察每个测试的效果
测试内容:
- 涵盖所有水平/垂直位置指令(包括向上偏移)
- 包含精确坐标控制系统
- 包含层级、缩放、动画等修饰词
- 支持中英文混合指令测试
- 包含冲突场景测试
默认资源:
lh1、lh2、lh5