笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,国家专利发明人;已出版书籍:《手把手教你架构3D游戏引擎》电子工业出版社和《Unity3D实战核心技术详解》电子工业出版社等。
Spine是一个2D的骨骼动画编辑器, 因为其良好的UI设计及完整的功能而被开发者追捧。Spine动画已经广泛的应用在游戏开发或者APP中,做2D开发的,以前做动画采用的都是采用序列帧播放的,如果动画播放的效果好,需要制作的序列帧图片比较多,图片的数量多会导致包体急剧增大,对于用户体验来说非常差,如何使用好的效果并且能减少包体大小,这时就显示出Spine的优势了,Spine是专门为2D动作做的编辑器,如果需要使用正版的,要购买序列号,编辑器效果如下所示:
Spine 能将项目中的动画导出为 JSON 或二进制格式文件,它们能在 Spine 运行时库中完美的再现。 Spine 同时还可以导出 GIF 动画, PNG 或 JPG 序列图,还有 AVI或 QuickTime 的视频文件。
它开发了多款针对不同引擎和语言的库,详情查看如下网址:
https://github.com/EsotericSoftware/spine-runtimes
市面上比较火的引擎有Unity3D和Cocos2d-x,Spine都有对应的版本开发。
Cocos2d-x引擎开发的游戏目前大部分都是使用Spine工具制作的,它只有三个文件组成:图集png,json文件包含骨骼信息,atlas文件包含spine图集中的各部分图片的位置信息,比如UV坐标,旋转等。
以下面信息分别表示的是图集,json文件信息,atlas信息。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":{}}}
atlas文件信息:
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: -1
这是三个文件大小总计:一百多K,非常小,Spine就是解释这个json文件和atlas文件。
我们公司也开了一款人脸识别追踪的产品,使用上述文件的效果如下图所示:在类似相机软件中也有相同的应用,比如FaceU软件使用的就是序列帧,导致后期的包体会很大,其实完全可以通过Spine动画对其进行改进。笔者在CSDN学院专门做了一款类似刀塔传奇的横版游戏使用的就是Spine动画,课程观看地址:《2D动作手游-Spine骨骼动画》