干货：使用Spine制作柔性的骨骼动画详解(DragonBones也能使用)

缘起

缘起是要实现一个需求，即寻找一个能制作如下图所示腿部弯曲动画的工具。

由于要求不能使用序列帧动画，因为一旦弯曲效果不理想需要全部重画，美术的工作量会很大，而且序列帧动画的图量也会很大。

一番寻找后，发现骨骼动画工具Spine可以完美的满足需求，并且其支持众多游戏引擎，包括我们正在使用的Cocos2d-x。

下文将会简略介绍骨骼动画的一些基本术语以及如何用Spine做出柔性弯曲的骨骼动画。

一些基本概念

以下将介绍一些骨骼动画的基础概念，便于对骨骼动画不甚了解的童鞋（比如技术）进行扫盲。已经熟悉骨骼动画的童鞋可以直接跳过。

动画的基本原理

动画，顾名思义，即是能动的画，画能随着时间的推移进行变换，从而给人产生一种连续在动的感觉。

在游戏里动画大体有两种制作方式：逐帧动画和补间动画。

逐帧动画即为每一帧画出一张图，然后通过按照一定速度（帧率，每秒多少帧）来播放这些画好的图，从而达到动画的效果。

补间动画则比较偷懒，它不为每一帧绘制一张图，而是对一个「动」的形体设置关键帧，而关键帧之间则通过不同的插值算法进行自动补全中间帧的形体的变化轨迹。

相比于逐帧动画，补间动画更加节省图片，使动画运行时的内存更少和最终包的大小更小，同时也减少了原画的工作量，但其画面的表现可能会略逊于逐帧动画。其中的利弊需要开发者进行平衡取舍。

关键帧（key frame）

关键帧其实就是要动的形体发生「变化」且我们手动记录这些变化的帧，剩余的其他帧则称为补间帧。

关键帧称为「关键」的原因就是每个补间帧上形体的形变参数都是程序根据其前后两个关键帧自动推导出来的。

假设形体在第A帧的位置为PA，我们将这帧标记为关键帧，这个动作一般称为“K帧”。然后在第A+N帧，形体的位置我们设置为PN，我们在A+N帧进行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帧

• 重复第4步的操作，使第30帧的关键帧与第0帧完全相同

接下来我们只需轻轻旋转手臂，并在0-30帧中间找一个帧当做关键帧即可： 我们选择第15帧作为中间的关键帧。

• 选择第15帧

• 确保Rotate按钮被选中

• 向上旋转5根骨骼到一个角度

• 按下K帧按钮进行关键帧设置

• 按下播放按钮来预览动画

额外的，我给另一只手、嘴巴、脸部和头发都做了MESH，以下是动画的效果图：

可以看到，Spine完美的实现了文章开始提到的柔性弯曲动画。

以下是Spine的一些参考资料的链接：

Spine快速入门-官方中文

Spine用户指南-官方英文

Spine官方视频-英文Youtube

一个完整的Spine动画制作视频-中文优酷