關於在部落格園添加live2d的二三事

• 2019 年 11 月 5 日
• 筆記

首先我是一個沒有學過任何前端語言的人，所以對於添加自己喜歡的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資源（百度Google啥的都搜不到），但是我發現了一款遊戲用著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的所有過程，可能的話會更新上面所說的功能的實現。

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