有一天我打开DIYGod的博客。嗯?他的主页上有一只萌萌22娘,还会随着指针转头?
有一天我又打开辉鸭蛋的博客。嗯?他的主页上有一只萌萌的亚丝娜,刷新页面还能换装?
哇啊!我也要看板娘!不加会睡不着!
有了这个万恶的念头,我放下了手中一切事情,去百度,呃,去谷歌看板妹子是怎么加上去的。经过了“网页看板娘”、“博客挂件”、“博客宠物”等一系列牛头不对马嘴的关键词搜索,我陷入了深深的茫然——这搜出来都是什么啊,一定是我打开的方式不对。于是调出他们的源码——仔细一对比,发现DIYGod有个js文件叫live2d.js。l…i…v…e…2…d…可不就是它!Otaku们也许玩过动态桌面。就是利用2D变形实现动画效果的引擎。
live2d现在已经支持WebGL了。从官方下了sdk,发现里面有3个Demo,大概可以通过它了解web渲染live2d的工程结构。

/assets/live2d文件夹下放的是live2d的模型文件,是由Cubium导出的文件,可以用sdk直接加载。要是自己做模型的话又是一门高深的学问,网上素材不算多,可以带着钱包请大神帮做,或者从一些游戏拆包取模,或者还可以去steam创意工坊Live2dViewerEx主题下找,不过质量好模型的也不多。
大致看一眼50这个文件夹下的结构。motions文件夹里放的是.mtn格式的动作数据,textures里的是人物的贴图数据。.moc格式的文件是live2d模型的代码,这个不用管就是了。model.json列出了模型的参数,包括贴图,动作文件等,后面sdk读取模型参数就是从这里读取。
/src中的js文件做的事是设置模型参数,加载模型,设置监听事件,依赖两个live2d.min.js和live2dframework.js这两个文件(在包外,上图没列出)。
调整一下妹子的尺寸和位置,改动几个监听事件,就可以移到博客里卖萌了。嘻嘻,感觉智商都下降了。

如果没看到就稍稍等一会儿,模型加载在文档加载完成之后。
PS:发现了一件恐怖的事,加了看板娘后,文章页的渲染速度变得特别慢…肝有点疼,先洗洗睡了明天再看。