引言

今天在查資料時，在這篇博客 Unity FSM 有限狀態(tài)機 看到了一個有趣的東西 ，屏幕右下角有一個二次元的模型，而且鼠標移到不同位置，模型會跟著動，點擊還會播放音頻。通過截圖使用 google 的圖片搜索，原來這個叫做 Live 2D ，最終找到了添加方式，可以在博客園添加，后來發(fā)現(xiàn)原來 hexo 也可以添加。

?

Live2D簡介

Live2D 是一種應(yīng)用于電子游戲的繪圖渲染技術(shù)，由日本 Cybernoids 公司開發(fā)。

Live2D共有兩個分支：Cubism（主要）和?Euclid（已停止開發(fā)）。若無特殊說明，Live2D均指Cubism分支。

工作原理

Live2D Cubism 的工作原理是通過將一系列的 2D 圖像進行平移、旋轉(zhuǎn)和變形等操作，生成一個具有自然動畫效果的可動人物模型。

?

博客園添加 Live2D

起源

這個做法的發(fā)源地是在 博客美化—給你博客添加一個萌萌的看板娘吧 這里

似乎需要上傳多個文件內(nèi)容： waifu.css 、waifu-tips.js 、live2d.js 和 flat-ui.min.css （若不加菜單可不引入此文件）。

配置

后來被簡化了許多，下面是精簡版的配置方法：

首先，需要申請博客園的 js 權(quán)限 ，步驟是：管理--》設(shè)置》--》js權(quán)限申請

然后，在 【頁面html代碼】編輯器中插入如下內(nèi)容：

• 引入 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/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json","scale": 1},"display": {"position": "right", //看板娘的表現(xiàn)位置"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

在這里可以預(yù)覽各個模型的樣子：截圖預(yù)覽

最終效果

這是我在博客園添加之后的效果：cnblogs.com/linshuhe ，大概需要等幾秒鐘，因為需要加載模型資源。

hexo 添加 Live2D

參考 hexo 官方文檔 hexo-helper-live2d/README/中文 中的操作，大致步驟如下：

• 安裝模塊：

  $ npm install --save hexo-helper-live2d

• 配置：

  向Hexo的 _config.yml 文件或主題的 _config.yml 文件中添加配置

  live2d:enable: truescriptFrom: localpluginRootPath: live2dw/pluginJsPath: lib/pluginModelPath: assets/tagMode: falsedebug: falsemodel:use: live2d-widget-model-wankodisplay:position: rightwidth: 150height: 300mobile:show: truereact:opacity: 0.7

• 模型

  按照官方的說明，可以將模型放在博客工程根目錄中，也可以通過 npm install 已經(jīng)發(fā)布到 npm 上的模型。使用第二種方式的話，假如需要添加自定義模型，需要自己先制作發(fā)布到 npm ，在 npm install 。因此我還是選擇使用第一種方式，步驟如下：

  • 下載模型資源：

    可以在這里 live2dDemo 的 assets 目錄下獲取自己喜歡的模型，可以在這個 頁面 通過修改 modelName 然后點擊 GO! 按鈕預(yù)覽模型。

  • 在博客根目錄下創(chuàng)建目錄 live2d_models ；

  • 進入該目錄，新建一個子目錄（名稱可自定義），并將模型復(fù)制到子目錄下；

  • 將子目錄的名稱配置到上面的 _config.yml 的 module.use 中。

最終效果

我直接選了一個模型，并集成到了我的 hexo 博客上，可以在這里查看效果 linshuhe1.github.io 或 linshuhe1.coding.me，由于模型資源有點大（2M 左右），而且是從 github （.me 是從 Coding.net 上拉取，會快一些）上獲取資源，因此會有點慢。

小結(jié)

由于我本身就是做游戲客戶端開發(fā)的，看到 Live 2D 就想到了 Spine 技術(shù)，都是使用少量資源的 2D 動畫技術(shù)，不難看出 Spine 的表現(xiàn)力沒有 Live 2D 強，但 Live 2D 似乎是比較耗 CPU 的方式。Live 2D 在很多日系游戲中有被使用到，因為 Live2D 適用于與玩家有交互性的游戲，點擊某個區(qū)域有特定的反饋。當(dāng)然，用于制作卡牌游戲的 2D 動畫其實也是可行的方案。

?

參考

• 博客美化—給你博客添加一個萌萌的看板娘吧

• 博客園主頁上添加Live 2D模型

• 五種技術(shù)選擇：2D手游美術(shù)實現(xiàn)方案分析

• hexo中next主題添加里lived看板娘（會說話，會換裝）

總結(jié)

以上是生活随笔為你收集整理的Hexo 和博客园添加 Live 2D 模型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。