2 最近在自學Cocos JS，手上恰巧有一套Flash的動畫原始檔，打算用這些資源學習下DragonBones(龍骨動畫)

流程如下：

用Cocos Creator新建專案，佈局如下圖：

DBAnimation是個空節點，是用來等下掛載匯出的DragonBones動畫資料的。等下匯出龍骨動畫的資源會放在SceneAnim目錄下。

下載安裝最新版本的DragonBones及Flash Pro外掛

現在官網最新版本的DragonBones(簡稱DB)是5.6的官網直接下就可以，Flash Pro外掛的連結指向github上，外掛最新版本是V3.0.1也是直接下就可以了。

DB官網地址:http://dragonbones.com/cn/download.html

DB Flash外掛地址:https://github.com/DragonBones/DesignPanel/releases

下載安裝Adobe Animate及Anastasiy Extension Manager(外掛管理器)

這裡要說下，網上說Flash CS6也是可以的但是我DB 的Flash外掛死活裝不上，且Adobe官網也放棄了對Flah專案的維護(改成Animate)，如果有裝了Flash CS6且裝了DB Flash外掛的可以跳過這步。

這裡還要說下Animate是要收費的(NND，一年要 888 RMB)。對於一個小程式來說還是有點小貴，被迫無奈裝了破解版。

這裡只給出軟體的官網地址。

Adobe Animate官網地址:/file/2020/10/05/20201005085529_1.jpg Anastasiy Extension Manager官網地址:http://install.anastasiy.com/

Animate 安裝 DB 外掛

直接將從github下的zxp外掛檔案拖到Animate外掛管理器就可以了，如圖

用軟體匯出程式要用的DB動畫檔案

工欲善其事必先利其器，通過以上步驟終於把我們需要的準備工作都做好了，下來開始匯出我們即將使用的動畫資料，在Animate編輯器中效果如圖

然後匯出成DB所能識別的動畫資料，如圖

再彈出的DragonBonesDesignPanel介面中點 匯入-＞確定，如圖

之後會彈出動畫資料介面，如圖

最後再點匯出，匯出的資料格式選Json,如圖

最終指定匯出檔案的路徑就可以了。然後再用DragonBones工具檢視匯出的zip包資料，如圖

如果一切正常就可以在DragonBones中檢視到和在Animate中一樣的效果，最後再匯出成最終資料如圖

最後開啟Cocos Creator工程，發現多了3個檔案，如圖

Cocos Creator編輯器中使用匯出的DragonBones動畫資料

選中DBAnimation節點，新增DragonBones元件，然後將骨骼資料和貼圖資料拖到DB元件上，如圖

新增程式碼根據規則播放動畫

程式碼直接上截圖，如圖

最終在瀏覽器裡的執行效果執行效果

效果如圖

結語

我原本想發效果視訊的，最後發現手機端發文章不知道怎麼插入視訊，如果有知道怎麼在手機端發文插入視訊的請留言，後續會把效果視訊加進來。

萬分感謝。