做一个 Live2D

前几天看到一个 blog，说做 live2d，然后我也想试试。很久以前就觉得有意思的，感觉不会难。

• 原 blog
• 罗小黑 blog
• 使用的 github 项目 pixi-live2d-display
• 在线查看 live2d 文件网站 Live2D Viewer

直接看效果展示，入口为首页中间的头像。

过程

看到这个 live2d，感觉植入网站不难，毕竟 sdk 已经做得很完备了。

那现在只缺一个 live2d 文件，应该也不难。

但实际操作下来，还是分成了几天完成一个很简单的效果。因为这个软件操作确实不好理解。

制作

通过查询，Live2d 制作软件，有且只有一款：Live2D Cubism Editor, 官网。这个可以直接个人下载，试用 pro 版本 42 天就行。过期后免费版本好像只有导出分辨率限制。

打开长这个样子，这里新建了模型。（比较恶心的是，打开固定有个启动窗口，然后这个窗口加载巨慢）

然后可以开始弄了，打开 b站 看教学视频，结果我看了几个感觉不是很好理解。教程比较新的也不多，多少好些年前的视频。

可能是老软件，我理解不了。尝试搜索有没有其它的制作软件，结果没有。

那么，我是前端，不一定非要自己做，想着定制一份吧

咸鱼

搜索 Live2d 模型定制，然后一通聊下来，至少都是 500 起。

咦，比较贵了，我就先学习为主，花这个价钱花不起。

画图

本想着用自己头像做就行，但是教程都是正身图，弄几次失败后，用 AI 生成正身图一点点来。

拆分

我习惯 figma，但是，figma 做的不行，必须要 ps 做的，然后在 editor 直接打开 psd 才行。

所以这里只能把 figma 用来文件管理

PS

下载 ps 比较麻烦，使用还出现了 bug，这里就换成了 在线PS，确实方便多了

然后在 PS 进行进一步拆分处理。

这里要注意：

• 下半身的脖子要网上多画一节
• 五官全部要单独拆出来

Editor

在 ps 网站直接 ctrl s 会直接保存一份本地文件

然后在 editor 直接打开这个文件，选择低于 5.2 版本，进入后切换 Cubism 4.0 SDK。

制作理论

我们这里只实现角色上下左右看，所以只需要关注参数的 角度XY, 这里注意 x: -30 是向左看，y:-30 是向下看，点击参数左边的连接 icon 可以 2维 操控。

教程中，都是使用给每个图片设置变形器的，但是这里的要求简单，就不创建了，一个个创建变形器也比较麻烦。

这个软件的逻辑是，不管你用不用变形器等，只要打上关键帧，你的操作就会被记录，你的更改也只能在关键帧的点上改。我这里就直接为所有图片创建新的网格（下半身不动就不用）。

网格选择“标准”，然后直接覆盖，默认的网格是方形，不方便变形。

关键帧

制作的时候只用单独制作角度 x，y，最后选择两个参数进行“四角形状合成”。没有合成之前四个角落是记录的初始值。

也是选择所有需要动的图片，创建关键帧（参数下面，3个点的绿图标）

右键直接选中帧，x -30，先将眼睛、眉毛、鼻子、嘴巴往左移动，耳朵合适缩放，脸部的画缩放加上一些阴影变形，需要直接调整里面的点，让阴影跟着运动拉伸。（如：脸部右下角的点变化）

头发也是，让它有个较为真实的角度变换。

细调需要耐心慢慢一遍一遍尝试。我这里就不再赘述。

镜像动作

x-30 之后，脸部的动画可以直接镜像到右边去，选择觉得可以直接镜像的图片，然后处于 -30 的帧下，点参数的右侧菜单选择“动作镜像”

如何还原变换

很可能操作不当，需要还原，他这里没有直接的还原命令，选择不要的变形，拖动帧回到 0 处，进行删除帧的操作，然后再创建帧。

导出

导出需要选择“运行时文件”，但是直接导出会提示没有“纹理集”，所以需要在 菜单-建模-纹理-纹理集 生成一份文件。

再进行运行时导出就行，导出的 png 图片可以压缩一下。

实现

这里就在本网站使用 cdn 外链 sdk 实现，效果展示

总结

这次做的很简陋，但依旧花了不少时间。能够理解 Live2D 的操作逻辑了。下次还有兴趣的时候，应该可以做的更好。

或许可以后面做一个 3d 的，或许会更简单。