谈谈Spine动画在产品中的应用

笔者介绍：姜雪伟，IT公司技术合伙人，IT高级讲师，CSDN社区专家，特邀编辑，畅销书作者，国家专利发明人;已出版书籍：《手把手教你架构3D游戏引擎》电子工业出版社和《Unity3D实战核心技术详解》电子工业出版社等。

Spine是1个2D的骨骼动画编辑器, 由于其良好的UI设计及完全的功能而被开发者追捧。Spine动画已广泛的利用在游戏开发或APP中，做2D开发的，之前做动画采取的都是采取序列帧播放的，如果动画播放的效果好，需要制作的序列帧图片比较多，图片的数量多会致使包体急剧增大，对用户体验来讲非常差，如何使用好的效果并且能减少包体大小，这时候就显示出Spine的优势了，Spine是专门为2D动作做的编辑器，如果需要使用正版的，要购买序列号，编辑器效果以下所示：

Spine 能将项目中的动画导出为 JSON 或2进制格式文件，它们能在 Spine 运行时库中完善的再现。 Spine 同时还可以导出 GIF 动画， PNG 或 JPG 序列图，还有 AVI或 QuickTime 的视频文件。

它开发了多款针对不同引擎和语言的库，详情查看以下网址：

https://github.com/EsotericSoftware/spine-runtimes

市面上比较火的引擎有Unity3D和Cocos2d-x，Spine都有对应的版本开发。

Cocos2d-x引擎开发的游戏目前大部份都是使用Spine工具制作的，它只有3个文件组成：图集png，json文件包括骨骼信息，atlas文件包括spine图集中的各部份图片的位置信息，比如UV坐标，旋转等。

json文件信息：

{"skeleton":{"hash":"y8la0z0sAMdMiq3cqsdvZoRIAiQ","spine":"3.4.02","width":905,"height":1142.45,"images":""},"bones":[{"name":"root"},{"name":"fadai","parent":"root"}],"slots":[{"name":"人物参考1","bone":"root"},{"name":"fadai","bone":"fadai","attachment":"2d_C001_png01"},{"name":"2d_C001发带/2d_C001_dj01","bone":"root"},{"name":"2d_C001发带/2d_C001_dj02","bone":"root"},{"name":"2d_C001发带/2d_C001_dj2","bone":"root"},{"name":"2d_C001发带/2d_C001_dj3","bone":"fadai"},{"name":"2d_C001发带/2d_C001_dj4","bone":"fadai"}],"skins":{"default":{"fadai":{"2d_C001_png01":{"x":76.71,"y":111.84,"width":905,"height":764}}}},"animations":{"animation":{}}}

2d_C001_dj01.png
size: 909,768
format: RGBA8888
filter: Linear,Linear
repeat: none
2d_C001_png01
  rotate: false
  xy: 2, 2
  size: 905, 764
  orig: 905, 764
  offset: 0, 0
  index: ⑴

这是3个文件大小总计：1百多K，非常小，Spine就是解释这个json文件和atlas文件。

在类似相机软件中也有相同的利用，比如FaceU软件使用的就是序列帧，致使后期的包体会很大，其实完全可以通过Spine动画对其进行改进。笔者在CSDN学院专门做了1款类似刀塔传奇的横版游戏使用的就是Spine动画，课程观看地址：《2D动作手游-Spine骨骼动画》