用live2d给博客加个卡哇伊的挂件

看到右下角的小东西了么,没有?是不是把侧栏打开了?还是没有?那再等等吧…加载有点慢额。其实这个东西好早就见过了,之前看bilibili直播在直播间旁边就挂着一只22还是33来着,点击还能有动画 戳这里,好好玩的,但一直不清楚怎么做的…后来在DIYGOD的博客上也发现了这个,就好好的查了一下这个小玩意儿~~


emm…. 这个插件最近升到3.0了,写这篇博客时还是2.0的,安装的时候要不指定下版本吧,新版功能我也不太清楚额…历史版本

另外推广下前段时间写的vscode的live2d插件 戳这里

Live2D

这东西来自于霓虹国的神奇脑洞官网,将二维物体通过位置转换或者形变达到模拟3D的效果。虽然比不上真实3D,不过也很有趣了

HEXO插件

在Github上正好有这个插件,就能够很方便的实现这个效果啦~~ 见右下角的那只小猫,以后可以云吸猫了

项目地址hexo-helper-live2d

这个插件已经自带了好些模型了,但是还是觉得不够怎么办呢戳这里,官方已经做了一个用于分享的库,只需要把对应的文件下载下来然后参照上方插件的README中的说明进行配置就能够看到效果了。(这里有个文件版本的问题,见下面)

模型文件版本的问题

这个插件是v2.1的,但是上面的库里面下的文件有的是3.0的所以需要转换。

下载下来的文件包应该是类似这样的两种结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 这种moc+json+文件夹材质的是2.x版本的工程文件

│ model.model.json // 模型json数据
│ model.moc // 模型文件

└─model.1024
texture_00.png // 模型材质贴图(不同分辨率用)

// json文件内容 是与当前目录的文件对应的
{
"type": "Live2D Model Setting",
"name": "makoto0",
"model": "makoto0.moc",
"textures": [
"makoto0.2048/texture_00.png"
]
}

// 还有一种仅只有单个的.cmox文件,这是3.0版本的项目文件,需要进行转换
yukari_model.cmox

2.x版本

对于第一种,很简单按照上面插件里面的README,在blog的根目录建立models的文件夹,然后将对应的2.x版本的文件包放进去,最后在config.yml中的model配置上填入对应的名称就ok了

3.0版本

这个版本的话,需要进行一下转换。首先要下几个东西

  1. Locale Emulator 用于跑各种日文软件的小工具,安装完后右击要打开的软件选择到Locale Emulator,并选择在日文环境下运行,就不会出现乱码
  2. Live2D Cubism Editor 3.1 安装的时候应该会乱码,不用管,装完用上方的工具打开就行
  3. Live2d-viewer 参照下载的说明就是需要先安装adobe air(下面有链接直接点击下载),然后下载这个双击安装。

全部安装好了,打开Live2D Cubism Editor 3.1(右击选择Locale Emulator,并选择run in japanses)
然后按照步骤

  1. 左上角ファイル、ファイルを開く,选择到.cmox的文件打开
  2. 应该会跳个框,不用管ok就行
  3. 左上角ファイル、組み込む用ファイル書き出し、mocファイル書き出し(2.1)
  4. 弹出的框框直接点OK,然后打开文件的目录下就会有类似上面说的2.x版本的那些文件了
  5. 然后的处理方法就和上面的2.x版本一样了