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

原创 2017年01月10日 18:34:23

笔者介绍:姜雪伟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骨骼动画


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jxw167/article/details/54315566

2D动作手游-Spine骨骼动画

-
  • 1970年01月01日 08:00

Spine入门 之 认识界面

Spine入门 之 认识界面 2014年09月06日 所用版本 Spine试用版v1.9.17 大家好,我是笨笨,笨笨的笨,笨笨的笨,谢谢! 转载请保留原始链接:Spine 2D骨骼动画 ...
  • jx520
  • jx520
  • 2014-09-06 17:59:21
  • 6992

浅谈Unity自带的Animation与骨骼动画Spine的优劣

Unity自带Animation,Animator是可以实现精灵的变化,位置移动,位置旋转,精灵不同时间段的变换为其他精灵 骨骼动画Spine的优势是当游戏中人体复杂的动画体现,需要骨骼动画的存在...
  • BuladeMian
  • BuladeMian
  • 2016-12-05 19:56:11
  • 4039

spine之五——在程序中使用动画

游戏中人物的走动,跑动,攻击等动作是必不可少,实现它们的方法一般采用帧动画或者骨骼动画。 帧动画与骨骼动画的区别在于:帧动画的每一帧都是角色特定姿势的一个快照,动画的流畅性和平滑效果都取决于帧数的多...
  • yxtxiaotian
  • yxtxiaotian
  • 2016-05-08 08:41:25
  • 2501

Unity Spine 动画模糊问题解决办法

1、在项目开发中有时候我们会使用到美工给我们制作的Spine动画,在这里呢我就不先介绍如何使用Spine动画在unity,而是先写关于解决我在项目中遇到的问题,也就是Unity播放Spine动画模糊问...
  • wcluojiji
  • wcluojiji
  • 2015-03-18 11:06:55
  • 1645

导入动画 spine

导入动画 spine
  • cloud95
  • cloud95
  • 2014-11-18 14:38:21
  • 4335

iOS Xcode使用spine导出动画

这几天,APP需要添加一组动画,然后设计同事用spine导出了一些动画给我,下面就是我的探索添加动画的过程。 有几个需要注意的,大致上备注一下,在spine官网下载了Demo之后,跑了一下iOS 项...
  • JWheat
  • JWheat
  • 2017-08-16 09:43:11
  • 627

spine导出二进制文件怎么导入unity

spine动画导出的二进制文件(.skel)怎么导入unity。
  • CrazyApp
  • CrazyApp
  • 2017-05-19 16:51:33
  • 2664

cocos2d-js帅炸了之text学习【一 spinetext骨骼动画】

好炫酷哇! 1.什么是骨骼动画 当前有两种模型动画的方式:顶点动画和骨骼动画。顶点动画中,每帧动画其实就是模型特定姿态的一个“快照”。通过在帧之间插值的方法,引擎可以得到平滑的动画效果。在...
  • u014787301
  • u014787301
  • 2015-03-24 11:12:46
  • 2189

2015元宵节礼物——《刀塔传奇》骨骼动画查看器,开源啦!

2015元宵节礼物——《刀塔传奇》骨骼动画查看器,开源啦!
  • zym_123456
  • zym_123456
  • 2015-03-05 17:33:56
  • 3798
收藏助手
不良信息举报
您举报文章:谈谈Spine动画在产品中的应用
举报原因:
原因补充:

(最多只允许输入30个字)