我的自定义多交互live2d折腾经历

2023-12-28 12:52:10

在@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@版本号/"

比如我这边就是：

（注意这里如果不行的话把用户名的大写都转成小写试试，可能是对用户名的规范使用问题）。

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

码农公寓

我的自定义多交互live2d折腾经历

模型准备

使用前人整理的模型

自己动手提取

交互少的小白版live2d

交互多的大白版(x)live2d

安装live2d-widget

常用配置说明

waifu-tips.js

waifu-tips.json

waifu.css

运用CDN添加自定义模型

码农公寓

模型准备

使用前人整理的模型

自己动手提取

交互少的小白版live2d

交互多的大白版(x)live2d

安装live2d-widget

常用配置说明

waifu-tips.js

waifu-tips.json

waifu.css

运用CDN添加自定义模型

相关文章