請收下超萌的web裝飾 卡通看板娘

前言

不少小夥伴們都問了本妹子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 .. :)

相關連接

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/