DragonBones 2D動畫編輯器v4.8.1官方最新版

DragonBones是一套開源的2D骨骼動畫框架和工具，它包含了基於Flash Pro的骨骼動畫編輯麵板Skeleton Animation Design Panel及骨骼動畫ActionScript框架。它可以讓開發者運用熟悉的Flash Pro元件及時間軸編輯方式，快速創建2D骨骼動畫，並運用到Flash或其他技術的應用中。

DragonBones功能特點

動畫基於Flash pro時間軸，可以使用Flash傳統動畫方式製作遊戲動畫；

骨骼綁定可以讓動畫更精準，更真實自然，並可通過程序動態控製；

可設置單個骨骼的動畫時間縮放和延時播放，使用較少的關鍵幀就可以表現複雜生動的動畫效果；

動畫各部分采用拚接方式，動畫有緩動補間，占用位圖／內存資源少；

骨骼顯示對象與骨骼的邏輯分離，可在不影響動畫播放的情況下動態更換；

能方便用於傳統DisplayList、Starling及其他技術的2D應用。

dragonbones 教程

在設計師用骨骼動畫編輯麵板導出好相關格式數據之後，程序開發者就可以運用DragonBones的開源動畫框架將數據資源導入到程序並讓動畫角色運動起來。隻需幾步操作，非常簡單！

接下來，你將了解如何在傳統DisplayList或支持GPU加速的Starling框架中調用骨骼動畫。

下載Skeleton Animation Library，將這個包導入至你的開發項目中。

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

Factory: 這是構建骨骼動畫的基礎。它負責從前麵骨骼麵板導出的資源中解析數據格式和準備圖像資源，並且通過它創建骨骼容器Armature。

Armature: 我們可以把它想像為一個容器，它對應在Flash Pro中編輯並通過骨骼麵板導出的一個MoiveClip。通過Armature來對各骨骼進行管理，播放動畫等。

現在我們來看看在在傳統DisplayList顯示模式中添加骨骼的示例。打開此教程對應的源文件DB_Tutorial_Walk_DisplayList.as。

首先，將骨骼麵板導出的資源嵌入到項目。
[Embed(source = "../assets/Dragon1.swf", mimeType = "application/octet-stream")]
private static const ResourcesData:Class;

此處嵌入的資源是由Flash Pro骨骼動畫編輯麵板導出的合並了XML數據文件的PNG文件或SWF文件。當然，你也可以通過動態加載的方式在項目運行時候實時載入資源。

創建factory，並通過fromRawData方法解析載入的資源格式，當解析完畢後交給對應事件textureCompleteHandler處理。
factory = new BaseFactory();
factory.addEventListener(Event.COMPLETE, textureCompleteHandler);
factory.parseData(new ResourcesData());

事件函數textureCompleteHandler中，首先用buildArmature方法構建骨骼動畫容器：
armature = factory.buildArmature("Dragon");

將容器的顯示內容armature.display添加到場景：
addChild(armature.display as Sprite);

將armature添加到WorldClork ，用於動畫更新：
WorldClock.clock.add(armature);

指定要播放骨骼的某個動作：
armature.animation.play("walk");

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

OK,僅此幾行代碼，你就可以將骨骼動畫添加到已有項目。很簡單，不是麼？:)

下麵我們聊聊在Starling中添加骨骼動畫的方法。Starling是一個非常不錯的開源遊戲框架，它可以幫助你快速創建基於Stage3D技術GPU加速的2D遊戲。如果你對它還不了解，請訪問Starling的官方網站：http://starlingframework.org。

使用Starling的用戶或許對用Sprite Sheet的位圖序列來構建動畫非常熟悉，這種方式最大問題是對於複雜動畫會占用過多內存。以下圖為例，一個簡單的行走動作，就會占用一大張位圖材質。

而DragonBones解決了這個問題，不但僅需要少量骨骼素材，而且可以讓動畫更加豐富生動。

DragonBones可以完美的結合Starling，創建基於GPU加速的2D骨骼動畫。

打開本示例的項目DBStarlingWalk.as源碼你會發現，我們創建了一個基於Starling的factory：
factory = new StarlingFactory();

而餘下的代碼，跟上個DisplayList的示例代碼完全一致。

關於Starling中嵌入的骨骼動畫素材資源，可以是合並骨骼XML數據的PNG格式，也可以是合並XML數據的SWF格式。對於SWF格式的矢量資源，Skeleton Animation Framework會自動在程序運行時轉換矢量為位圖材質，節省你項目尺寸。