我的自定義多互動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，具體在各項應該填什麼都寫在下面程式碼的註釋裡了。

image-20210502123326566

{ // 預設配置檔案，這裡用我用的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包解壓以後：

image-20210502122532979

在./assets中搜尋live2d有

image-20210502122614107

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

image-20210502122645889

這些就是我們的模型啦~

當然稍作修改的地方就靠自己了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方法新增自定義模型。

image-20210502124548048

具體如下：

先在部落格根目錄下建立一個/live2d_models的資料夾，

image-20210502124807487

然後將剛剛下載的模型複製到該資料夾下：

image-20210502125043478

然後更改/_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

image-20210502133515509

互動多的大白版(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）。

    image-20210502132028912

  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/";。

    image-20210502132526638

  3. 在/node_modules/hexo-theme-melody/layout/includes/additional-js.pug檔案末尾新增script(src=url_for('/live2d-widget/autoload.js'))

    image-20210502132743419

  4. 在/_config.melody.yml末尾新增：

live2d:
  enable: true

至此便能看到專案本身自帶的模型了：

image-20210502133414267

常用配置說明

模型的大小、位置、格式和文字內容等配置，需要自行設定/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

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

image-20210502134116740

這個部分是用來顯示使用者點回本頁面時顯示的文字，其餘同理。

waifu-tips.json

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

image-20210502134338823

值得注意的是，這個檔案裡分了幾大塊，架構大概是：

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

text這裡很顯然是填顯示的文字。

date是指定的特定日期。

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

image-20210502135731220

image-20210502214537634

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

waifu.css

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

（當然，CSS有些設定和佈局挺玄學的，發現加了某語句沒作用的情況建議自行搜尋or多除錯）。

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

image-20210502214904779

image-20210502215144485

image-20210502223056063

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

image-20210502223156816

運用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一下：

image-20210502234947049

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

image-20210502235141186

依次點選，將git地址複製下來，然後在powershell執行：

git clone 剛剛複製下來的內容

image-20210502235339823

等clone完成以後開啟資料夾，需要關注的是兩個地方是live2d_api/model_list.json和live2d_api/model資料夾。

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

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

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

image-20210503004236824

image-20210503004259238

live2d_api/model資料夾則存放著模型，在這裡放入我們的自定義模型：

image-20210503004534436

這裡就要把模型資料夾內之前的.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

image-20210503004750884

然後在github倉庫這裡release一下：

image-20210503005135961

image-20210503005325669

image-20210503005412152

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

image-20210503005704929

改成：

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

比如我這邊就是：

image-20210503010001354

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

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

image-20210503010713533

相關文章