看板娘与自定义看板娘

原作者项目:GitHub - stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platform

我的改进:

  1. 把文件存储在hexo本地,提升看板娘的访问速度
  2. 去除看板娘复杂的模型,更加轻便,同时可以自定义看板娘

下载依赖

首先将依赖文件存放在本地,下载下面的资源到本地的..\themes\butterfly\source,并且命名为live2d-widget-master

GitHub - stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ |用于网页平台的Live2D小部件

image-20221214093730408

而后打开链接https://moonshuo.cn/live2d-widget-master/autoload.js

下载作者的js文件,替换live2d-widget-master文件夹下的文件

image-20221214094250415

下载依赖的模组

点击下载下方的链接live2d: 看板娘动态动画,可以为网页增加相应动作 (gitee.com),并且命名为live2d_api,也放在..\themes\butterfly\source下面

image-20221214094735228

打开主题配置文件,复制以下的代码到其中

1
2
live2d:
enable: true

在butterfly主题中引入js文件

1
- <script defer src="/live2d-widget-master/autoload.js"></script>

现在hexo三连即可查看效果

更换模组

下面作者给出几个网址,大家可以进行下载

https://gitee.com/rao_she/live2d_models_collect

海王星系列、初音未来、雷姆、凉风青叶、尼禄、薇尔莉特、小埋、樱花庄、玉藻前等资源模型包(.moc)

链接:https://pan.baidu.com/s/1KV4Zg8dsDKV75uL5V5Mn0Q
提取码:bivj

舰娘live2d模型合集是提取自舰娘colletion游戏里的live2d模型,里面有很多模型,足够你研究一段时间

链接:https://pan.baidu.com/s/1QPrMhc9HABN22ds7pR8vOg
提取码:gyuy

下载完毕模型包之后,我们找到自己想要的模型,找到他的下一次文件结构为如下,将json文件更改为index.json文件,现在这个模型只能转换.moc模型,关于.moc3文件也可以使用,但是比较复杂

image-20221214095420277

我们将整体模型包重新命名,然后将其复制移动到..\themes\butterfly\source\live2d_api\model文件下

image-20221214095641465

更换引用

打开..\themes\butterfly\source\live2d_api\model_list.json,model下面我们放自己想要加的model文件夹的名称,而message则是这个任务出现之后第一局话

1
2
3
4
5
6
7
8
9
10
11
{
"models": [
"welt",
"histoire"
],
"messages": [
"在下薇尔莉特·伊芙加登,欢迎来到主人的博客",
"欢迎来到我的主人的博客,旅行者"

]
}

如果位置大小不正确,我们可以打开刚刚命名的index.json文件,添加并且自行更改下面的位置,而后也可以通过css文件更改配置

1
2
3
4
5
6
7
8
9
10
11
   "layout":{
"center_x": 0,
"center_y": 0,
"width": 1.8
},
"hit_areas_custom":{
"head_x":[-0.35, 0.6],
"head_y":[0.19, -0.2],
"body_x":[-0.3, -0.25],
"body_y":[0.3, -0.9]
},

博主的css配置下载,替换..\themes\butterfly\source\live2d-widget-master下面的waifu.css文件

css链接:https://moonshuo.cn/live2d-widget-master/waifu.css