很多小伙伴们都问了本妹子blog
右下的卡通人物怎么生成的呢?下面我将简单粗暴滴给小伙伴们介绍下怎么配置二次元
看板娘。
本妹子的看板娘先给各位主人来露个脸吧!请多多关照^ ^
https://raoenhui.github.io/nodejs/2019/06/04/https/index.html
Talk is cheap. Show me the code.
第一步:引用文件L2Dwidget.min.js
,地址为https://l2dwidget.js.org/lib/L2Dwidget.min.js
第二步:引用对应动画精灵的json
文件,引用动画精灵地址为:https://github.com/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插件
看板娘主要以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
https://github.com/xiazeyu/live2d-widget.js
https://www.live2d.com/
https://live2d.github.io/CubismJsComponents/
联系客服