live2d

给hexo博客添加Live2d小人

1.安装 hexo-helper-live2d 插件

1

npm install --save hexo-helper-live2d

2.在根目录下config.yml 添加以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# live2d
live2d:
  enable: true  # 是否启动
  scriptFrom: local # 默认
  pluginRootPath: live2dw/  # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/  # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/  # 模型文件相对与插件根目录路径
  tagMode: false  # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false  # 调试, 是否在控制台输出日志
  model:
    use: nepmaid  ## 模型文件
  display:
    position: right # 定位方向 left right top bottom
    width: 150  # 小人宽度
    height: 300 #  小人高度
    hOffset: -15  # 向 偏移
    vOffset: -15  # 像 偏移
  mobile:
    show: false  # 手机端是否显示
  react:
    opacity: 0.7  # 模型透明度

3.EYHN/hexo-helper-live2d: Add the Sseexxyyy live2d to your hexo! (github.com)上下载live2d-widget-models-master包

4.在根目录下新建名为live2d_models的文件夹，复制 live2d-widget-models-master > packages > 中任意模型包到该文件夹下，如该图为miku模型

5.回到 config.yml

1
2

model:
  use: live2d-widget-model-miku  ## 改为你使用的模型文件名 

Live2D 入门

0.对已有部件不满意的替换方法收集

SAI图片导入方法

1.从文件里直接打开图片，拖拽到画布上。

2.文件-打开-选择需要打开的图

3.不同窗口的，将想要的图片的窗口变小，然后长按图层，拖拽到另一个画布。

Live2D更新图层方法

文件->打开文件(Ctrl+O)->选择psd文件(文件中图层内容都要同名)->原模型->替换

1.准备：图片分层

总体：头发、脸、身体

• 头发：前发、两边的头发(双马尾)、后发、呆毛(如果有的话)

画画的时候原画被遮住的部分也不要忘记画出来。如果没有画的话，这部分在动的时候可能会看到图层断层，容易穿帮；

• 脸：眼睛、鼻子、眉毛、嘴巴、轮廓、耳朵
  • 眼睛：眼睑、眼珠、眼白
    • 眼睑：外眼角、眼睫毛(上睫毛、下睫毛)
    • 嘴巴：上嘴唇(需要给口腔内部的移动预留画出皮肤)、下嘴唇(需要给口腔内部的移动预留画出皮肤)、口腔内部
    • 轮廓：需要把有头发的部分用肌肤的颜色补充好，再把头部轮廓补完整，
• 身体：脖子、躯干、手臂、腿部
  • 脖子：为了脖子在脸部动的时候不会出现断层，把脖子画到嘴巴的距离比较好
  • 躯干：保留部分肩关节好做手臂的摆动；躯干里有像缎带等想要动的地方的话，将它单独分图层出来
  • 手臂：以肩、肘两个支点将手臂分为大臂和小臂
  • 腿部：裙子、左脚、右脚

(使用PS)导出为PSD文件的时候，记得将线稿和上色区域图层合并到一起，然后把分层的图层大致分组，以便于在Live2D软件里更好地管理。

PS中似乎有Live2D导入用的脚本。

2.导入以及初级布线

导入并开始布线：导入PSD文件 - Ctrl+A全选 - 点击Auto自动布线按钮 - 标准形式布线

进入编辑模式细化布线：点击想要手动调整的图层 - Ctrl+E进入编辑模式，进行点的添加和删除

取消原有的布线：

工具栏的橡皮-擦掉想要删除的点(橡皮的大小可以按P在画布上左右拖动变更)

在选择橡皮以外的工具的情况下按住Ctrl在画布上拖动+Delete,可以选择多个顶点删除

添加自己的布线：

选择对象(比如眉毛)-选择”追加顶点”图标(钢笔头+加号)，在画布上点击就可以添加顶点了

（会自动在点之间生成线）

添加错点的时候，选择”删除顶点”图标(钢笔头+减号)，点击想删除的点即可

在添加点的时候按住Alt也可以删除点

打好点后想要连线的话，按”自动连接”就可以自动连线

生成了想要的形状后，在画布上方点击”√”按钮保存操作

布线方式：

