Egret之龍骨卡槽(slot)換皮

龍骨的圖片是綁定在卡槽上的.并且是一對(duì)一的關(guān)系.所以可以通過(guò)對(duì)骨架的卡槽上綁定的圖片的更換來(lái)實(shí)現(xiàn)另一種換皮的效果.

換皮的核心代碼:

    //針對(duì)slot設(shè)置其新內(nèi)容
    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中內(nèi)容為Bitmap
        //var slot:dragonBones.Slot = this._armature.getSlot(slotName);
        //slot.display.texture = RES.getRes(textureName);
    }

我做了一個(gè)工具:

module bg2tool{
    /**
     * 龍骨動(dòng)畫(huà)工具--單例
     * @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;
        }

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

        /**
         * 設(shè)置骨骼卡槽的皮膚
         * @param {dragonBones.EgretArmatureDisplay} $animation 骨骼動(dòng)畫(huà)
         * @param {string} $slotName 卡槽名稱
         * @param {string} $textureName 紋理
         */
        public setNewSlot( $animation : dragonBones.EgretArmatureDisplay ,  $slotName:string, $textureName:string ) : void{
            if( DEBUG ){
                if( !RES.hasRes($textureName) ){
                    egret.error(`骨骼動(dòng)畫(huà)卡槽換裝 ${$textureName} 紋理沒(méi)有配置!!!`);
                }else{
                    if( RES.getRes( $textureName ) == null ){
                        egret.error(`骨骼動(dòng)畫(huà)卡槽換裝 ${$textureName} 紋理沒(méi)有被加載!!!`);
                    }
                }
            }
            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;
        }
    }
}

現(xiàn)在準(zhǔn)備測(cè)試

①: 準(zhǔn)備龍骨資源

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

看看初始骨骼動(dòng)畫(huà)效果:

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);

結(jié)果:

換皮開(kāi)始:
換成:

代碼:

                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 );
                                    }
        }

結(jié)果 :