您當前位置：首頁 > php開源 > 綜合技術 > 談談Spine動畫在產品中的應用

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

來源：程序員人生發布時間：2017-02-24 10:40:41 閱讀次數：7432次

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

這是3個文件大小總計：1百多K，非常小，Spine就是解釋這個json文件和atlas文件。

我們公司也開了1款人臉辨認追蹤的產品，使用上述文件的效果以下圖所示：