筆者介紹：姜雪偉，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文件信息：

{"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: -1

這是三個文件大小總計：一百多K。很小，Spine就是解釋這個json文件和atlas文件。

在相似相機軟件中也有同樣的應用，比方FaceU軟件使用的就是序列幀。導致後期的包體會很大，事實上全然能夠通過Spine動畫對其進行改進。

筆者在CSDN學院專門做了一款相似刀塔傳奇的橫版遊戲使用的就是Spine動畫，課程觀看地址：《2D動作手遊-Spine骨骼動畫》

談談Spine動畫在產品中的應用