# charealmlive2d

> **CubismSDK5.x**

Latest version **1.1.3** (published 2024-01-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install charealmlive2d
pnpm add charealmlive2d
yarn add charealmlive2d
bun add charealmlive2d
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2024-01-30 |
| First published | 2023-11-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | lrj |
| Maintainers | lrj0828 |
| Keywords | charealm, live2d, cubsim5.x |

## Links

- npm: https://www.npmjs.com/package/charealmlive2d
- npm.io page: https://npm.io/package/charealmlive2d

## Recent versions

- 1.1.3 (latest) — 2024-01-30
- 1.1.2 — 2024-01-10
- 1.1.1 — 2024-01-10
- 1.1.0 — 2024-01-08
- 1.0.6 — 2023-12-12
- 1.0.5 — 2023-11-26
- 1.0.4 — 2023-11-26
- 1.0.3 — 2023-11-26
- 1.0.2 — 2023-11-12
- 1.0.1 — 2023-11-12
- 1.0.0 — 2023-11-12

## README

**CubismSDK5.x**

### 更新记录

**2014/01/30**
- <font color="yellow">修正</font>
  - 现在可以多次调用init方法了

**2014/01/08**
- <font color="red">升级</font>
  - **CubismSDK**升级到`5.x` - 但部分内容未升级
- <font color="lightgreen">新增</font>
  - 添加了触发表情的方法`scence.setExpression`&`scence.setOrderExpression` - 现在触发头部点击不再**随机**播放表情，而是**顺序**播放
  - `xxx.model3.json`新增`Transform`用于设置位移和缩放等
    ```js
    // xxx.model3.json
    {
      "Version": ...,
      "FileReferences": ...,
      "Groups": ...,
      "HitAreas": ...,
      // 这个优先级最高，未配置则以实例化时传入参数为准，如都没传入则使用默认
      "Transform": {
        "ViewScale": 2.5, // 缩放
        "ViewTranslate": { "y": -1.3 } // 位移
      }
    }
    ```
- <font color="yellow">修正</font>
  - 处理了移动端模糊问题
  - 处理了**自动呼吸**时，同时触发头部和身体摆动的问题 - 也许不是问题，但本项目不需要

### 如何使用

第一种
```js
import Live2d from 'charealmlive2d';
```
第二种，提供一个全局变量
```html
<!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`方法可用参数](#init_opts) |
| model | 获取`model`对象 `LAppDelegate.getInstance()` |
| scene | 获取[`scene`](#scene_obj)对象 `LAppLive2DManager.getInstance()` |
| view | 获取`view`对象 模型 |
| release | 释放模型 |


### <span id="init_opts">`init`方法可用参数</span> - 暂时只介绍关键参数

| 参数 | 类型 | 说明 | 默认值 |
| --- | --- | --- | --- |
| 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"]`<br>对应意义：['常', '喜', '怒', '哀', '乐', '爱', '恐'] |

### <span id="scene_obj"></span>`scene`可用方法

| 函数名 | 说明 | 参数 |
| --- | --- | --- |
| startAssignMotion | 执行指定动作 | 1. `<string> Normal` 动作名称<br>2. `<number> 2` 优先级，当动作未正确执行时，可考虑提升优先级<br>3. `<function>` 可选，动作结束后回调 |
| setExpression | 执行指定表情 | 1. `<string> name` 表情名 - `Expressions.Name` |
| setOrderExpression | 顺序执行表情 | - |

### 举个例子

```js
// 可以使用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)
```

---
_Source: https://npm.io/package/charealmlive2d · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._