webgal_mano

webgal_mano 是一个专门为 WebGAL 和 PIXI.js 设计的分层立绘渲染引擎。它完美还原了分层立绘编辑器的渲染逻辑，支持基础层叠加、姿势参数化切换以及精细的差分细节调整。

特性

• 🚀 高性能渲染：基于 PIXI.js 原生容器，支持图层排序和混合模式（Overlay, Softlight, Multiply）。
• 🎭 姿势叠加系统：支持同时激活多个姿势（如：左手动作 + 右手动作 + 表情），自动处理同组冲突。
• 🔍 差分细节调整：支持在姿势基础上，手动开关任意细下图层。
• 🔌 易于集成：仅需加载一个 JSON 配置文件即可运行。

安装

npm install webgal_mano

核心 API 使用方法

1. 初始化播放器

import { CharacterPlayer } from 'webgal_mano';

// 加载从编辑器导出的 model.char.json
const modelData = await fetch('model.char.json').then(r => r.json());

// 实例化
const player = new CharacterPlayer(modelData);
app.stage.addChild(player);

// 初始重置（应用基础身体和默认姿势）
player.resetToDefault();

2. 姿势与表情切换 (仿参数化)

setPose 会自动识别当前姿势属于哪个组（如 ArmL），并替换掉该组之前的动作，这与 Live2D 的参数滑动效果一致。

// 切换表情（不影响身体和手臂）
player.setPose('Smile1');

// 切换左手动作（不影响表情和右手）
player.setPose('ArmL11');

3. 差分细节调整 (Manual Overrides)

如果你需要比“姿势预设”更精细的控制（例如：单独开启汗水、流泪、改变腮红），可以使用手动覆盖接口。手动覆盖的优先级最高，会覆盖姿势预设的状态。

// 手动开启特定图层
player.setLayerVisible('Angle01/Facial/Sweat/Sweat01', true);

// 手动关闭特定图层
player.setLayerVisible('Angle01/Facial/Cheeks/Cheeks_Normal', false);

// 清除特定组的手动调整（恢复到由姿势预设控制）
player.clearGroupOverrides('Angle01/Facial/Sweat');

4. 辅助方法

// 叠加一个姿势（不移除冲突姿势，用于特殊多层叠加）
player.addPose('ExtraLayer');

// 移除一个姿势
player.removePose('ArmL11');

// 全局重置（清除所有姿势和手动细节调整，回到初始状态）
player.resetToDefault();

数据格式说明

该库配合 Character Editor 使用。打包后生成的 model.char.json 包含：

• assets.layers: 图层定义、顺序、混合模式。
• controller.baseLayers: 默认开启的常驻图层（如：Body, Blending）。
• controller.defaultPoses: 初始化的预设组合。
• controller.poses: 所有可调用的动作/表情预设指令。

许可证

MIT