请收下超萌的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://github.com/raoenhui/live2d-example/blob/master/src/L2Dwidget.min.js

第二步:引用对应动画精灵的json文件,引用动画精灵地址为:https://github.com/raoenhui/live2d-example/tree/master/packages/live2d-widget-model-shizuku

第三步:初始化看板娘

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,源码地址为:https://github.com/raoenhui/live2d-example

通过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 .. :)

相关链接

http://demo.frontendx.cn/live2d-example/index.html

https://github.com/raoenhui/live2d-example

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/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • 请允许我借鉴前辈们的东西~~~~ 感激不尽~~~~~ 以下为Android 框架排行榜 么么哒~ Android...
    嗯_新阅读 1,870评论 3 32
  • # Awesome Python [![Awesome](https://cdn.rawgit.com/sindr...
    emily_007阅读 2,101评论 0 3
  • 今天下午的两个小时,是我度过最愉快的。 下午大概两点多的时候,陈祎到了我家。我跟她先去胜前文化买了...
    菲儿1225阅读 439评论 0 1
  • 我昨天摔了一下,脚崴了今天直接没法走路了,人一有异样就容易脾气暴躁,果不其然晚上就冲闺女发火了,其实也不是大事,都...
    拾一片光阴阅读 64评论 0 1
  • 晓咏春风在眼前,繁花芳艳入雨烟。 清妍诗句喜明远,从不想它值几钱。 一一原创
    李光东的诗意阅读 203评论 0 2