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

c10udlnk發表於2021-05-03

在@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專案：

模型準備

使用前人整理的模型

指路：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，但是因為時間久遠/版本問題對有些細節稍作修改。

下載stevenjoezhang/live2d-widget: 把萌萌噠的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platform中的各檔案，並解壓到主題根目錄source資料夾下（以melody主題為例，解壓到/node_modules/hexo-theme-melody/source目錄下；有些主題的根目錄在/themes/主題名/source）。
修改/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/";。
在/node_modules/hexo-theme-melody/layout/includes/additional-js.pug檔案末尾新增script(src=url_for('/live2d-widget/autoload.js'))
在/_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@版本號/"

比如我這邊就是：

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

然後更新部落格就能看到想見的人啦~

laravel 5.5 折騰 node 15 的經歷
2020-11-29
Laravel
node v15.3 折騰 laravel 5.5 的經歷
2020-11-29
Laravel
小白折騰伺服器（七）：自定義介面錯誤響應格式
2019-03-04
伺服器
微信小程式API互動的自定義封裝
2021-01-17
微信小程式API封裝
Vue的自定義滾動，我用el-scrollbar
2019-02-16
Vue
iOS 自定義的卡片流互動控制元件
2018-03-03
iOS控制元件
我經歷的全球移動辦公 297 天。
2022-12-06
小白折騰伺服器（六）：使用後置中介軟體自定義介面成功返回格式
2019-01-31
伺服器
Flutter自定義折線圖並新增點選事件
2018-11-21
Flutter事件
Flutter手勢互動+自定義繪板元件v0.01
2019-07-15
Flutter元件
我的前端學習經歷
2018-10-08
前端
waydroid折騰
2024-08-31
折騰·序
2022-11-18
Swing 自定義JTable 多選框自動選擇的錯誤
2019-01-18
折騰日記
2024-07-18
聊聊我所經歷的遊戲公司
2019-04-24
遊戲
我的Go語言學習經歷
2021-02-07
Go
我們被一個 kong 的效能 bug 折騰了一個通宵
2022-07-26
分享我曾經的學習和找工作經歷
2019-03-04
記一次微信自定義分享debug均為true但是分享失敗的經歷
2018-12-26
UGNX折騰筆記
2024-03-18
筆記
折騰 HomeStead 配置xdebug
2020-12-24
[Android]多層波紋擴散動畫——自定義View繪製
2019-03-04
Android動畫View
自定義構建互動式SSH應用程式，用Python為大家舉例
2019-09-23
Python
自定義springboot啟動器
2020-11-22
Spring Boot
XAF自定義啟動頁
2020-12-19
自定義控制元件之kotlin繪製折線圖和曲線圖
2018-08-02
控制元件Kotlin
自定義有多個按鈕節點的SliderView
2018-07-10
IDEView
Python 多程式的自定義共享資料型別
2018-09-26
Python資料型別
Java自定義異常的建立及多層呼叫
2020-12-16
Java
如何應用多媒體互動展廳的互動技術
2021-09-02
DedeCMS的checkbox多選欄位自定義取值的方法
2020-06-16
我的Windows10下的WSL的使用經歷
2023-10-26
Windows
如果我想自定義laravel 郵件驅動應該如何實現
2020-08-19
Laravel
搞定動畫之 JQuery 中的自定義動畫
2020-11-05
動畫jQuery
Oracle RAC的自定義service自啟動
2020-06-04
Oracle
【朝花夕拾】Android自定義View篇之（十一）View的滑動，彈性滑動與自定義PagerView
2019-07-19
AndroidView
記一次我的 MySQL 調優經歷
2019-05-27
MySql