前言
很多小伙伴们都问了本妹子blog右下的卡通人物怎么生成的呢？下面我将简单粗暴滴给小伙伴们介绍下怎么配置二次元看板娘。
本妹子的看板娘先给各位主人来露个脸吧！请多多关照^ ^
https://raoenhui.github.io/nodejs/2019/06/04/https/index.html
用法
Talk is cheap. Show me the code.
第一步：引用文件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
第三步：初始化看板娘
L2Dwidget.init({
"model": { "jsonPath": "packages/live2d-widget-model-shizuku/assets/shizuku.model.json" }
});
三步搞定是不是很简单。它会自动在页面中生成id为live2d-widget的dom元素，这就是你的看板娘。还想多DIY下的小伙伴们可以接着往下看～
进阶用法
只有部分看板娘才有进阶用法
事件监听
可以添加事件监听，比如触摸她的时候会弹出点提示
L2Dwidget.on('*', (name) => {
console.log('事件为： ' + name)
})
显示对话框
当触摸到角色身体或脸时，弹出对话框。
L2Dwidget.init({
dialog: {
enable: true,
script: {
'tap body': '哎呀！别碰我！',
'tap face': '人家是在认真写博客哦--前端妹子',
}
}
});
看板娘位置
位置默认在左下角，还可以设置right top
L2Dwidget.init({
display: {
position: 'right'
}
});
移动端兼容配置
可以设置在移动端是否显示，或者缩小显示
L2Dwidget.init({
"mobile": { "show": true, scale: 0.5 },
});
替换不同的看板娘
将model引用的对应看板娘的json文件，具体可以选择哪些看板娘，可以看下面案例
L2Dwidget.init({
"model": { "jsonPath": "packages/live2d-widget-model-" + modalName + "/assets/" + selectId + ".model.json" }
});
还迷茫的小伙伴看直接看我写的demo，源码地址为：https://github.com/raoenhui/live2d-example
通过demo，看板娘有以下可选择：
chitoseEpsilon2.1Gantzert_Felixanderharu01haru02harutohibikihijikiizumikoharumikuniconi-jnipsilonnitoshizukutororotsumikiUnitychanwankoz16
插件
很多有hexo搭博客的小伙伴们可以直接安装hexo-helper-live2d插件
用了pixijs动画引擎的，也可以用pixi-live2d插件
其他YY
看板娘主要以Live2D为核心引擎，Live2D主要是有日本Guyzware公司开发的，支持native和web端，如果想自定义看板娘的小伙伴们，可以研究下案例https://live2d.github.io/CubismJsComponents/。
虽然本妹子很想进入游戏开发，但是技术有限，至今仍在零基础徘徊，略显尴尬 .但是有绘画基础的小伙伴们可以给自己的blog请了一位喜欢唱，跳，rap和篮球的看板娘哦。
Happy coding .. :)
相关链接
http://demo.frontendx.cn/live2d-example/index.html
https://github.com/raoenhui/live2d-example
http://raoenhui.github.io/domes/live2d-example/index.html
https://l2dwidget.js.org/docs/index.html
https://github.com/xiazeyu/live2d-widget.js
https://www.live2d.com/
https://live2d.github.io/CubismJsComponents/