关于在博客园添加live2d的二三事

首先我是一个没有学过任何前端语言的人，所以对于添加自己喜欢的live2d的过程中存在许多的疑惑和问题，希望懂得的朋友也能够为我解答。

我之所以要写这么一篇文章是因为我一开始就被别人的博客中的live2d给吸引了，但是我发现大部分的人所拥有的live2d都是千篇一律的，所以我就一直在想着尝试能不能做一个由自己的定的live2d。

首先如何在博客园中加载live2d?这很简单，只需要一个脚本以及live2d的资源文件。

对于脚本，已经有了前人所写好的脚本，故我们直接拿来用即可（十分感谢该脚本的作者，为我们不懂的小白也提供了可能）。以下我将贴出

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
　　　　　　　//jsonpath控制显示模型
            jsonPath:"模型的脚本 即model.json" },
        "display": {
            "position": "right", //看板娘的表现位置
            "width": 150,  //宽度
            "height": 262.5, //高度
            "hOffset": -60,  //水平
            "vOffset": -70,  //垂直
        },
        "mobile": {
            "show": true,
        },
        "react": {
            "opacityDefault": 1,//不透明度，可调
            "opacityOnHover": 0.2
        }
    });
</script>

好了，现在我们已经有了脚本，接下来便是如何获取资源

对于资源，有很多种获取途径，以下为我个人获取资源的过程（真是坎坷啊）

由于我喜欢的角色并不存在现成的live2d资源（百度谷歌啥的都搜不到），但是我发现了一款游戏用着live2d模型——即“魔法记录魔法少女小圆外传”，由于此款游戏未在国内发行，于是我下了台湾版的，一般来说游戏的资源都会存储在Android/data/com.xxxx.xxx文件下,但是这款游戏明显不按照套路出牌，他将资源存储在了根目录，在未root的权限下无法查看，于是我就认为或许电脑模拟器可以试试，但是现实狠狠的打了我的脸，这款游戏对于root的条件下会弹出101E错误（关闭root即可解决），但是即使关闭了root他仍然会弹出102E的错误（个人认为是游戏对于环境是否为模拟器做出了判断），于是无奈下我只有一条将手机root的路走，而我的系统是miui稳定版，只有将系统刷至开发版才能root，就在我绝望以为只能root的情况下我在对于手机信息备份存储至本地时，我惊奇的发现对于这款游戏的文件竟然有4g左右，于是我便思考或许存在一直可能，可以将备份文件解包，皇天不负有心人，网上确实存在着方法。

对于备份文件的解包，我们需要用到两个东西，一个是Winhex需要对备份文件去掉文件头，二是abe解包文件。（感谢菲菲大神）

以下贴出教程

https://www.feifeiboke.com/pcjishu/3666.html

https://www.feifeiboke.com/android/3669.html（其中的abe对于java7有效）

https://download.csdn.net/download/sinat_29729595/10740712（对于和我一样的java8）

以上解密完成后便可获得资源文件找到live2d文件夹即可，而对于模型似乎存在着加密的说法？因为我在查询资料的过程中有有关于对于live2d文件解密的教程。

在获取live2d后我们便需要让之前的live2d脚本获取到model.json,

起先我将我的资源文件存至了github，再用raw以外链的形式生成 model.json路径,但是不知道是什么原因,rawgithub经常无法访问，我便将code搬到了国内的gitee上，虽然解决了加载问题，却迎来了最令我头大的问题，CORS跨域访问。

 

                                       （图片为网络资源）

一开始我一直在寻找解决方案，但是苦于自己根本看不懂的 jQuery，Ajax等等的方法,故我尝试着去分析了一些同样采用如上脚本的json地址，发现是属于unpkg的,网上的解释是，由于unpkg存储的是静态资源的资源库，故不存在跨域。至此我对于资源的存放是否为静态存在着疑惑，究竟如何判断是否为静态？究竟怎样才会产生跨域问题。至此我一直得不到解释。在这里unpkg我不太会使用，好在github上有类似的功能，在release一个版本后会在jsdelivr上生成类似unpkg的路径。路径地址为

https://cdn.jsdelivr.net/gh/用户/库@版本号/资源路径

之后便所有都大功告成了！！！！

之后对于live2d的更多功能，我还在处于自己研究的状态，比如点击监听事件的发生，隐藏或显示live2d亦或者更换皮肤等等。

以上便是我添加live2d的所有过程，可能的话会更新上面所说的功能的实现。

谢谢观看。φ(≧ω≦*)♪