關於在博客園添加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的全部過程，可能的話會更新上面所說的功能的實現。

謝謝觀看。φ(≧ω≦*)♪