Hexo博客增加live2d看板娘

啥是live2d

live2d是假3d，根据对应的输入，让模型播放原来设定好的不同的动画。

一个live2d项目至少包括几个元素：

• 纹理贴图 一般是生成几张1024*1024的合图以及一个合图配置
• 动作配置 后缀名为’.mtn’，配置着动画关键帧
• model配置 关联纹理贴图和动作配置

安装live2d

最简单的，还是shell里用npm安装。跑到博客根目录下，右键进入控制台，键入:

npm install live2d-widget

等安装完之后即可在博客的node_modules里找到新下载来的包。

安装npm库中的live2d模型

这里假设要安装模型中的看板娘haru。同样是npm安装：

npm install live2d-widget-model-haru

之后同样在node_modules里找到live2d-widget-model-haru这个文件夹。

下载下来之后发现有01和02两个子文件夹，里边的package.json都是空的，于是把外头的package.json复制进两个子文件夹覆盖。

接下来讲怎么配置。

配置live2d

找到项目配置文件_config.yml，在其中插入

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-haru/01
  display:
    position: left
    width: 150
    height: 300
  mobile:
    show: true

详细的配置说明书参见：github

注意其中的model字段，路径得是你资源中assets文件夹所在的目录。在haru例子中，文件夹大概为

-- live2d-widget-model-haru/
    -- 01/
        -- assets/
            -- moc/
            -- mtn/

所以，路径就应该为live2d-widget-model-haru/01。

另，mobile.show字段可以控制看板娘是否在手机端显示。

寻另外的live2d模型

live2d模型可以在这个地方找到。

这里以bilibili的看板娘22酱为例，解释怎么把它变成我们的live2d插件能读的样式。

首先观察到最简单的live2d-widget-model-wanko模型（自己npm可以下载到）中的文件夹内容大概是这样：

-- live2d-widget-model-wanko/
    -- assets/
        -- moc/
            -- wanko.1024/
            -- wanko.moc
        -- mtn/   whic means motion
            -- *.mtn
        -- wanko.model.json

现在来动手改动它：

1. 解压完bilibli娘之后，先创建一个文件夹live2d-widget-model-bilibili，并创建一个assets目录，然后从wanko那边复制过来一个package.json。
2. 进入原资源的assets/22目录
3. 把其中的22.1024文件夹和22.v2.moc文件复制到live2d-widget-model-bilibili/assets/moc中
4. 把原资源中motions文件夹里的文件复制到live2d-widget-model-bilibili/assets/mtn中
5. 选择22文件夹中任意一个json文件（代表着22娘的不同装扮）复制到live2d-widget-model-bilibili/assets/中，并更名live2d-widget-model-bilibili.model.json（与本工程同名）

6. 更改live2d-widget-model-bilibili.model.json，可以看到里面的路径都是不对的，需要更改路径，譬如

   "textures": [
       - "model": "22.v2.moc",
       + "model": "moc/22.v2.moc",
       // 加上moc/路径前缀
       - "22.1024/closet.default.v2/texture_00.png",
       + "moc/22.1024/closet.default.v2/texture_00.png",
       "idle": [
           {
               - "file": "22.v2.idle-01.mtn",
               + "file": "mtn/22.v2.idle-01.mtn",
               "fade_in": 2000,
               "fade_out": 2000
           },
       ],
   ]

   主要改动三个地方：model路径、纹理路径、motion文件路径。

把这一切做完之后，把live2d-widget-model-bilibili文件夹丢到我们博客的node_modules里边去。

最后，在项目配置文档中把model字段改成live2d-widget-model-bilibili，完事儿。