凡是过往,皆为序章

为自己的博客加上一直萌萌的看板娘

2019.06.14

科普

Live2D 是一种应用于电子游戏的绘图渲染技术,技术由日本 Cybernoids 公司开发。Live2D Cubism 的工作原理是通过将一系列的 2D 图像进行平移、旋转和变形等操作,生成一个具有自然动画效果的可动人物模型。由于 Live2D 只需一系列 2D 原图即可生成具有类似于 3D 动画效果的模型,比 3D 建模耗费的时间和成本更少,因此受到很多游戏制作者,特别是小成本 AVG 和手游作者的喜爱。另外,Live2D 生成的模型相对于真正的 3D 模型,可以更好地还原手绘风格。

轮子

要想跑的快,一个合适轮子是必不可少的。关于看板娘的轮子有很多,不过大部分都是 Hexo 插件,目前我找到最简单的轮子是 live2d_src。 我们只需要 live2d_src 的 releases 中的 live2d.js

快速开始

  • 选好了一个合适的轮子一切就变得简单了,首先在你的网页上添加要给 Canvas 画布,一般是这样写

    <canvas id="live2d" width="280" height="250"></canvas>
    
  • 然后引入刚刚下载的 live2d.js

    <script src="live2d.js"></script>
    
  • 接着我们再通过一段简单的代码来开始引用我们的模型

    <script>loadlive2d('live2d', '此处模型json地址');</script>
    

如果暂时没有本地模型可以先用 https://cdn.jsdelivr.net/npm/live2d-widget-model-haruto@1.0.5/assets/haruto 看一下效果

这样我们的网站上,就显示出自己的看板娘啦!

模型地址

  • 我们可以将 Live2D 模型下载下来放在我们的项目中,然后在直接引入模型的 model.json。 目前我找到的模型资源如下

  • 如果你跟我一样懒,可以使用别人放到 CDN 的公用模型

调整样式

现在板娘正常的位置显示了出来,而不是「悬挂」在页面的某个位置。我们可以通过添加一段简单的 CSS 使它「悬挂」起来!

#live2d {
    left: 0;
    bottom: 0;
    z-index: 520; /* 如果模型被遮住可以把它改的更大 */
    position: fixed;
    pointer-events: none; /* 防止遮住鼠标点击页面其他内容 */
}

特别声明:Live2D 是 Cybernoids 公司的,有版权,个人自用可以,商用的话需要注意。

参考资料

发表评论