0.前言

最近恰逢考试周比往年来得更早一些, 已经预习各科到昏厥。 转眼一想博客又好久没有写一些东西了, 再拖下去这创(xia)作(bian)的频率就有点低了, 不妨趁着考试之间写一篇水文, 维持一下热度。

另外, 我想想看关于网站的一系列做法差不多已经总结完了, 目前我没有想到什么其他的东西来补充, 所以这就当做是关于博客搭建的最后一篇了。 话说也确实应该赶紧写完, 毕竟已经过去一个多月, 再不写难免夜长梦多(咦我为啥要用这个词)。回头重新整理一下后编一个目录, 也算告一段落。

对于一个个性化的博客网站, 生硬的文字指示虽说不会让人感觉很不舒服, 但难免会有一些距离感。 如果可以加上一个二次元妹子, 你想说的话和一些提示就能通过妹子的嘴说出去, 亲切感顿时爆棚啊有木有。。。 本篇就是一篇关于如何召唤妹子的总结(雾)。

Kawaii Alert! 本篇是关于萌妹子的攻略, 非战斗人员速速退散。

1.基本介绍

Live2D是一种绘图技术, 由日本的Cybernoids公司开发, 非常适合用来显示二次元的妹子(貌似这之间有什么联系🤔)。 神奇的是, 它其实只是用到了基本的图形平移和旋转之类的动作, 却能将2D的图像展示出不逊于3D的效果。 并且, 该公司也正在尝试开发3D的技术, 想想都有一些小期待。

我在探索的过程中, 跟着已经实现了的大佬的博客学了很长时间, 发现更改这些东西有点复杂, 需要利用官方的SDK来修改一些东西, 看得我懵了一个下午。 所以, 如果你只是想“要个妹子”哈, 我个人不建议学习太深的Live2D技术, 或是用SDK自建模型。 想要详细了解或是试一试自建模型, 可以看看文末提供的参考链接。

2.获得和加载模型

博主是参考的这一篇教程完成的看板娘布置: 小白教程之给网页添加Live2D。 你要做的就是通读全文, 掌握其核心思想。 我觉得应该没人喜欢用API吧🤔, 毕竟还要依赖别人的东西。 先下载素材包, 并且按照相应的讲解进行修改, 就获得了原材料。

按照上面那篇博客中所说的, 将几行代码添加到header和body中, 这时就应该像demo中展示的那样, 在你的博客中渲染出了那个可爱的妹子(*^o^*) 。 不过, 如果没有出现也不要着急, 继续往下看。

3.修复bug

我在这里小小地吐槽几句, 那篇博客里是有一些bug的, 比如没有添加加载路径什么的。 我当时在修复bug上花费了不少功夫。 感谢作者让我对前端知识进行了一系列实践(捂脸)。

由于时间紧张, 我就不细说遇到的bug了, 只是挑一些优化的步骤写在下面。 如果大家有不熟悉前端技术, 或是懒得修而想要我调试好的现成模型, 欢迎在下面留言哦。

对了, 模型中js悬浮判定是基于主题的类id的, 每个主题下css的id都不太一样, 这个就需要自己慢慢对照着进行修改, 同时也可以自定义地添加一些新的玩法。

4.优化步骤

1>设置缓存

Live2D模型的体积相比网站传输的数据来说是非常大的, 如果别人想要多次访问你的网站, 没有设置缓存的后果就是在等待模型加载上浪费很多时间。

这个问题也很好解决, 博主比对了wordpress的各个缓存插件, 最终判断出Cache Enabler在各个测试方面都比较优秀, 所以建议安装这个插件, 对于速度提升有很大的帮助。

2>过滤移动端

上面提到模型的大小问题, 如果是一个中低端的手机访问时, 你的网站将会瞬间卡死, 游戏体验极差。。。所以用一个简单的js语句将来自移动端的请求过滤掉, 这样就不会拖慢在移动端网站的运行速度了。

将初始化模型的js语句改成如下代码即可。

<script type="text/javascript">
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)))
{
}
else{
initModel("/Live2d/assets/")
}
</script>

5.参考链接

下面是我当时学习Live2D时看的博客链接(好像这些大佬互相都很熟的样子, 害怕ing)。

给博客添加能动的看板娘(Live2D)-将其添加到网页上吧

Live2D看板娘来了!

网页添加 Live2D 看板娘

看似就三个, 但点开后发现这几篇博客里也有许多类似的链接, 他们已经总结的很全面, 我就没必要多说了。

模型的版权归创作者所有, 感谢作者做出精美的模型。

6.The End

记得一定要把她说的话改一改啊喂!

发表评论

电子邮件地址不会被公开。 必填项已用*标注