纯干货！live2d动画制做简述以及踩坑

本文来自网易云社区，转载务必请注明出处。

1. 概述

live2d是由日本Cybernoids公司开发，经过扭曲像素位置营造伪3d空间感的二维动画软件。官网下载安装包直接安装能够获得两种软件，分别是Cubism Modeler和Cubism Animator，最后咱们还须要安装第三个软件Viewer用做预览调戏等。

因为仍是由2d图形制做，因此对动画师要求比较高，除去原画绘制能力，动画师还须要具备必定三维空间感，以及复杂逻辑能力（问什么要有逻辑能力，请看完= =）。

先简单说一下制做流程：

• psd原画切图

• 导入Cubism Modeler里蒙皮

• 设置蒙皮

• 导出到Cubism Animator里面制做动画

• 导出

搞定，这样就能获得一个活蹦乱跳的二次元小哥哥了。看起来十分简单，然而... ...

期间踩过的坑，可能比吃过的饭都多...

       

2.实例解析：

• psd原画切图

为何我每一个图层后面都标注了序号，由于免费版对图层数量有要求，不能超过30个，因此在切图的时候，请务必精打细算，重点摆在那里，是表情动画仍是四肢动画，哪里须要细致一些，哪里能够合在一块儿，算准了以后，在多数几遍，确保图层数目≤30就ok。

在live2d里贴图自动排列成这样。

切图没神马难点，下一步蒙皮其实也简单。

• 蒙皮

导入psd以后，会直接跳出蒙皮界面，左侧的数值能够本身调整，建议边界不要太大，但也不能过小，过小会切割原画，基本上不用手动设置，眉毛和嘴巴这种细长的部件能够手动多加几个点，也能够在后期制做的时候补上。

另外，若是不是太奇葩的原画，live2d内置了一些模板能够直接套用。

左边是万恶的蒙皮设置，就是前面说到须要较强逻辑的地方。

• 蒙皮设置

先了解一下几个简单工具。

1选择蒙皮点的工具，

2点选网格工具，

3.曲线蒙皮工具，多数用在头发，眉毛这样的细长部件上，适合制做飘动的物体使用。

4点开后能够创建旋转和网格的蒙皮，

区别是：

网格将部件按照格子的每一个点作绑定，网格的纵列数目能够本身调整。

旋转能够控制物体按照圆点进行总体位移或者旋转。

5.自由选择和柔选工具，柔选比较经常使用。

了解了工具以后，而后开始讲这个我十分不想讲的东西：

看下图四个板块

1是绑定树，能够直观查看部件与部件之间父级关系

2是部件+蒙皮图层关系，关联3

3能够设置部件或者蒙皮的ID（技术读取的关键），部位，透明度，图层等等

4考验动画师三维空间和逻辑关系的操控台（能够简单理解为设置部件位移范围的操做台）

psd文件在蒙皮关系所有整理完以后，大把的时间都花在第四个板块上，举一个“脸”讲一下：

里面有两个控制器（变形工具），以及自身蒙皮。

一个部件蒙皮后能够由多个控制器控制运动范围以及运动方式，如上图1，曲面主要控制3d空间的转面，回转控制绕圆心点的整个位移和左右轴旋转，而部件自身蒙皮的点能够单独操控精修弥补。

首先能够思考一下，脸的动画拆出来大概有点头抬头低头，向左看向右看，以及左右歪脑壳，转换到3d视角就是球体以自身为轴点的上下左右旋转，以及世界轴的X轴旋转位移（脖子是中心）。

注意一下，因为live2d实际上仍是个2d工具，因此3d里面的沿着世界轴X轴的旋转动画在live2d里面是Z轴动画。

咱们将原画角度设置为0点动画，选择第四板块中的角度X，点击后选择插入3点，其中，0点是原画角度，将绿色小点依次拖到最左边以及最右边后挪动控制器，（软件将自动记录挪动后的结果做为关键pose）而后将角度Y,角度Z也设置完，就能够调戏控制点玩（检查）了。

是否是看起来很简单，而后能够点开

参数左边的空格，能够愉快的多维度的继续玩（检查）了。

蒙皮的控制器们的父子关系是：旋转＞曲面＞曲线＞点

每个部件设置好以后都要记得检查，并检查他的上下级关系，若是下级部件没有被上级动画带动起来，那就必定是哪里出了问题。具体你们能够本身试着作一个完整的小动画尝试下，毕竟，只是一个脸仍是很简单的，否则你看下图：

还有下图：

是否是瞬间很迷... ...总之，蒙皮设置就到此为止，咱们接着下一步。

• 动画制做

打开Cubism Animator，将蒙皮文件直接丢进去，而后获得界面

1舞台

2动做文件夹

3时间轴

4控制器

首先在2里面新建一个动做文件，设置好文件名如：idle，在3里打开live2d参数，点击4里的操控器摆好第一帧pose，建议将全部部件都K上动做，而后复制这个初始动做文件继续能够继续制做下一个动做。

最后导出。对没错，动画制做就这么简单，并无什么难点，除了快捷键让人蛋疼以外...

经常使用快捷键：A回到第一帧，S前一帧，D后一帧，F播放，再按一次暂停，Z前一关键帧，X后一关键帧，C曲线。

• 导出

一个完整的文档应当包含如下内容:

其中几个比较重要的文件：

1.蒙皮等参数信息moc文件导出

Live2D Cubism Moc(*.moc)文件是用于为CubismSDK提供绘制数据的文件格式。这个文件包含了图层、参数、坐标系和组件，这四部分信息。一个Moc文件和一个图像文件（用于存储纹理），在理论上就可以提供重现角色所需的所有信息（这里不包括动做动画）。

2动画导出gif/序列帧

3动画导出技术可使用的js文件

注意下截图是两个软件。

踩过的坑和心得

• psd原稿过大记得先转化为智能对象再缩放。

• 不要再live2d里面修改尺寸，会很蛋疼，能够保留原来的文件，去psd里从新缩放拆好后，启用旧文件当作模板，能够减小返工时间。

• 记得检查控制器下部件动做的父子关系！！！！！

• 蒙皮时记得更改部件ID信息，方便技术读取。

• 蒙皮控制器两边的pose不满意能够右键整个删除回复初始pose从新制做（前提是已经保留了0点pose）

• 动画时间轴不要有空帧，工做区间必定要设置好，以下图是错误示范：

• live2d两个软件能够无缝衔接，psd不行。可是若是moc从新修改了建议动画文件关闭后再打开，能够自动更新最新蒙皮信息。

最后介绍一下Viewer软件的使用：

红框内把√取消能够去掉边框和背景

勾上红框可让小哥哥本身动

点击左上角的project→sample能够设置物理运算，让头发飘动更加天然，还有自带的微笑眨眼等等~~~

如上这样就能够获得一个本身心仪的小哥（姐）哥（姐）了~能够本身摆在PC/手机桌面玩耍，或者根据项目需求交给技术大佬能够实如今WEB端or游戏中使用。

本文来自网易云社区 ，经做者（网易雷火夏琰）受权发布。

网易云免费体验馆，0成本体验20+款云产品！

更多网易研发、产品、运营经验分享请访问网易云社区。

相关文章：
【推荐】 论用户体验测试：牛逼的功能千篇一概，好的体验万里挑一
【推荐】 如何实现最佳的跨平台游戏体验？Unity成亮解密实时渲染