干货：使用Spine制作柔性的骨骼动画详解
缘起
我们有一个需求，需要制作如下图所示的腿部弯曲动画。由于不能使用序列帧动画，若弯曲效果不理想则需全部重画，这会大幅增加美术的工作量，且序列帧动画的图片数量也会很多。经过一番寻找，我们发现骨骼动画工具Spine能完美满足需求，并且它支持众多游戏引擎，包括我们正在使用的Cocos2d-x。下文将简要介绍骨骼动画的一些基本术语，以及如何使用Spine制作柔性弯曲的骨骼动画。
一些基本概念
以下介绍骨骼动画的基础概念，方便对骨骼动画不太了解的读者（如技术人员）进行知识补充。熟悉骨骼动画的读者可直接跳过。
动画的基本原理
动画，从字面意思理解，就是能动的画，画面会随时间推移而变化，从而给人一种连续运动的感觉。在游戏中，动画大体有两种制作方式：逐帧动画和补间动画。
- 逐帧动画：每一帧都绘制一张图，然后按照一定速度（帧率，即每秒多少帧）播放这些绘制好的图片，以此达到动画效果。
- 补间动画：这种方式相对简便，它无需为每一帧都绘制图片，而是对一个“动”的形体设置关键帧，关键帧之间通过不同的插值算法自动补全中间帧形体的变化轨迹。
与逐帧动画相比，补间动画更节省图片，能减少动画运行时的内存占用和最终包的大小，同时也降低了原画的工作量，但画面表现可能略逊于逐帧动画。开发者需要权衡其中的利弊。
关键帧（key frame）
关键帧是指要动的形体发生“变化”，且我们手动记录这些变化的帧，其余的帧则称为补间帧。关键帧之所以“关键”，是因为每个补间帧上形体的形变参数都是程序根据其前后两个关键帧自动推导出来的。
例如，假设形体在第A帧的位置为PA，我们将这帧标记为关键帧，这个操作通常称为“K帧”。然后在第A + N帧，将形体的位置设置为PN，并在该帧进行K帧操作。这样就有了两个关键帧，当播放从A到A + N帧的动画时，会看到形体会从PA移动到PN。
骨骼动画（skeleton animation）
想象一下你坐在电脑前打字，手指和手腕在移动，而躯干保持不动，肘部固定在桌面上。这是因为骨骼驱动了肌肉和皮肤，从而完成了打字的动作。骨骼动画利用了这一原理，它是一种补间动画，由骨骼（bone）和蒙皮（skin/mesh）两部分组成。
蒙皮是素材，可看作一张贴图，它展示了动画的外在表现。骨骼本身不可见，但对其进行形变会带动蒙皮产生各种形变，从而呈现出较为真实的动画效果。
蒙皮动画（skinned animation）
通常情况下，一根骨骼会与一个贴图绑定，这根骨骼完全控制该贴图的形变。但由于是刚性绑定，在关节移动时容易出现裂缝。
随着硬件性能的提升，骨骼动画可以对贴图的每个顶点进行形变。一种称为蒙皮（skin）的圆滑三角形网格会绑定到骨骼上，其三角形的顶点会随骨骼的移动而相应移动。蒙皮上的每个顶点可以按照权重绑定到多个骨骼上，从而产生自然的拉伸效果。本文开头提到的腿部柔性弯曲效果就可以通过蒙皮动画实现。
权重（weights）
权重是一个关键概念，它是蒙皮上的顶点受到不同骨骼影响的因子，且所有权重的总和为1。
以弯曲肘部为例，肘部靠前臂上的一个皮肤点，主要受前臂骨骼影响，但也会受到上臂骨骼的一定影响。假设该点受到前臂骨骼的影响占总形变的80%，那么它的前臂骨骼权重为0.8，上臂骨骼对它的权重为1 - 0.8 = 0.2 ，因为其他骨骼对它的影响可以忽略不计。
权重表示蒙皮受到不同骨骼形变影响的占比，合理分配每个蒙皮顶点的权重至关重要。幸运的是，Spine可以自动计算权重，避免了繁琐的设置过程，并且能让我们直观地看到权重分布图。
如何利用Spine制作蒙皮动画
我们以一个男孩的手为例，介绍如何在Spine中制作这种柔性的蒙皮动画。
创建骨骼
首先要创建手部的骨骼，具体步骤如下：
- 确保左上角为SETUP模式。
- 确保选中右边视图中的根骨骼，创建骨骼时必须选中父骨骼。
- 单击左下角的Create按钮。
- 依次创建出5根骨骼。
创建蒙皮网格
接下来要给手部创建蒙皮网格（MESH），步骤如下：
- 单击创建骨骼的Create按钮，退出骨骼创建模式。
- 选中手部贴图（Attachment）。
- 勾选其底部的Mesh选项。
- 单击右下角的Edit按钮，呼出Edit Mesh菜单。
- 勾选Edit Mesh菜单中的Deformed选项。
- 单击Edit Mesh菜单中的Create按钮，开始在手部创建网格顶点。
- 可以单击Edit Mesh菜单中的Modify按钮对顶点进行位移。
设置网格点权重
我们需要给网格顶点设置各个骨骼的权重，步骤如下：
- 关闭Edit Mesh菜单。
- 确认勾选的还是手部的贴图。
- 单击左下角的Weights按钮，呼出Weights菜单。
- 单击Weights菜单底部的Bind按钮，绑定骨骼。
- 选择手部的五根骨骼，直到它们都出现在Weights菜单里，注意不同的骨骼颜色不同。
- 单击Weights菜单的Auto按钮或者按esc键，触发Spine的自动权重计算。
- 勾选Weights菜单的Overlay，查看绑定后的权重热力图。
让动画动起来
现在要让手动起来，这里只展示一个弯曲手臂的动画。
- 设置关键帧：在第1帧和第30帧设置关键帧，这两个关键帧对应的手臂位置相同，以便循环播放动画。具体步骤如下：
- 确保左上角的模式处于ANIMATE模式。
- 选中手部的五根骨骼（按住cmd键或control键依次点选）。
- 选中第0帧。
- 单击Rotate下的钥匙按钮，对手臂的旋转属性设置关键帧。
- 选择第30帧，重复上述设置关键帧的操作，使第30帧的关键帧与第0帧相同。
- 选择第15帧作为中间的关键帧，具体操作如下：
- 确保Rotate按钮被选中。
- 向上旋转5根骨骼到一个角度。
- 按下K帧按钮进行关键帧设置。
- 按下播放按钮预览动画。
额外说明，我还给另一只手、嘴巴、脸部和头发都制作了MESH，最终可以看到，Spine完美实现了文章开头提到的柔性弯曲动画。