请收下超萌的web装饰 卡通看板娘
source link: https://raoenhui.github.io/js/2019/12/26/live2d/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
前言
很多小伙伴们都问了本妹子 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 插件
其他YY
看板娘主要以 Live2D
为核心引擎,Live2D主要是有日本Guyzware公司开发的,支持native和web端,如果想自定义些功能的小伙伴们,可以研究下案例 https://live2d.github.io/CubismJsComponents/ 。
虽然本妹子很想进入游戏开发,但是技术有限,至今仍在零基础徘徊,略显尴尬 .但是有绘画基础的小伙伴们可以给自己的 blog
请了一位喜欢唱,跳,rap和篮球的看板娘哦。
Happy coding .. :)
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK