引言
今天在查資料時，在這篇博客 Unity FSM 有限狀態機 看到了一個有趣的東西 ，屏幕右下角有一個二次元的模型，而且鼠標移到不同位置，模型會跟着動，點擊還會播放音頻。通過截圖使用 google 的圖片搜索，原來這個叫做 Live 2D ，最終找到了添加方式，可以在博客園添加，後來發現原來 hexo 也可以添加。
Live2D簡介
Live2D 是一種應用於電子遊戲的繪圖渲染技術，由日本 Cybernoids 公司開發。
Live2D共有兩個分支：Cubism（主要）和 Euclid（已停止開發）。若無特殊說明，Live2D均指Cubism分支。
工作原理
Live2D Cubism 的工作原理是通過將一系列的 2D 圖像進行平移、旋轉和變形等操作，生成一個具有自然動畫效果的可動人物模型。
博客園添加 Live2D
起源
這個做法的發源地是在 博客美化—給你博客添加一個萌萌的看板娘吧 這裏
似乎需要上傳多個文件內容： waifu.css 、waifu-tips.js 、live2d.js 和 flat-ui.min.css （若不加菜單可不引入此文件）。
配置
後來被簡化了許多，下面是精簡版的配置方法：
首先，需要申請博客園的 js 權限 ，步驟是：管理--》設置》--》js權限申請
然後，在 【頁面html代碼】編輯器中插入如下內容：
-
引入 live2d 的 js：
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script> -
初始化 js ，加載模型：
<script> L2Dwidget.init({ "model": { jsonPath: "https://unpkg.com/[email protected]/assets/shizuku.model.json", "scale": 1 }, "display": { "position": "right", //看板孃的表現位置 "width": 150, //小蘿莉的寬度 "height": 300, //小蘿莉的高度 "hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 }, "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 } }); </script>
最後，保存上面修改然後刷新頁面就能看到可愛的模型了。
換模型
假如希望換成其他的模型，可以修改 jsonPath 的路徑，格式爲：https://unpkg.com/2D模型全名稱@1.0.5/assets/模型.model.json ，可選的模型名稱有：
-
live2d-widget-model-chitose
-
live2d-widget-model-epsilon2_1
-
live2d-widget-model-gf
-
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
-
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
-
live2d-widget-model-haruto
-
live2d-widget-model-hibiki
-
live2d-widget-model-hijiki
-
live2d-widget-model-izumi
-
live2d-widget-model-koharu
-
live2d-widget-model-miku
-
live2d-widget-model-ni-j
-
live2d-widget-model-nico
-
live2d-widget-model-nietzsche
-
live2d-widget-model-nipsilon
-
live2d-widget-model-nito
-
live2d-widget-model-shizuku
-
live2d-widget-model-tororo
-
live2d-widget-model-tsumiki
-
live2d-widget-model-unitychan
-
live2d-widget-model-wanko
-
live2d-widget-model-z16
在這裏可以預覽各個模型的樣子：截圖預覽
最終效果
這是我在博客園添加之後的效果：cnblogs.com/linshuhe ，大概需要等幾秒鐘，因爲需要加載模型資源。
hexo 添加 Live2D
參考 hexo 官方文檔 hexo-helper-live2d/README/中文 中的操作，大致步驟如下：
-
安裝模塊：
$ npm install --save hexo-helper-live2d -
配置：
向Hexo的
_config.yml文件或主題的_config.yml文件中添加配置live2d: enable: true scriptFrom: local pluginRootPath: live2dw/ pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false debug: false model: use: live2d-widget-model-wanko display: position: right width: 150 height: 300 mobile: show: true react: opacity: 0.7 -
模型
按照官方的說明，可以將模型放在博客工程根目錄中，也可以通過 npm install 已經發布到 npm 上的模型。使用第二種方式的話，假如需要添加自定義模型，需要自己先製作發佈到 npm ，在 npm install 。因此我還是選擇使用第一種方式，步驟如下：
-
下載模型資源：
可以在這裏 live2dDemo 的 assets 目錄下獲取自己喜歡的模型，可以在這個 頁面 通過修改
modelName然後點擊GO!按鈕預覽模型。 -
在博客根目錄下創建目錄
live2d_models； -
進入該目錄，新建一個子目錄（名稱可自定義），並將模型複製到子目錄下；
-
將子目錄的名稱配置到上面的
_config.yml的module.use中。
-
最終效果
我直接選了一個模型，並集成到了我的 hexo 博客上，可以在這裏查看效果 linshuhe1.github.io 或 linshuhe1.coding.me，由於模型資源有點大（2M 左右），而且是從 github （.me 是從 Coding.net 上拉取，會快一些）上獲取資源，因此會有點慢。
小結
由於我本身就是做遊戲客戶端開發的，看到 Live 2D 就想到了 Spine 技術，都是使用少量資源的 2D 動畫技術，不難看出 Spine 的表現力沒有 Live 2D 強，但 Live 2D 似乎是比較耗 CPU 的方式。Live 2D 在很多日系遊戲中有被使用到，因爲 Live2D 適用於與玩家有交互性的遊戲，點擊某個區域有特定的反饋。當然，用於製作卡牌遊戲的 2D 動畫其實也是可行的方案。