(一定要用网格将图像包裹好)

做出好看的正三角形；

注意按中线划分打点；

参考官方示例模型；

供参考的三种部位布线方式：

3.给角色添加动作

(1)将眼睛以外的部分锁定起来

(2)以左眼为例，按住Ctrl复选所有左眼部分；

找到”参数”栏，单击”左眼开闭”(这一栏背景变灰表示被选中)，选中后单击上方”追加两点”，再在”显示面板菜单”开启”锁定默认的形状”

(3)将双眼眼球和眼白隐藏，在参数栏中将左眼开闭

(4)数值调为0，在这样的状态下制作闭眼的变形；

(5)只选左眼上睫毛，点击上方栏”变形路径”，沿着布线加点

返回选择，选择的点变为红色，拖动红色的点绿色的点位不会动，这样变使变形操作更加方便了。

(6)大致的形状做好了之后，返回”变形路径”，在”工具细节”栏中选择删除变形路径；再直接移动小点细调形状。

(7)主要的眼睑变形完成了。试试用参数移动（拖动参数-左眼 开闭）

(8)使用剪切蒙版 让闭眼的时候眼球看不到

首先选择眼白部分，监视窗里显示了其ID，复制下来；

再在眼球的检视面板里，粘贴到”剪贴ID”一栏中；

这样眼球就作为眼白的剪切蒙版了。

然后是眼白变形。变形前记得追加两点/锁定默认的形状

(8)眉毛变形 - 选择左/右眉 - 参数-左眉上下 - 追加三点

先将绿点移到最左端，制作皱眉：眉毛中部往下拉，靠眉心处向下幅度大些；

再将绿点移到最右端，制作惊讶状：整体向上拉，幅度 靠眉心处眉中部>眉心>眉尖；

(9)嘴变形

多选 上唇、下唇、口中

参数 嘴开闭；追加两点，0为闭嘴，1为张嘴；

先从上嘴唇入手，变形路径编辑加点：这次给皮肤部分也加上点，这样拖动嘴唇轮廓的时候就不会移动皮肤造成肤色变化了

参数调0，将上唇微笑的形状拉出来，再拉平；下唇同理

然后再使口腔内部可见，可以给口腔内部也做变形。

这时大概率会发现上下唇变形后遮不住口腔内部部分区域，需要利用先前准备好的皮肤部分进行拉伸来盖住；

4.变形器

将变形对象放入变形器来制作动画；

4个动作：头左右动；头发摇动；手臂动；身体倾斜；

(1)创建旋转变形器

部件：锁住 脖子、双手、躯干、双足；再Ctrl+A全选；再选择 创建旋转变形器

补充加入变形器的方法：选择变型对象->检视面板->变形器 栏 中选择

变形器可以按住Ctrl 移动变形中心位置

(2)使用旋转变形器制作脸部倾斜

部件：头部旋转变形器

参数：角度Z

追加3点

旋转变形器移动到下巴正上方一点点

参数拉到最右边的点；检视面板：角度10.0度

参数拉到最左边的点；检视面板：角度-10.0度

脸部倾斜完成；

(3)使用弯曲变形器制作头发晃动

选择部件”前发”，上方栏-创建弯曲变形器

部件：前发摆动弯曲变形器

编辑级别：2（1为精细改动，3为大改动）

追加3点

点在最左端->头发往左拽

点在最右端->头发往右拽

后发、侧发 同理。

头发晃动完成。

(4)使用旋转变形器制作手臂摆动

选择部件”左手”，添加旋转变形器，移动变形器至肩关节下方一点点，旋转指针与手臂同向。

部件：左手旋转

检视面板：点击”设置基准角度”

参数面板下”+”号：新建参数

命名ID：左手ID+Arm

因为只想向上抬一点，所以范围取0~30度

部件：左手旋转变形器

参数：左臂 角度；追加2点

右手同理。

(5)身体的倾斜、上下动作

部件(全部解锁) - Ctrl+A全选 - 创建弯曲变形器 -

先什么都不选 - 点击创建弯曲变形器，创建一个空变形器

Live2D 给部件进行分类

“部件”区域 - 添加新部件，生成的便是空文件夹

111111