关于在博客园添加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的全部过程，可能的话会更新上面所说的功能的实现。

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