阅读 1101

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

前言

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

本妹子的看板娘先给各位主人来露个脸吧!请多多关照^ ^ raoenhui.github.io/nodejs/2019…

image.png

用法

Talk is cheap. Show me the code.

第一步:引用文件L2Dwidget.min.js,地址为github.com/raoenhui/li…

第二步:引用对应动画精灵的json文件,引用动画精灵地址为:github.com/raoenhui/li…

第三步:初始化看板娘

L2Dwidget.init({
    "model": { "jsonPath": "packages/live2d-widget-model-shizuku/assets/shizuku.model.json" }
});
复制代码

三步搞定是不是很简单。它会自动在页面中生成idlive2d-widgetdom元素,这就是你的看板娘。还想多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,源码地址为:github.com/raoenhui/li…

通过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端,如果想自定义看板娘的小伙伴们,可以研究下案例live2d.github.io/CubismJsCom…

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

Happy coding .. :)

相关链接

demo.frontendx.cn/live2d-exam…

github.com/raoenhui/li…

raoenhui.github.io/domes/live2…

l2dwidget.js.org/docs/index.…

github.com/xiazeyu/liv…

www.live2d.com/

live2d.github.io/CubismJsCom…