简易live2d看板娘

hexo博客有简单的live2d看板娘插件，运行：

1
npm install hexo-helper-live2d

安装后博客会使用库中自带的看板娘模型，可以修改参数使用库中其他看板娘，但选择毕竟有限。教程

经查阅，hexo-helper-live2d已经停止维护，使用自定义的看板娘时只能使用.moc文件，不兼容.moc3文件，因此放弃。

live2d官网有定义接口的js文件，但冗长难懂。找寻半天，发现大佬自制插件oh-my-live2d，仍在积极维护中，可以支持.moc和.moc3文件。有工具就好办了，要实现自制看板娘还是先做出看板娘模型吧，于是打开live2d——

live2d模型制作

此处只做流程简要介绍，详细过程参考其他专业live2d教程。推荐教程

用PS画图，做好拆分，将每一个部件画完整然后合并为一个图层，做好命名，背景设置为不可见（透明）。最好将模型拉大或者裁剪一下，背景留空太多，后期也不好调整画布TvT

打开Live2D Cubism Editor 4.2，打开psd文件。

鼠标选中所有图层，自动布点。给眼瞳设置上眼白的剪贴蒙版。

添加变形。由于苯人使用free版live2d，每个图层只能绑两个参数喵~于是选择在呼吸动作上添加头发摇动，再给眼珠加上x、y轴的转动。打上三点关键帧（不打就会白给！），设置左右关键帧的变形即可。

添加纹理集，导出为.moc3文件，原模型保存为.cmo文件（存档便于修改）。导出时最好新建一个文件夹来存放，命名最好全英文，避免路径问题。

tips：

  1. 可以在Live2D Cubism Viewer 4.2中观察模型的结果，博客一般就使用默认参数动作（呼吸、眼珠转动、眨眼、身体旋转等），针对性制作模型。
  2. 在制作变形过程中发现图层需要画笔修改的时候，在live2d中是无法直接修改的！需要在原psd文件中修改，尽量保持图层顺序、命名的一致，在live2d中选择打开文件，打开修改好的原文件，然后选择现在的模型，再选择替换，即可。教程

使用自制live2d模型（.moc3）

安装插件：

1
npm install hexo-oh-my-live2d

我将模型文件夹live2d_models同时放在了根目录和Butterfly/source下。在博客根目录的配置文件_config.yml中添加代码。我使用本地模型文件，当然也可以使用cdn，：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
OhMyLive2d:
  enable: true
  CDN: https://unpkg.com/oh-my-live2d
  option:
    dockedPosition: 'left' # 模型停靠位置 默认值: 'right' 可选值: 'left' | 'right'
  # CDN: https://registry.npmmirror.com/oh-my-live2d/0.13/files/dist/index.min.js
  # option:
  #   # importType: 'cubism2' #  导入类型, 默认使用全量导入: complete , 可选值: complete, cubism2, cubism5
  #   libraryUrls: # 自定义 Cubism SDK 外部资源地址
  #     complete: https://registry.npmmirror.com/oh-my-live2d/latest/files/lib/complete.js
  #     cubism2: https://registry.npmmirror.com/oh-my-live2d/latest/files/lib/cubism2.js
  #     cubism5: https://registry.npmmirror.com/oh-my-live2d/latest/files/lib/cubism5.js
    # menus:
    # items: |
    #   (defaultItems)=>{
    #    return [
    #      ...defaultItems,
    #      {
    #        id: 'github',
    #        icon: 'github-fill',
    #        title: '我的github',
    #        onClick: ()=>window.open('https://github.com/hacxy')
    #      }
    #    ]
    #   }

    # items:
    #   - id: 'github'
    #     icon: 'github-fill'
    #     title: '我的github'
    #     onClick: ()=>window.open('https://github.com/hacxy')

    mobileDisplay: false # 是否在移动端显示
    models:
      - path: /live2d_models/lizhi/lizhi.model3.json
        position: [-30, -10] # 模型在舞台中的位置。 默认值: [0,0] [横坐标, 纵坐标]
        scale: 0.16 # 模型的缩放比例 默认值: 0.1
        # showHitAreaFrames: true # 是否显示点击区域 默认值: false
        stageStyle:
          width: 500
          height: 500
        mobilePosition: [0, 0] # 移动端时模型在舞台中的位置。 默认值: [0,0] [横坐标, 纵坐标]
        mobileScale: 0.08 # 移动端时模型的缩放比例 默认值: 0.1
        mobileStageStyle: # 移动端时舞台的样式
          width: 180
          height: 166
        motionPreloadStrategy: ALL # 动作预加载策略 默认值: IDLE 可选值: ALL | IDLE | NONE
        
    parentElement: document.body #为组件提供一个父元素，如果未指定则默认挂载到 body 中
    primaryColor: 'var(--btn-bg)' # 主题色 支持变量
    sayHello: false # 是否在初始化阶段打印项目信息
    tips:
      style:
        width: 230
        height: 120
        left: calc(50% - 20px)
        top: -100px
      mobileStyle:
        width: 180
        height: 80
        left: calc(50% - 30px)
        top: -100px
      idleTips:
        interval: 3600
        message:
          - 你好呀，我是木盖~
          - 欢迎来到我的小站~

这里注意路径，苯人曾因将_打成-而卡了半天orz

使用live2d需要hexo g加载一下再hexo s，在一开始hexo clean一下就更好了。

修改上面的参数适配自己的博客就大功告成了——

参考教程：

在Hexo博客上添加可爱的Live 2D模型(.moc/.moc3)_博客hexo添加live2d moc3-CSDN博客