引言

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

?

Live2D簡介

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

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

工作原理

Live2D Cubism 的工作原理是通過將一系列的 2D 圖像進(jìn)行平移、旋轉(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 ，大概需要等幾秒鐘，因?yàn)樾枰虞d模型資源。

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 然后點(diǎn)擊 GO! 按鈕預(yù)覽模型。

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

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

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

最終效果

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

小結(jié)

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

?

參考

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

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

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

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

總結(jié)

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

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