我的自定義多交互live2d折騰經歷

在@m0d1 大佬的督促(?)下有了這篇復盤。不過因為可能很多地方講得不全面+理解不夠深入，故不打算把這篇當成是教程/指南，那就算是一個指北吧= =

（划重點：不是教程！不是教程！不是教程！

省流簡介：機緣巧合之下看到了stevenjoezhang/live2d-widget的多交互live2d，有點心動但是模型太少不太合口味；又是一個機緣巧合之下看到了Eikanya/Live2d-model中有收集解包食物語的live2d模型，發現了本命菜，頓時動力++，感覺能結合live2d-widget提供的cdn/api接口來將心儀的模型導入進去，折騰兩個晚上終於成功了嗚嗚嗚嗚嗚。

效果見我的個人hexo博客：https://c10udlnk.top/

P.S. 本篇指北面向melody主題（Molunerfinn/hexo-theme-melody: A simple & beautiful & fast theme for Hexo.）。

本篇指北涉及的Github項目：

• EYHN/hexo-helper-live2d: Add the Sseexxyyy live2d to your hexo!

• stevenjoezhang/live2d-widget: 把萌萌噠的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platform

• fghrsh/live2d_api: Live2D 看板娘插件 (https://www.fghrsh.net/post/123.html) 上使用的后端 API

• Eikanya/Live2d-model: Live2d model collection

模型准備

使用前人整理的模型

指路：Eikanya/Live2d-model: Live2d model collection

這里收集了提取自各種手游的live2d模型，強烈安利！

食用方法在對應文件夾里，這里我用的是他的食物語包（食物語的美工我瘋狂吹好嗎！），文件夾內說明是由於沒有配置文件需要在想用的模型文件夾內自行配置.model.json，具體在各項應該填什么都寫在下面代碼的注釋里了。

{ // 默認配置文件，這里用我用的100034_baozaifan為例
    "expression":[ // /模型/expression文件夾內的各文件
        {
            "file":"expression/chijing.exp.json",
            "name":"chijing.exp.json"
        },
        {
            "file":"expression/haixiu.exp.json",
            "name":"haixiu.exp.json"
        },
        {
            "file":"expression/kaixin.exp.json",
            "name":"kaixin.exp.json"
        },
        {
            "file":"expression/idle.exp.json",
            "name":"idle.exp.json"
        },
        {
            "file":"expression/nanguo.exp.json",
            "name":"nanguo.exp.json"
        },
        {
            "file":"expression/shengqi.exp.json",
            "name":"shengqi.exp.json"
        },
        {
            "file":"expression/wunai.exp.json",
            "name":"wunai.exp.json"
        }
    ],
    "model":"model.moc", // /模型文件夾的model.moc文件
    "motions":{ // /模型/action文件夾內的各文件
        "":[
            {
                "file":"action/fumaozi.mtn"
            },
            {
                "file":"action/idle.mtn"
            },
            {
                "file":"action/sikao.mtn"
            }
        ]
    },
    "textures":[ // /模型文件夾內的texture文件
        "texture_00.png"
    ],
	"physics":"moc/physics.json", // /模型/moc文件夾的physics文件
    "version":"Sample 1.0.0"
}

自此對某個模型的配置完成。

自己動手提取

當然，如果沒有在上面的倉庫里找到你想用的live2d模型，可以選擇自己動手提取，不過由於各種手游對live2d模型的文件規范不太一樣，故可能需要稍作修改。

動手提取的方法也很簡單，解壓手游的apk包，然后在assets文件夾（apk包里一般用來放原生資源的地方）內搜索live2d，看到類似名字的文件夾就是放着資源的地方，這里還是拿食物語做例子。

apk包解壓以后：

在./assets中搜索live2d有

可以看到這里的./live2dcharacter就是存放模型的地方，打開可以看到

這些就是我們的模型啦~

當然稍作修改的地方就靠自己了hhh，可以參考那個倉庫里多幾個文件夾的live2d的文件布局試試。

交互少的小白版live2d

接下來就分兩條路走啦，分別是交互少的小白版live2d和交互多的大白版(x)live2d。

本part面向懶得折騰 / 少交互就夠用的人群，如想使用博客效果中（https://c10udlnk.top/）這種live2d，直接忽略這里跳到下一個part就好。

按照melody主題提供的教程（額外依賴庫支持 | hexo-theme-melody），在blog的根目錄下運行npm install --save hexo-helper-live2d來安裝live2d插件。

然后按照EYHN/hexo-helper-live2d: Add the Sseexxyyy live2d to your hexo!這里的a方法添加自定義模型。

具體如下：

先在博客根目錄下創建一個/live2d_models的文件夾，

然后將剛剛下載的模型復制到該文件夾下：

然后更改/_config.yml，在末尾添加：

# 官方的默認例子，具體各項配置看倉庫的readme
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: 100034_baozaifan #要使用的模型名稱（文件夾名）
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7

然后更新博客就可以看到萌萌噠的live2d啦~

（溫馨提示：因為緩存刷新較慢，hexo d部署上去以后可能要好久才能看到效果，所以可以先用hexo s代替hexo d，調整完效果以后最后再用hexo d部署就好。）

如果看不到模型的話一定是因為沒配置好index文件（.model.json），手動指路$1.1

交互多的大白版(x)live2d

如果你之前運行過npm install --save hexo-helper-live2d安裝了hexo-helper-live2d插件的話，建議使用npm uninstall hexo-helper-live2d將其卸載，當然如果你想擁有兩只不同種類live2d，那當我沒說。

本部分有參考issue[第三方支持]加入一個更多功能的live2d · Issue #214，但是因為時間久遠/版本問題對有些細節稍作修改。

安裝live2d-widget

1. 下載stevenjoezhang/live2d-widget: 把萌萌噠的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platform中的各文件，並解壓到主題根目錄source文件夾下（以melody主題為例，解壓到/node_modules/hexo-theme-melody/source目錄下；有些主題的根目錄在/themes/主題名/source）。

   

2. 修改/node_modules/hexo-theme-melody/source/live2d-widget/autoload.js，將const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";改為const live2d_path = "/live2d-widget/";。

   

3. 在/node_modules/hexo-theme-melody/layout/includes/additional-js.pug文件末尾添加script(src=url_for('/live2d-widget/autoload.js'))

   

4. 在/_config.melody.yml末尾添加：

live2d:
  enable: true

至此便能看到項目本身自帶的模型了：

常用配置說明

模型的大小、位置、格式和文本內容等配置，需要自行設置/node_modules/hexo-theme-melody/source/live2d-widget中的waifu-tips.js 、waifu-tips.json和waifu.css，這里提一些各文件里常用的配置。

（這里如果用hexo s調整模型的話將會很方便，直接刷新就能看到最新效果）

在someFixedConfigs/live2d_cfgWithHexo放了一下自己的配置，主要針對melody主題改了一些selector，伸手黨替換文件后可直接食用。

waifu-tips.js

這里是模型加載啟動/點擊工具欄相應按鈕時的行為和文本內容定義，具體對應可以對照參考原模型的行為，比如

這個部分是用來顯示用戶點回本頁面時顯示的文本，其余同理。

waifu-tips.json

這里是除了上面js里定義的文本以外的其余文本內容，同樣可以對照參考原模型猜測來進行修改。

值得注意的是，這個文件里分了幾大塊，架構大概是：

{
	"mouseover": [{ // 鼠標懸停在某個特定元素時顯示的文本
		"selector": "...",
		"text": "..."
	}],
	"click": [{ // 鼠標點擊某個特定元素時顯示的文本
		"selector": "...",
		"text": "..."
	}],
	"seasons": [{ // 在特定日期顯示的文本
		"date": "01/01",
		"text": "..."
	}]
}

text這里很顯然是填顯示的文本。

date是指定的特定日期。

至於selector就類似於CSS里的CSS選擇器，是用來指定元素類型的。

這里可以直接用默認的，當然更建議自己更改（因為不同主題對不同元素的tag/class/id好多都不一樣，如果沒有自定義的話用起來很多都沒辦法觸發）。

waifu.css

CSS可以堪稱是改大小/位置/格式的重頭戲，想要讓模型按照自己的想法顯示在頁面上，就得在這一塊下功夫。

（當然，CSS有些設置和布局挺玄學的，發現加了某語句沒作用的情況建議自行搜索or多調試）。

這邊點幾個大概率需要配置的常用點，其他的可以自己查css的各種語法來調整，或者在倉庫的issue里查有沒有相同需求的（甚至可以自己提issue。

（#waifu #live2d這里強調是畫布大小，上面沒標清楚懶得改了hhh）

運用CDN添加自定義模型

當然，想要添加之前下載的自定義模型，走到這一步還不夠，還得往下多走一步。

感謝@Fxizenta 大佬的提醒，這里參考使用免費CDN服務加速Github博客_Shy_tom的博客-CSDN博客，用github的免費cdn服務來實現我們的自定義需求（順便加速）。

本來想着把api部署到博客本地上然后調用的，后來才想起來hexo博客是靜態博客（不能發response包= =），感謝大佬提前部署到服務器上但最后沒用上的api。

先把提供的api接口倉庫（fghrsh/live2d_api: Live2D 看板娘插件 (https://www.fghrsh.net/post/123.html) 上使用的后端 API）fork一下：

然后在本地把這個倉庫clone下來，方便通過本地更改

依次點擊，將git地址復制下來，然后在powershell運行：

git clone 剛剛復制下來的內容

等clone完成以后打開文件夾，需要關注的是兩個地方是live2d_api/model_list.json和live2d_api/model文件夾。

live2d_api/model_list.json里放的是需要展示的模型列表和剛換出來時的問候語：

{
    "models": [
        "model內的各模型文件夾名",
        ...
    ],
    "messages": [
        "對應的問候語",
        ...
    ]
}

比如我這邊分別在末尾新增煲仔飯相關：

live2d_api/model文件夾則存放着模型，在這里放入我們的自定義模型：

這里就要把模型文件夾內之前的.model.json文件名改成index.json，並且增加一些內容（這里依舊是以煲仔飯模型為例，需要更改的地方在注釋標出）：

{
    "expression":[
        {
            "file":"expression/chijing.exp.json",
            "name":"chijing.exp.json"
        },
        {
            "file":"expression/haixiu.exp.json",
            "name":"haixiu.exp.json"
        },
        {
            "file":"expression/kaixin.exp.json",
            "name":"kaixin.exp.json"
        },
        {
            "file":"expression/idle.exp.json",
            "name":"idle.exp.json"
        },
        {
            "file":"expression/nanguo.exp.json",
            "name":"nanguo.exp.json"
        },
        {
            "file":"expression/shengqi.exp.json",
            "name":"shengqi.exp.json"
        },
        {
            "file":"expression/wunai.exp.json",
            "name":"wunai.exp.json"
        }
    ],
    "layout":{ // 新增 調整模型位置及長寬
        "center_x": 0,
        "center_y": -0.16,
        "width": 1.8,
        "height": 2.5
    },
    "hit_areas_custom":{ // 新增 模型的點擊感應位置
        "head_x":[-0.4, 0.9], // 頭部判定
        "head_y":[0.4, 0.6],
        "body_x":[-0.4, 0.5], // 身體判定
        "body_y":[0.4, -0.9]
    },
    "model":"model.moc",
    "motions":{ // 有修改，新增觸發對應表情時的行為
        "idle":[ // 空閑時動作
            {"file":"action/idle.mtn"}
        ],
        "flick_head":[ // 點擊頭部時動作
            {"file":"action/fumaozi.mtn"}
        ],
        "tap_body":[ // 點擊身體時動作
            {"file":"action/sikao.mtn"}
        ]
    },
    "textures":[
        "texture_00.png"
    ],
	"physics":"moc/physics.json",
    "version":"Sample 1.0.0"
}

更改完以后將本地內容推上github上，在powershell的該目錄下運行：

git add . ; git commit -m "add new model" ; git push

然后在github倉庫這里release一下：

然后把/node_modules/hexo-theme-melody/source/live2d-widget/autoload.js中的：

改成：

cdnPath: "https://cdn.jsdelivr.net/gh/用戶名/live2d_api@版本號/"

比如我這邊就是：

（注意這里如果不行的話把用戶名的大寫都轉成小寫試試，可能是對用戶名的規范使用問題）。

然后更新博客就能看到想見的人啦~