1.1.3 • Published 2 years ago
charealmlive2d v1.1.3
CubismSDK5.x
更新记录
2014/01/30
- 修正
- 现在可以多次调用init方法了
2014/01/08
- 升级
- CubismSDK升级到
5.x- 但部分内容未升级
- CubismSDK升级到
- 新增
- 添加了触发表情的方法
scence.setExpression&scence.setOrderExpression- 现在触发头部点击不再随机播放表情，而是顺序播放 xxx.model3.json新增Transform用于设置位移和缩放等// xxx.model3.json { "Version": ..., "FileReferences": ..., "Groups": ..., "HitAreas": ..., // 这个优先级最高，未配置则以实例化时传入参数为准，如都没传入则使用默认 "Transform": { "ViewScale": 2.5, // 缩放 "ViewTranslate": { "y": -1.3 } // 位移 } }
- 添加了触发表情的方法
- 修正
- 处理了移动端模糊问题
- 处理了自动呼吸时，同时触发头部和身体摆动的问题 - 也许不是问题，但本项目不需要
如何使用
第一种
import Live2d from 'charealmlive2d';第二种，提供一个全局变量
<!DOCTYPE html>
<html>
<head>
...
<!-- Pollyfill script -->
<script src="https://unpkg.com/core-js-bundle@3.6.1/minified.js"></script>
<!-- Live2DCubismCore script -->
<script src = "../../../Core/live2dcubismcore.js"></script>
<!-- Build script -->
<script src = "./dist/bundle.js"></script>
</head>
<body>
<script>
window.Live2d.init(...);
</script>
</body>可用方法
| 函数名 | 说明 |
|---|---|
| init | 初始化，详见init方法可用参数 |
| model | 获取model对象 LAppDelegate.getInstance() |
| scene | 获取scene对象 LAppLive2DManager.getInstance() |
| view | 获取view对象 模型 |
| release | 释放模型 |
init方法可用参数 - 暂时只介绍关键参数
| 参数 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| Target | HTMLElement | 目标节点 | document.body |
| CanvasSize | { width: number; height: number } | string | 画布尺寸 | 'auto' |
| ResourcesPath | string | 模型资源地址 | '../../Resources/' |
| ModelDir | string[] | 加载模型列表，模型名称和model3.json名称一致 | |
| ViewScale | number | 模型缩放比例，0.8 - 2.0 | 1.0 |
| ViewTranslate | { x?: number; y?: number } | 模型位移，和ViewScale一样，都是比例值，缩放比例不同这里位移值也会有变化，可传负值 | {x: 0, y: 0} |
| Motions | string[] | 动作集合，用于执行指定动作时传入名称，现在设计成参数了，但最好不要修改 | ["Normal", "joy", "anger", "Sadness", "surprise", "love", "Fear"]对应意义：'常', '喜', '怒', '哀', '乐', '爱', '恐' |
scene可用方法
| 函数名 | 说明 | 参数 |
|---|---|---|
| startAssignMotion | 执行指定动作 | 1. <string> Normal 动作名称2. <number> 2 优先级，当动作未正确执行时，可考虑提升优先级3. <function> 可选，动作结束后回调 |
| setExpression | 执行指定表情 | 1. <string> name 表情名 - Expressions.Name |
| setOrderExpression | 顺序执行表情 | - |
举个例子
// 可以使用bundle.js提供的全局变量
window.Live2d.init({
ResourcesPath: '../../Resources/', // 资源地址
ModelDir: ['xxx'], // 模型名称
ViewScale: 2.0, // 视图缩放
ViewTranslate: { y: -1.3 } // 视图位移
})
const _scene = window.Live2d.scene;
setTimeout(() => {
console.log('动作1')
_scene.startAssignMotion('anger');
console.log('表情')
_scene.setExpression('exp_01');
}, 1000)
setTimeout(() => {
console.log('动作2')
// 打断之前未完成的动作，需要提高优先级
_scene.startAssignMotion('love', 3, function () {
console.log('动作3')
// 即使动作结束的回调也需要一个延迟，或者再次提高优先级
setTimeout(function () {
_scene.startAssignMotion('Sadness');
}, 16)
});
}, 2000)
setTimeout(() => {
console.log('动作4')
// 动作全部结束后，再执行其他动作可不需再提升优先级
_scene.startAssignMotion('Fear');
}, 15000)