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

前言

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

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

image.png

用法

Talk is cheap. Show me the code.

第一步：引用文件L2Dwidget.min.js,地址为https://l2dwidget.js.org/lib/L2Dwidget.min.js

第二步：引用对应动画精灵的json文件，引用动画精灵地址为： xiazeyu/live2d-widget-models

第三步：初始化看板娘

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 },});

案例

还迷茫的小伙伴看直接看我写的demo：
http://raoenhui.github.io/domes/live2d-example/index.html

通过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插件

用了pixijs动画引擎的，也可以用pixi-live2d插件

其余YY

看板娘主要以Live2D为核心引擎，Live2D主要是有日本Guyzware公司开发的，支持native和web端，假如想自己设置些功能的小伙伴们，可以研究下案例https://live2d.github.io/CubismJsComponents/。

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

Happy coding .. 🙂

相关链接

https://raoenhui.github.io/js/2019/12/26/live2d/index.html

http://raoenhui.github.io/domes/live2d-example/index.html

https://l2dwidget.js.org/docs/index.html

xiazeyu/live2d-widget.js

https://www.live2d.com/

https://live2d.github.io/CubismJsComponents/