纯干货！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+款云产品！
更多网易研发、产品、运营经验分享请访问网易云社区。
相关文章：
【推荐】 nej+regular环境使用es6的低成本方案
纯干货！live2d动画制作简述以及踩坑相关推荐
- 地图上制作线路的动画_纯干货：动画制作的十二个法则（上）
制作动画的十二个原则,不论是3D动画还是flash还是AE都适用. 首先先找到十二个妹子,演示用. 一:挤压与拉伸 通过挤压与拉伸赋予物体或角色弹性,使其更加灵动. 左为使用该原则的例子,右为对比. ...
- 【OpenGL】“我叫MT”纯手工3D动画制作之1——基础介绍
最近在家研习面经,温习基础,索性花些时间将本科期间完成的一些学习之作整理出来,分享之余顺便水点经验 其实这个事情起源于一门"计算机图形与动画(Computer Graphics & ...
- gif透明背景动画_干货 | H5动画制作技巧
近年来,H5页面火爆整个移动互联网,这些页面的炫酷展现,都离不开动画制作,而动效设计和制作早已成为一名合格设计师必须掌握的技能. 目前,设计师制作H5页面更多的是借助H5制作工具,本文将以H5制作工具 ...
- bootstrap缩小后div互相叠加_纯 JS 实现放大缩小拖拽踩坑之旅
点击上方"前端公虾米",选择"置顶或者星标" 你的关注意义重大! 前言 最近团队需要做一个智能客服悬浮窗功能,需要支持拖动.放大缩小等功能,因为这个是全局插件, ...
- android gradle权威指南pdf_干货 | 携程 Android 10适配踩坑指南
作者简介 曙光,携程资深软件工程师,负责市场营销相关研发及管理工作.2019 年 9 月 3 日,Google 发布了 Android 10 正式版.Android 10 聚焦移动创新.安全隐私和数字 ...
- ae制h5文字动画_绝对干货！H5动画制作方法全揭秘
原标题:绝对干货!H5动画制作方法全揭秘 近年来,H5页面火爆整个移动互联网,这些页面的炫酷展现,都离不开动效设计和制作,而动效设计和制作早已成为一名合格设计师必需掌握的技能. 目前,设计师制作H5页 ...
- 简述计算机动画制作流程,Mg动画制作流程——六大步骤
一个完整的mg动画制作流程是繁杂的,其中掺杂的细节很多,如果一个小小的细节没有做好,有可能就导致最终的动画成品展现效果不好,接下来就简要地罗列一下mg动画制作流程. Mg动画制作流程--六大步骤 Mo ...
- class转java_[拒绝套路，纯干货]这一百多道 Java 基础问题你掌握了吗？
码农每日一题长按关注,工作日分享一些技术知识点. [每日一题]Java 基本数据类型基础面试题 [每日一题]Java 包装类型装箱拆箱基础面试题 [每日一题]Java 字符串(Part 1)相关面试题 ...
- animiz动画制作软件_学习动画制作需要掌握的常用软件合集
影视动画越来越深入我们的工作和生活,其中动画的发展也深深吸引着我们的眼球. 在当下创作一部动画,大多已放下传统纸上动画的形式,开始尝试使用电脑绘图和3D方式来制作.所以,就让我们来看看常用的动画制作的 ...
最新文章
- 三代组装软件canu学习笔记
- 树莓派+百度api实现人脸识别
- CV：利用cv2(加载人脸识别xml文件及detectMultiScale函数得到人脸列表)+keras的load_model(加载表情hdf5、性别hdf5)并标注
- 1044 拦截导弹——http://codevs.cn/problem/1044/
- 在iOS的XCode工程配置中为什么要用-all_load-ObjC
- 老男孩linux运维50期
- 使用国密浏览器和使用Wireshark进行国密抓包
- java线程的优点_Java使用多线程的优势
- c#常用类库----计算机信息类
- java post get 请求
- [转载] python numpy np.exp()函数
- 求解偏微分方程开源有限元软件deal.II学习--Step 2
- 2019大一下学期第九周总结
- Netty 学习（二）：服务端与客户端通信
- Springboot发送美观的HTML邮件
- 数学：AI和大数据的基础
- Python enumerate，iter的用法
- 记一次与流氓的战争——卸载360安全卫士之后
- vmware之设置共享文件夹
- 清风电子—keil5，无法运行官方的代码程序，出现这样的错误显示 \objects\main.o:No such file or directory