charealmlive2d

v1.1.3

Published

10 months ago

**CubismSDK5.x**

Downloads

110

0High
0Medium
0Low

lrj0828

charealm live2d cubsim5.x

CubismSDK5.x

更新记录

2014/01/30

修正
- 现在可以多次调用init方法了

2014/01/08

升级
- CubismSDK升级到5.x - 但部分内容未升级

新增

添加了触发表情的方法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/[email protected]/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)

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme