关于在博客园给live2d添加动作的辛酸史

之前讲到了如何将live2d呈现在自己的博客上,接下来便是设定小人所响应的动作。

上次我们讲到了我们是通过传live2d模型的json文件来让小人呈现在我们的网页上，而其中json文件所包含的就是各种对于模型资源的设定，例如可以看到motions所指的的就是模型的动作这一大类，hit_areas所定义的就是model的触碰范围等等。编写model.json的文件可以软件Live2DviewerEX。目前该款软件在steam上收费（不过如果你也可以和我一样直接编写json文件）。再者，目前另一款能在电脑上运行model的软件便是Live2DViewer（没有EX)。如果你和我一样准备自己编写的话可以参考如下两个连接（其实根据软件的规则编写的json文件会和在网页上的效果会有出入，在后面会讲到为什么）

1.http://live2d.pavostudio.com/doc/zh-cn/live2d/model-json-example/（中文文档）

2.https://www.bilibili.com/video/av28408754?from=search&seid=6607613555690708666（视频）

（正确的编写方式）

(错误的编写方式)

在编写好json文件后，我们便可以上次说的上传到github后release一个版本便可以给我们的脚本传一个文件了。但是当你满心欢心的准备去测试自己所编写的功能可能马上就会受挫，因为效果并不是和我们在软件上所显示的那样。这里我们来分析为什么。因为我们借助了脚本<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js "></script>（以下简称为脚本A）。我们所编写的model.json文件相当于向这个脚本传递了我们所编写的内容。但是因为这个脚本编写的处理数据的方式与我们之前所显示live2d的处理数据方式存在着一定的偏差。这好比你向两个不同的函数传递相同的参数。出来的结果也会存在偏差。在脚本A中对应body部分的事件处理只会处理动作的数据（如果存在多个，便会随机选择一个）。而对应脸部的事件处理则是随机触发一个表情而不处理动作（你甚至可以点击模型头部上方的空气来切换表情），如果你的模型并不存在表情这一参数的话，你大可放心，你只要编写除了tap_head事件外的事件并产生对应的表情和声音即可。但如果你像我一样如果需要在点击后产生相对应的表情和动作，那就需要改写脚本A所引用的另一个脚本了，所以我们需要改写的是L2Dwidget.0.min.js而不是脚本A文件。改写这个文件是一件非常痛苦的事情。因为不知道什么原因博主显示这些代码是不具备换行和格式的。什么意思？看下面的图你就懂了。

 

我想你在看完这张图后应该就能理解博主的心情了.......即便如此，博主还是用自己仅有的知识水平对脚本做出了一些修改，使得只要模型的表情和tap_body中的个数相同的前提下，在加载顺利的情况下可以使得表情的顺序与动作的顺序一一对应。可能这么说不是很明白，大致意思即为，即使不在tap_body中不编写expression这一选项，然而可以加载表情，其中所选择的表情次序在网络加载没有错误的情况下与动作的次数一样，即第二个动作会加载json的expressions参数的第二个值。（由于博主很菜，并不能写出在参数相同的情况下呈现像跟live2dviewerex一样的脚本，只能根据自己的需求改写成了只适合自己用的脚本，故也不对外公开了，如果你敢兴趣，也可以通过F12获得）。

此外由于博主的模型个数比较多，故对于一年四季不同季节，一天不同时间段所使用的live2d模型也是不一样的（其实就是非常简单的逻辑处理问题），如果你敢兴趣同样通过F12搜索”Date“后查看。

以上便是博主对于live2d网页版的探索。如果你感兴趣你可以改写上面的L2Dwidget.0.min.js文件使其与live2dviewerex的效果一模一样或者改成像我一样适合自己模型的脚本（如果有更好的办法请务必不要像我一样改写脚本文件，与此同时如果可以的话也请告诉博主(ノへ￣、)）。由于博主最近学业压力重，也参加了学院里的实验室，故对于此事不再进行更新，如果感兴趣，请自行探索，去更好的了解自己所喜爱的事物。