请收下超萌的web装饰卡通看板娘-京东云开发者社区

### 前言

很多小伙伴们都问了本妹子`blog`右下的卡通人物怎么生成的呢？下面我将简单粗暴滴给小伙伴们介绍下怎么配置`二次元`看板娘。

本妹子的看板娘先给各位主人来露个脸吧！请多多关照^ ^
[https://raoenhui.github.io/nodejs/2019/06/04/https/index.html](https://raoenhui.github.io/nodejs/2019/06/04/https/index.html)

![image.png](https://raoenhui.github.io/images/191226/1.jpg)

### 用法

Talk is cheap. Show me the code.

第一步：引用文件`L2Dwidget.min.js`,地址为[https://github.com/raoenhui/live2d-example/blob/master/src/L2Dwidget.min.js](https://github.com/raoenhui/live2d-example/blob/master/src/L2Dwidget.min.js)

第二步：引用对应动画精灵的`json`文件，引用动画精灵地址为：[https://github.com/raoenhui/live2d-example/tree/master/packages/live2d-widget-model-shizuku](https://github.com/raoenhui/live2d-example/tree/master/packages/live2d-widget-model-shizuku)

第三步：初始化看板娘
```javascript
L2Dwidget.init({
    "model": { "jsonPath": "packages/live2d-widget-model-shizuku/assets/shizuku.model.json" }
});
```
三步搞定是不是很简单。它会自动在页面中生成`id`为`live2d-widget`的`dom`元素，这就是你的看板娘。还想多DIY下的小伙伴们可以接着往下看～

### 进阶用法

> 只有部分看板娘才有进阶用法

#### 事件监听

可以添加事件监听，比如触摸她的时候会弹出点提示
```javascript
L2Dwidget.on('*', (name) => {
    console.log('事件为： ' + name)
})
```
#### 显示对话框

当触摸到角色身体或脸时，弹出对话框。
```javascript
L2Dwidget.init({
    dialog: {
        enable: true,
        script: {
            'tap body': '哎呀！别碰我！',
            'tap face': '人家是在认真写博客哦--前端妹子',
        }
    }
});
```
#### 看板娘位置

位置默认在左下角，还可以设置`right` `top`
```javascript
L2Dwidget.init({
    display: {
        position: 'right'
    }
});
```
#### 移动端兼容配置

可以设置在移动端是否显示，或者缩小显示
```javascript
L2Dwidget.init({
    "mobile": { "show": true, scale: 0.5 },
});
```

### 替换不同的看板娘

将`model`引用的对应看板娘的`json`文件，具体可以选择哪些看板娘，可以看下面案例
```javascript
L2Dwidget.init({
    "model": { "jsonPath": "packages/live2d-widget-model-" + modalName + "/assets/" + selectId + ".model.json" }
});
```

还迷茫的小伙伴看直接看我写的[demo](http://raoenhui.github.io/domes/live2d-example/index.html)，源码地址为：[https://github.com/raoenhui/live2d-example](https://github.com/raoenhui/live2d-example)

通过`demo`，看板娘有以下可选择：
  - `chitose`
  - `Epsilon2.1`
  - `Gantzert_Felixander`
  - `haru01`
  - `haru02`
  - `haruto`
  - `hibiki`
  - `hijiki`
  - `izumi`
  - `koharu`
  - `miku`
  - `nico`
  - `ni-j`
  - `nipsilon`
  - `nito`
  - `shizuku`
  - `tororo`
  - `tsumiki`
  - `Unitychan`
  - `wanko`
  - `z16`

### 插件

很多有hexo搭博客的小伙伴们可以直接安装[hexo-helper-live2d](https://github.com/EYHN/hexo-helper-live2d)插件

用了`pixijs`动画引擎的，也可以用[pixi-live2d](https://github.com/avgjs/pixi-live2d)插件

### 其他YY

看板娘主要以`Live2D`为核心引擎，[Live2D](https://live2d.github.io/)主要是有日本Guyzware公司开发的，支持native和web端，如果想自定义看板娘的小伙伴们，可以研究下案例[https://live2d.github.io/CubismJsComponents/](https://live2d.github.io/CubismJsComponents/)。

虽然本妹子很想进入游戏开发，但是技术有限，至今仍在零基础徘徊，略显尴尬 .但是有绘画基础的小伙伴们可以给自己的`blog`请了一位喜欢唱，跳，rap和篮球的看板娘哦。

Happy coding .. :)

### 相关链接

[https://raoenhui.github.io/js/2019/12/26/live2d/index.html](https://raoenhui.github.io/js/2019/12/26/live2d/index.html)

[https://github.com/raoenhui/live2d-example](https://github.com/raoenhui/live2d-example)

[http://raoenhui.github.io/domes/live2d-example/index.html](http://raoenhui.github.io/domes/live2d-example/index.html)

[https://l2dwidget.js.org/docs/index.html](https://l2dwidget.js.org/docs/index.html)

[https://github.com/xiazeyu/live2d-widget.js](https://github.com/xiazeyu/live2d-widget.js)

[https://www.live2d.com/](https://www.live2d.com/)

[https://live2d.github.io/CubismJsComponents/](https://live2d.github.io/CubismJsComponents/)

请收下超萌的web装饰 卡通看板娘

请收下超萌的web装饰卡通看板娘