立绘 (Character) 控制指南

精确控制角色的位置、层级、大小和动画效果

← 返回主页

1. 基本语法结构

立绘指令采用方括号包裹的形式:[修饰词 角色ID]。多个修饰词用空格分隔,多立绘用逗号分隔。

1.1 角色名称标识符

为了实现基于角色的自动替换与属性继承,你可以在指令开头添加一个自定义的“角色名称标识符”。

// 基础显示:在左侧显示“角色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)说明
左左leftl15%最左侧
left25%偏左侧
左右leftr35%微偏左
middle / center50%屏幕正中央(默认值)
右左rightl65%微偏右
right75%偏右侧
右右rightr85%最右侧

4. 垂直位置控制

通过关键词控制立绘的垂直偏移(Bottom)。不指定时默认为 0(底部对齐)。

4.1 向下偏移

中文英文偏移量 (Bottom)说明
down-25%向下轻微偏移
中下downm-50%向下中等偏移
下下downd / bottom-65%向下大幅偏移

4.2 向上偏移

中文英文偏移量 (Bottom)说明
up25%向上轻微偏移
中上upm50%向上中等偏移
上上upu / top65%向上大幅偏移
// 向下偏移
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: 前缀指定精确百分比坐标。

// 基础用法
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 值说明
front11顶层(覆盖在其他立绘之上)
back9底层(被其他立绘遮挡)
// lh01 在前,lh02 在后
chars: "[中 前 lh01],[中 后 lh02]"

7. 缩放比例

使用带有 % 符号的数字调整大小。计算规则:最终缩放 = 1 + (数值 / 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. 动画控制

提示: 默认情况下,立绘变化会带有 0.5 秒的平滑过渡动画。若出现卡顿,可使用 指令禁用动画。
中文英文效果
moment / instant禁用过渡动画,立绘立即切换
chars: "[瞬 左 lh01]"       // 瞬间移动,无动画
chars: "[instant right lh01]" // 英文写法

10. 动作指令

动作指令为立绘提供丰富的动态效果。使用动作指令时,/instant 会被自动忽略

10.1 动作指令列表

中文英文效果说明
后退retreatY轴向上+10%,缩放-10%,层级强制变为"后"(zIndex=9)
前进forwardY轴向下-10%,缩放+10%(上限2.0),层级强制变为"前"(zIndex=11)
吓一跳scare先放大7%再缩小7%,重复2次,总时长约1秒
发抖shakeX轴左右偏移±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 动作指令优先级规则

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.html
2. 逐个点击推进,观察每个测试的效果

测试内容:
- 涵盖所有水平/垂直位置指令(包括向上偏移)
- 包含精确坐标控制系统
- 包含层级、缩放、动画等修饰词
- 支持中英文混合指令测试
- 包含冲突场景测试
默认资源: lh1lh2lh5