前段时间我的博客是用 Hexo
搭建的,当时我给我博客做了一个小猫咪的挂件,蛮有趣的。后来因为 Hexo
生成静态页面速度慢的问题我转向了 Hugo
来搭建我的个人博客,这个小猫咪也换成了看板娘,这些其实都是基于 Live2d
的,接下来我给大家说一下怎么给你的博客添加,无论你的博客是基于 WordPress
的还是基于 Hexo
的,或者和我一样是基于 Hugo
的都可以参考本文。
Live2d 是什么
Live2d 的官网地址:https://www.live2d.com/zh-CHS/
Live2d 是一种 2d
的绘图渲染技术,是由日本的一个叫 Cybernoids
的公司开发,通过一系列可以连续动画的的人物或者动物来建立模型,生成一种可以动的 2d
图形或者说二维模型。这种模型和二次元很接近,所以喜欢这种风格的人很多,但是也有它自身的缺陷那就是不容易商业化和更快的发展,例如现在的 3d
模型在游戏上和 VR
技术上有很大的发展空间,而 Live2d
至今还没有找到合适的契合点,但是这丝毫不影响宅男对这项技术的热爱。
Live2d 的制作过程
官网下载安装包直接安装可以得到两种软件,分别是 Cubism Modeler
和 Cubism Animator
,最后我们还需要安装第三个软件 Viewer
用作预览调戏等。
由于还是由 2d
图形制作,所以对动画师要求比较高,除去原画绘制能力,动画师还需要具有一定三维空间感,以及复杂逻辑能力。制作过程大致如下:
- 使用
PhotoShop
制作psd
格式的原画切图。 - 导入
Cubism Modeler
里蒙皮。 - 设置蒙皮。
- 导出到
Cubism Animator
里面开始制作动画。 - 最后再导出文件就完成了。
引入看板娘博客挂件
第一步:依赖 Dependencies
你要确保你的页面中可以使用 font-awesome
, 需要使用到,还有就是 jQuery
是否有添加。
|
|
如果你发现没有显示出来,检查一下你的 jQuery
是否正常引入了。
第二步:使用 Usage
你可以使用一行代码完成看板娘的引入,你只需要在你的 footer
中添加如下代码即可:
|
|
做完这两步你已经完成了,但是我们这样做还是不够的,例如我们想修改看板娘上面的提示文字和锚点,和自己的网站内容关联和呼应,这样就需要将下面这几个文件下载到本地静态文件夹即可。
这些文件你可以在原作者的 GitHub
上面下载,下载地址:https://github.com/stevenjoezhang/live2d-widget
接下来你只需要配置一下 autoload.js
里面的根目录即可,配置如下:
|
|
自定义 Live2d 看板娘
安装完成后我们可以对看板娘的样式和头顶的气泡消息自定义,这样可以做出和自己网站很契合的交互效果,使这个看板娘成为你网站上独一无二的。
Live2d 看板娘大小调整
调整看板娘的大小和上面气泡对话框的大小,还有侧边菜单的样式,是否显示等都可以在 waifu.css
样式文件中进行修改,我们只需要在浏览器中 F12 查看对应控件的名称即可,在样式文件中找到对应的元素标签进行修改即可。
当然,你也可以在浏览器中修改样式,这样可以一边修改一边查看效果,将有效果的修改结果更改到 waifu.css
文件中即可。
Live2d 自定义隐藏功能
我们如果想要隐藏组件中的某些地方,或者修改跳转链接,或者自定义显示按钮图标的样子都可以通过修改 waifu-tips.js
文件实现,例如我们要更改菜单的多少,可以这样修改:
|
|
只需要修改这里的标签,不需要的删除即可,如果要添加就追加一个,其他地方也是类似的设置,如果需要你可以查看该文件修改其他地方。
Live2d 看板娘对话自定义
我们的看板娘会时不时的和我们对话,而且你会发现当你的鼠标从某个标签或者链接上面移动过后,看板娘都会和你互动,而这个互动可能和我们的网站内容不契合,所以我们需要打开文件 waifu-tips.json
来进行修改,或者进行删除,当然也可以添加新的。
这个文件里面的内容大致结构如下:
|
|
从上面的 json 结构中可以看出来,实际上对我们的事件响应做出三个分类,一种使鼠标移动事件,另一种使鼠标点击事件,还有一种使日期事件,我们可以给这些集合中添加我们想绑定的事件,selector
就是要绑定事件的标签的id, 而 text
则是绑定后提示的文本,如果有多条则会随机提示其中的某一条。
做到这里已经能基本满足我们的需求,如果你还想深度定制也可以,你可以研究一下源代码,然后定制更好玩的东西出来。关于博客装扮和美化还有很多好玩的东西,如果你有兴趣可以看看我写的关于博客美化的这篇文章 《Hexo主题(Next)美化、配置、优化这一篇就够了》