Cocos Creator 基于 Spine 动画的 AVATAR 换装系统优化

很多游戏开发团队都正在使用 Spine 动画软件来制作人物 AVATAR 动画。今天，玩吧技术专家组的红孩儿将以玩吧 APP 中的游戏《噜噜喵》为例，同大家分享基于 Spine 动画的 AVATAR 换装优化，希望能够对有类似需要的小伙伴有所帮助。

作为一款广泛应用于游戏中的 2D 动画制作软件，Spine 提供了良好的骨骼动画功能和库接口来实现人物 AVATAR 动画。

自从 Spine 支持顶点网格以来，很多用来表现长发、长裙动画的身体部件，会使用比矩形区域更复杂的顶点网格来制作，以更好的体现部件中的摇动细节。这些部件从一个简单的四个顶点矩形区域，变成了由多行多列顶点组成的平面模型。顶点从左上到右下进行 UV 展开，映射到纹理图区域。在表现长发摇动，长裙摆动等细节动画时，只需要通过对相应位置的网格顶点进行移动就可以实现。

主角人物长发的网格

主角人物长裙的网格

在 AVATAR 系统开发中，我们经常会制作包含人物所有部件和动画信息的基础 Spine 动画，这个基础款的 Spine 动画纹理会使用所有部件的纹理拼图来优化批次，使得基础人物可以在1个批次完成动画渲染。

人物 AVATAR 换装的过程就是需要将对应身体部件的纹理区域换成新的图片。但在渲染 AVATAR 动画时，渲染批次在遇到需要切换纹理时就会被将之前使用基础拼图的顶点缓冲区提交进行渲染，然后设置新的纹理对部件进行渲染，这里会增加1次 DC，渲染完后再重新设置回之前的拼图纹理，继续后面的部件渲染。每替换一次不同部件的图片，总的批次都会增加。

这就麻烦了，如果不做优化，那 AVATAR 在实际使用时效率就是个完全不可控的黑洞了。一个人物身上往往几十个部件，如果不注意管控，运气好的话，百八十个批次就出去了。

伴随纹理图片的更替，部件的 UV 也需要按照新的图片纹理区间进行映射，部件的顶点 UV 从左上角到右下角只需要重新按照裁剪矩形信息（裁剪后矩形区域，原始图片大小，裁剪后左上角像素偏移）重新计算一下就可以了。这些信息在 atlas 文件中记录供读取使用。

懂得引擎优化的开发者也会对拼图进行空白边缘裁剪，以使得图片文件和游戏使用时显存占用得以减小。比如以下这个例子，未裁剪拼合贴图1680x1284大小，用 Spine 3.6 裁剪后完毕，变成1811x187大小：