Dragon Bones插件

DragonBones是一套開源的 2D骨骼動(dòng)畫框架和工具，它包含了基于Flash Pro的骨骼動(dòng)畫編輯面板DragonBonesDesignPanel及骨骼動(dòng)畫ActionScript框架。它可以讓開發(fā)者運(yùn)用熟悉的Flash Pro元件及時(shí)間軸編輯方式，快速創(chuàng)建2D骨骼動(dòng)畫，并運(yùn)用到Flash或其他技術(shù)的應(yīng)用中。

Dragon Bones插件特點(diǎn)：

動(dòng)畫基于Flash pro時(shí)間軸，可以使用Flash傳統(tǒng)動(dòng)畫方式制作游戲動(dòng)畫；

骨骼綁定可以讓動(dòng)畫更精準(zhǔn)，更真實(shí)自然，并可通過(guò)程序動(dòng)態(tài)控制；

可設(shè)置單個(gè)骨骼的動(dòng)畫時(shí)間縮放和延時(shí)播放，使用較少的關(guān)鍵幀就可以表現(xiàn)復(fù)雜生動(dòng)的動(dòng)畫效果；

動(dòng)畫各部分采用拼接方式，動(dòng)畫有緩動(dòng)補(bǔ)間，占用位圖／內(nèi)存資源少；

骨骼顯示對(duì)象與骨骼的邏輯分離，可在不影響動(dòng)畫播放的情況下動(dòng)態(tài)更換；

能方便用于傳統(tǒng)DisplayList、Starling及其他技術(shù)的2D應(yīng)用。

實(shí)用于解決cocos2d-x動(dòng)畫實(shí)現(xiàn)，可以在少量關(guān)鍵幀，資源，內(nèi)存的情況下實(shí)現(xiàn)平滑的動(dòng)畫，自動(dòng)補(bǔ)間，從此以后動(dòng)畫實(shí)現(xiàn)就交給美術(shù)吧，因?yàn)橹恍枰猣lash上編輯動(dòng)畫就可以在cocos2d-x上運(yùn)行。這個(gè)包里面是CSArmature喝DragonBones2.0，用過(guò)的都知道這兩個(gè)要版本對(duì)應(yīng)。

如果想要在cocos2d-x中用的話，必須在flash->dragonbones插件下導(dǎo)出使用“xml和單個(gè)的png圖片”選項(xiàng)，你會(huì)得到一個(gè)和你的fla文件一樣名字的壓縮包。解壓后能看到一個(gè)texutre文件夾和一個(gè)名為texture.xml的文件。將texture文件夾下的散圖用TexturePacker打包、發(fā)布，得到png圖片和plist文件。將這三個(gè)文件重命名為你想要的文件名，放入工程中，其他的事情網(wǎng)上就有很多的例子了，包里面也有現(xiàn)成的demo供參考。

軟件包包含內(nèi)容：

骨骼動(dòng)畫庫(kù)的源代碼。
骨骼動(dòng)畫設(shè)計(jì)小組，一個(gè)基于Flash Pro中的延伸。
演示項(xiàng)目顯示如何使用DragonBones。

針對(duì)程序開發(fā)使用教程：

在設(shè)計(jì)師用骨骼動(dòng)畫編輯面板導(dǎo)出好相關(guān)格式數(shù)據(jù)之后，程序開發(fā)者就可以運(yùn)用DragonBones的開源動(dòng)畫框架將數(shù)據(jù)資源導(dǎo)入到程序并讓動(dòng)畫角色運(yùn)動(dòng)起來(lái)。只需幾步操作，非常簡(jiǎn)單！

接下來(lái)，你將了解如何在傳統(tǒng)DisplayList或支持GPU加速的Starling框架中調(diào)用骨骼動(dòng)畫。

下載Skeleton Animation Library，將這個(gè)包導(dǎo)入至你的開發(fā)項(xiàng)目中。

在開始代碼前，讓我們了解下骨骼動(dòng)畫框架的基本概念。

