Cocos Creator 龍骨DragonBones(導出骨骼/使用骨骼/局部換裝/全局換裝)

版本2.4.4

參考：

cocos教程：DragonBones骨骼動畫資源

 

導出龍骨動畫

下載dragonbones軟件，雙擊軟件首頁下方影魔的動畫，可以打開影魔的示例。

 

選擇文件-導出

 

選擇二進制導出

 

將導出文件放到cocos資源目錄下

 

使用龍骨動畫

拖拽骨骼動畫(恐龍頭骨圖標)到舞台，並拖拽Demon_tex到DragonAtlasAsst，設置動畫Animationi為"run"，運行游戲，即可看到骨骼動畫行走效果。

 

動態加載龍骨動畫

@ccclass
export default class Helloworld extends cc.Component {

    @property(dragonBones.ArmatureDisplay)
    demon: dragonBones.ArmatureDisplay = null;

    start() {
        cc.resources.load("db/Demon_ske", dragonBones.DragonBonesAsset, (err, dbAsset: dragonBones.DragonBonesAsset) => {
            cc.resources.load("db/Demon_tex", dragonBones.DragonBonesAtlasAsset, (err, dbAtlas: dragonBones.DragonBonesAtlasAsset) => {
                this.demon.dragonAsset = dbAsset;          //設置骨骼數據
                this.demon.dragonAtlasAsset = dbAtlas;     //設置骨骼數據所需Atlas
                this.demon.armatureName = "armatureName";  //設置皮膚
                this.demon.playAnimation("run", 0);        //播放動畫
            })
        })
    }
}

　

局部換裝

嘗試動態加載單張圖片，然后局部換裝，換不成功。

官方文檔提供的是2個龍骨之間進行換裝。現在用綠龍的頭替換影魔的頭。

 

龍骨1英雄的頭部插槽"head"

 

 

龍骨綠龍的頭部插槽"tou"，骨架名"armatureName"

 

const { ccclass, property } = cc._decorator;

@ccclass
export default class Helloworld extends cc.Component {
    
    /**影魔 */
    @property(dragonBones.ArmatureDisplay)
    demon: dragonBones.ArmatureDisplay = null;

    /**綠龍 */
    @property(dragonBones.ArmatureDisplay)
    dragon: dragonBones.ArmatureDisplay = null;

    start() {
        let demonArmature = this.demon.armature();
        let demonSlot = demonArmature.getSlot("head");
        let factory = dragonBones.CCFactory.getInstance();
        factory.replaceSlotDisplay(
            this.dragon.getArmatureKey(),  //綠龍骨架數據名稱
            "armatureName",                //綠龍骨架數據名稱
            "tou",                         //綠龍插槽數據名稱
            "tou",                         //綠龍顯示對象數據名
            demonSlot                      //影魔的頭部插槽
        );
    }
}

　　

換頭后效果

 

全局換裝

 使用replaceSkin實現。手上沒有兩套使用相同骨骼的動畫，就不做實驗了...

dragonBones.CCFactory.getInstance().replaceSkin

　　

 

 

 遇到問題

1 切換displayIndex進行局部換裝

一個插槽內可以包含多個圖片，同一時間只能顯示一張圖片。利用這個特性可以進行局部換裝。

 

 

 獲取head頭部的骨骼，並切換displayIndex進行局部換裝。displayIndex=0表示顯示head，1表示顯示body，2表示顯示leg_left。

        let armature: dragonBones.Armature = this.dragonBone.armature();
        let slot: dragonBones.Slot = armature.getSlot("head");
        slot.displayIndex = 1;

 

2 設置骨骼的spriteFrame進行局部換裝　

直接替換slot骨骼的圖片數據spriteFrame，但是這種方式顯示的圖片會出現問題對不齊。

例如一只貓動畫

 

 　測試替換一只貓頭部，將替換的頭部畫花

 

 

 

 動態加載畫花的貓頭圖片，進行替換

        let armature: dragonBones.Armature = this.dragonBone.armature();
        let slot:any = armature.getSlot("head");
        slot.displayData.texture.spriteFrame = cc.resources.get("common/texture/test1", cc.SpriteFrame);
　

 

替換后，可以看到貓頭只剩左上角一小塊地方有顯示...所以這個方法不可行，沒去深究什么原因。