个人博客挂件基于Live2d的看板娘实现和源码

前段时间我的博客是用 Hexo 搭建的,当时我给我博客做了一个小猫咪的挂件,蛮有趣的。后来因为 Hexo 生成静态页面速度慢的问题我转向了 Hugo 来搭建我的个人博客,这个小猫咪也换成了看板娘,这些其实都是基于 Live2d 的,接下来我给大家说一下怎么给你的博客添加,无论你的博客是基于 WordPress 的还是基于 Hexo 的,或者和我一样是基于 Hugo 的都可以参考本文。

Live2d 是什么

Live2d 的官网地址:https://www.live2d.com/zh-CHS/

Live2d 是一种 2d 的绘图渲染技术,是由日本的一个叫 Cybernoids 的公司开发,通过一系列可以连续动画的的人物或者动物来建立模型,生成一种可以动的 2d 图形或者说二维模型。这种模型和二次元很接近,所以喜欢这种风格的人很多,但是也有它自身的缺陷那就是不容易商业化和更快的发展,例如现在的 3d 模型在游戏上和 VR 技术上有很大的发展空间,而 Live2d 至今还没有找到合适的契合点,但是这丝毫不影响宅男对这项技术的热爱。

Live2d 二维模型演示

Live2d 的制作过程

官网下载安装包直接安装可以得到两种软件,分别是 Cubism ModelerCubism Animator,最后我们还需要安装第三个软件 Viewer 用作预览调戏等。

由于还是由 2d 图形制作,所以对动画师要求比较高,除去原画绘制能力,动画师还需要具有一定三维空间感,以及复杂逻辑能力。制作过程大致如下:

  • 使用 PhotoShop 制作 psd 格式的原画切图。
  • 导入 Cubism Modeler 里蒙皮。
  • 设置蒙皮。
  • 导出到 Cubism Animator 里面开始制作动画。
  • 最后再导出文件就完成了。

引入看板娘博客挂件

第一步:依赖 Dependencies

你要确保你的页面中可以使用 font-awesome, 需要使用到,还有就是 jQuery 是否有添加。

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

如果你发现没有显示出来,检查一下你的 jQuery 是否正常引入了。

第二步:使用 Usage

你可以使用一行代码完成看板娘的引入,你只需要在你的 footer 中添加如下代码即可:

<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>

做完这两步你已经完成了,但是我们这样做还是不够的,例如我们想修改看板娘上面的提示文字和锚点,和自己的网站内容关联和呼应,这样就需要将下面这几个文件下载到本地静态文件夹即可。

Live2d 本地需要下载的文件

这些文件你可以在原作者的 GitHub 上面下载,下载地址:https://github.com/stevenjoezhang/live2d-widget

接下来你只需要配置一下 autoload.js 里面的根目录即可,配置如下:

//注意:live2d_path 参数应使用绝对路径
const live2d_path = "/live2d/";

自定义 Live2d 看板娘

安装完成后我们可以对看板娘的样式和头顶的气泡消息自定义,这样可以做出和自己网站很契合的交互效果,使这个看板娘成为你网站上独一无二的。

Live2d 看板娘大小调整

调整看板娘的大小和上面气泡对话框的大小,还有侧边菜单的样式,是否显示等都可以在 waifu.css 样式文件中进行修改,我们只需要在浏览器中 F12 查看对应控件的名称即可,在样式文件中找到对应的元素标签进行修改即可。

当然,你也可以在浏览器中修改样式,这样可以一边修改一边查看效果,将有效果的修改结果更改到 waifu.css 文件中即可。

Live2d 自定义隐藏功能

我们如果想要隐藏组件中的某些地方,或者修改跳转链接,或者自定义显示按钮图标的样子都可以通过修改 waifu-tips.js 文件实现,例如我们要更改菜单的多少,可以这样修改:

$("body").append(`<div id="waifu">
    <div id="waifu-tips"></div>
    <canvas id="live2d" width="300" height="300"></canvas>
    <div id="waifu-tool">
        <span class="fa fa-lg fa-paper-plane"></span>
        <span class="fa fa-lg fa-user-circle"></span>
        <span class="fa fa-lg fa-street-view"></span>
        <span class="fa fa-lg fa-camera-retro"></span>
        <span class="fa fa-lg fa-times"></span>
    </div>
</div>`);

只需要修改这里的标签,不需要的删除即可,如果要添加就追加一个,其他地方也是类似的设置,如果需要你可以查看该文件修改其他地方。

Live2d 看板娘对话自定义

我们的看板娘会时不时的和我们对话,而且你会发现当你的鼠标从某个标签或者链接上面移动过后,看板娘都会和你互动,而这个互动可能和我们的网站内容不契合,所以我们需要打开文件 waifu-tips.json 来进行修改,或者进行删除,当然也可以添加新的。

这个文件里面的内容大致结构如下:

{
    "mouseover": [{
        "selector": "#waifu #live2d",
        "text": ["对话提示一", "对话提示二"]
    }],
    "click": [{
        "selector": "#waifu #live2d",
        "text": ["对话提示一", "对话提示二"]
    }],
    "seasons": [{
        "date": "01/01",
        "text": "对话提示"
    }]   
}  

从上面的 json 结构中可以看出来,实际上对我们的事件响应做出三个分类,一种使鼠标移动事件,另一种使鼠标点击事件,还有一种使日期事件,我们可以给这些集合中添加我们想绑定的事件,selector 就是要绑定事件的标签的id, 而 text 则是绑定后提示的文本,如果有多条则会随机提示其中的某一条。

做到这里已经能基本满足我们的需求,如果你还想深度定制也可以,你可以研究一下源代码,然后定制更好玩的东西出来。关于博客装扮和美化还有很多好玩的东西,如果你有兴趣可以看看我写的关于博客美化的这篇文章 《Hexo主题(Next)美化、配置、优化这一篇就够了》