Factory: 這是構(gòu)建骨骼動(dòng)畫的基礎(chǔ)。它負(fù)責(zé)從前面骨骼面板導(dǎo)出的資源中解析數(shù)據(jù)格式和準(zhǔn)備圖像資源，并且通過(guò)它創(chuàng)建骨骼容器Armature。

Armature: 我們可以把它想像為一個(gè)容器，它對(duì)應(yīng)在Flash Pro中編輯并通過(guò)骨骼面板導(dǎo)出的一個(gè)MoiveClip。通過(guò)Armature來(lái)對(duì)各骨骼進(jìn)行管理，播放動(dòng)畫等。

現(xiàn)在我們來(lái)看看在在傳統(tǒng)DisplayList顯示模式中添加骨骼的示例。打開此教程對(duì)應(yīng)的源文件DB_Tutorial_Walk_DisplayList.as。

首先，將骨骼面板導(dǎo)出的資源嵌入到項(xiàng)目。

此處嵌入的資源是由Flash Pro骨骼動(dòng)畫編輯面板導(dǎo)出的合并了XML數(shù)據(jù)文件的PNG文件或SWF文件。當(dāng)然，你也可以通過(guò)動(dòng)態(tài)加載的方式在項(xiàng)目運(yùn)行時(shí)候?qū)崟r(shí)載入資源。

創(chuàng)建factory，并通過(guò)fromRawData方法解析載入的資源格式，當(dāng)解析完畢后交給對(duì)應(yīng)事件textureCompleteHandler處理。

事件函數(shù)textureCompleteHandler中，首先用buildArmature方法構(gòu)建骨骼動(dòng)畫容器：

將容器的顯示內(nèi)容armature.display添加到場(chǎng)景：

將armature添加到WorldClork ，用于動(dòng)畫更新：

指定要播放骨骼的某個(gè)動(dòng)作：

最后，為ENTER_FRAME事件函數(shù)中添加WorldClock.clock.advanceTime(-1)方法，讓SWF每幀渲染時(shí)候更新骨骼動(dòng)畫。

OK,僅此幾行代碼，你就可以將骨骼動(dòng)畫添加到已有項(xiàng)目。很簡(jiǎn)單，不是么？:)

下面我們聊聊在Starling中添加骨骼動(dòng)畫的方法。Starling是一個(gè)非常不錯(cuò)的開源游戲框架，它可以幫助你快速創(chuàng)建基于Stage 3D技術(shù)GPU加速的2D游戲。如果你對(duì)它還不了解，請(qǐng)?jiān)L問(wèn)Starling的官方網(wǎng)站：http://starlingframework.org。

使用Starling的用戶或許對(duì)用Sprite Sheet的位圖序列來(lái)構(gòu)建動(dòng)畫非常熟悉，這種方式最大問(wèn)題是對(duì)于復(fù)雜動(dòng)畫會(huì)占用過(guò)多內(nèi)存。以下圖為例，一個(gè)簡(jiǎn)單的行走動(dòng)作，就會(huì)占用一大張位圖材質(zhì)。

而DragonBones解決了這個(gè)問(wèn)題，不但僅需要少量骨骼素材，而且可以讓動(dòng)畫更加豐富生動(dòng)。

DragonBones可以完美的結(jié)合Starling，創(chuàng)建基于GPU加速的2D骨骼動(dòng)畫。

打開本示例的項(xiàng)目DBStarlingWalk.as源碼你會(huì)發(fā)現(xiàn)，我們創(chuàng)建了一個(gè)基于Starling的factory：

而余下的代碼，跟上個(gè)DisplayList的示例代碼完全一致。

關(guān)于Starling中嵌入的骨骼動(dòng)畫素材資源，可以是合并骨骼XML數(shù)據(jù)的PNG格式，也可以是合并XML數(shù)據(jù)的SWF格式。對(duì)于SWF格式的矢量資源，Skeleton Animation Framework會(huì)自動(dòng)在程序運(yùn)行時(shí)轉(zhuǎn)換矢量為位圖材質(zhì)，節(jié)省你項(xiàng)目尺寸。