談?wù)凷pine動(dòng)畫在產(chǎn)品中的應(yīng)用

筆者介紹：姜雪偉，IT公司技術(shù)合伙人，IT高級(jí)講師，CSDN社區(qū)專家，特邀編輯，暢銷書作者，國(guó)家專利發(fā)明人;已出版書籍：《手把手教你架構(gòu)3D游戲引擎》電子工業(yè)出版社和《Unity3D實(shí)戰(zhàn)核心技術(shù)詳解》電子工業(yè)出版社等。

Spine是1個(gè)2D的骨骼動(dòng)畫編輯器, 由于其良好的UI設(shè)計(jì)及完全的功能而被開發(fā)者追捧。Spine動(dòng)畫已廣泛的利用在游戲開發(fā)或APP中，做2D開發(fā)的，之前做動(dòng)畫采取的都是采取序列幀播放的，如果動(dòng)畫播放的效果好，需要制作的序列幀圖片比較多，圖片的數(shù)量多會(huì)致使包體急劇增大，對(duì)用戶體驗(yàn)來講非常差，如何使用好的效果并且能減少包體大小，這時(shí)候就顯示出Spine的優(yōu)勢(shì)了，Spine是專門為2D動(dòng)作做的編輯器，如果需要使用正版的，要購買序列號(hào)，編輯器效果以下所示：

Spine 能將項(xiàng)目中的動(dòng)畫導(dǎo)出為 JSON 或2進(jìn)制格式文件，它們能在 Spine 運(yùn)行時(shí)庫中完善的再現(xiàn)。 Spine 同時(shí)還可以導(dǎo)出 GIF 動(dòng)畫， PNG 或 JPG 序列圖，還有 AVI或 QuickTime 的視頻文件。

它開發(fā)了多款針對(duì)不同引擎和語言的庫，詳情查看以下網(wǎng)址：

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

市面上比較火的引擎有Unity3D和Cocos2d-x，Spine都有對(duì)應(yīng)的版本開發(fā)。

Cocos2d-x引擎開發(fā)的游戲目前大部份都是使用Spine工具制作的，它只有3個(gè)文件組成：圖集png，json文件包括骨骼信息，atlas文件包括spine圖集中的各部份圖片的位置信息，比如UV坐標(biāo)，旋轉(zhuǎn)等。

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發(fā)帶/2d_C001_dj01","bone":"root"},{"name":"2d_C001發(fā)帶/2d_C001_dj02","bone":"root"},{"name":"2d_C001發(fā)帶/2d_C001_dj2","bone":"root"},{"name":"2d_C001發(fā)帶/2d_C001_dj3","bone":"fadai"},{"name":"2d_C001發(fā)帶/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個(gè)文件大小總計(jì)：1百多K，非常小，Spine就是解釋這個(gè)json文件和atlas文件。

在類似相機(jī)軟件中也有相同的利用，比如FaceU軟件使用的就是序列幀，致使后期的包體會(huì)很大，其實(shí)完全可以通過Spine動(dòng)畫對(duì)其進(jìn)行改進(jìn)。筆者在CSDN學(xué)院專門做了1款類似刀塔傳奇的橫版游戲使用的就是Spine動(dòng)畫，課程觀看地址：《2D動(dòng)作手游-Spine骨骼動(dòng)畫》

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)