換皮的核心代碼:

    //針對slot設置其新內容
    private setNewSlot( slotName:string, textureName:string )
    {
        //方法1
        var slot:dragonBones.Slot = this._armature.getSlot( slotName );
        var b:egret.Bitmap = new egret.Bitmap();
        b.texture = RES.getRes( textureName );
        b.x = slot.display.x;
        b.y = slot.display.y;
        b.anchorOffsetX = b.width/2;
        b.anchorOffsetY = b.height/2;
        slot.setDisplay( b );

        //方法2，僅限於slot中內容為Bitmap
        //var slot:dragonBones.Slot = this._armature.getSlot(slotName);
        //slot.display.texture = RES.getRes(textureName);
    }
 

我做了一個工具:

module bg2tool{
    /**
     * 碧鴿龍骨動畫工具--單例
     * @author Husz
     */
    export class DragonBoneAnimationTools{
        private static _instance : DragonBoneAnimationTools = null;

        /**
         * 獲取單例(只讀......)
         * @returns {bg2tool.DragonBoneAnimationTools}
         * @constructor
         */
        public static get Instance() : DragonBoneAnimationTools{
            if( DragonBoneAnimationTools._instance == null ){
                DragonBoneAnimationTools._instance = new DragonBoneAnimationTools();
            }
            return DragonBoneAnimationTools._instance;
        }

        /**
         * 防止類外實例化
         */
        private constructor(){}

        /**
         * 設置骨骼卡槽的皮膚
         * @param {dragonBones.EgretArmatureDisplay} $animation 骨骼動畫
         * @param {string} $slotName 卡槽名稱
         * @param {string} $textureName 紋理
         */
        public setNewSlot( $animation : dragonBones.EgretArmatureDisplay ,  $slotName:string, $textureName:string ) : void{
            if( DEBUG ){
                if( !RES.hasRes($textureName) ){
                    egret.error(`骨骼動畫卡槽換裝 ${$textureName} 紋理沒有配置!!!`);
                }else{
                    if( RES.getRes( $textureName ) == null ){
                        egret.error(`骨骼動畫卡槽換裝 ${$textureName} 紋理沒有被加載!!!`);
                    }
                }
            }
            let slot:dragonBones.Slot = $animation.armature.getSlot($slotName);
            let b:egret.Bitmap = new egret.Bitmap();
            b.texture = RES.getRes( $textureName );
            b.x = slot.display.x;
            b.y = slot.display.y;
            b.anchorOffsetX = b.width>>1;
            b.anchorOffsetY = b.height>>1;
            slot.display = b;
        }
    }
}
 

現在準備測試

①: 準備龍骨資源

註意:
球的圖片資源綁定的卡槽名稱為 slot

看看初始骨骼動畫效果:

private $dragonBone : dragonBones.EgretArmatureDisplay = null;

                this.$dragonBone = bg2tool.DragonBonePoolResManager.Instance.getAnimation4DragonBone(
                    "GuajiSelfBone_ske_json",
                    "GuajiSelfBone_tex_json",
                    "GuajiSelfBone_tex_png",
                    "guajiAnimation",
                    1,
                    1
                );
                this._context.GuajiAnimation.addChild( this.$dragonBone );

                this.$dragonBone.x = 200;
                this.$dragonBone.y = 400;

                this.$dragonBone.animation.play("jumping",0);
 

結果:

換皮開始:
換成:

代碼:

                this.$dragonBone = bg2tool.DragonBonePoolResManager.Instance.getAnimation4DragonBone(
                    "GuajiSelfBone_ske_json",
                    "GuajiSelfBone_tex_json",
                    "GuajiSelfBone_tex_png",
                    "guajiAnimation",
                    1,
                    1
                );
                this._context.GuajiAnimation.addChild( this.$dragonBone );

                this.$dragonBone.x = 200;
                this.$dragonBone.y = 400;

                this.$dragonBone.animation.play("jumping",0);

                bg2tool.ResSyncLoadingManager.Instance.startLoading( "1-1_99003_png" , this.changeSkin.bind(this) );

                        private changeSkin( $skin : string ) : void{
                                    if( $skin == "1-1_99003_png" ){
                                            bg2tool.DragonBoneAnimationTools.Instance.setNewSlot( this.$dragonBone , "slot" , $skin );
                                    }
        }

結果 :

Egret之龍骨卡槽(slot)換皮