Egret中DragonBones换装的三种方式

使用的Egret和DragonBones对应的版本分别为：

• DragonBones版本：5.6
• Egret版本：5.0.7

先阅读一下DragonBones官方文档 http://developer.egret.com/cn/github/egret-docs/DB/dbLibs/createAnimation/index.html（了解如何创建、使用骨骼动画即可，换装部分没讲好）

示例源码 https://github.com/DragonBones/DragonBonesJS/tree/master/Egret/Demos/ （三种换装方式，可将仓库克隆下来）

换装效果如下：

目前所知有三种方式：
1. 用另一个DragonBones工程中的的图片替换本项目中的某个slot下的图片
2. 本项目中slot下有多个图片，通过索引来替换
3. slot的display可以替换为egret的egret.DisplayObject，像操作普通的egret.DisplayObject来操作这个egret.DisplayObject。

另有一种文档上提到的全局换装，可直接替换texuture，不过新骨骼动画纹理集与源骨骼动画纹理集必须尺寸以及内部元素尺寸相同

armature.replaceTexture(RES.getRes("new_db_texture_png"));

下面为示例的核心代码：

class ReplaceSlotDisplay extends BaseDemo {
    private static readonly WEAPON_RIGHT_LIST: string[] = ["weapon_1004_r", "weapon_1004b_r", "weapon_1004c_r", "weapon_1004d_r", "weapon_1004e_r"];

    private _leftWeaponIndex: number = 0;
    private _rightWeaponIndex: number = 0;
    private readonly _factory: dragonBones.EgretFactory = dragonBones.EgretFactory.factory;
    private _armatureDisplay: dragonBones.EgretArmatureDisplay;
    private _logoText: egret.TextField;

    public constructor() {
        super();

        this._resources.push(
            "resource/mecha_1004d_show/mecha_1004d_show_ske.json",
            "resource/mecha_1004d_show/mecha_1004d_show_tex.json",
            "resource/mecha_1004d_show/mecha_1004d_show_tex.png",
            "resource/weapon_1004_show/weapon_1004_show_ske.json",
            "resource/weapon_1004_show/weapon_1004_show_tex.json",
            "resource/weapon_1004_show/weapon_1004_show_tex.png"
        );
    }

    protected _onStart(): void {
        this._factory.parseDragonBonesData(RES.getRes("resource/mecha_1004d_show/mecha_1004d_show_ske.json"));
        this._factory.parseTextureAtlasData(RES.getRes("resource/mecha_1004d_show/mecha_1004d_show_tex.json"), RES.getRes("resource/mecha_1004d_show/mecha_1004d_show_tex.png"));
        this._factory.parseDragonBonesData(RES.getRes("resource/weapon_1004_show/weapon_1004_show_ske.json"));
        this._factory.parseTextureAtlasData(RES.getRes("resource/weapon_1004_show/weapon_1004_show_tex.json"), RES.getRes("resource/weapon_1004_show/weapon_1004_show_tex.png"));
        //
        this._armatureDisplay = this._factory.buildArmatureDisplay("mecha_1004d");
        this._armatureDisplay.animation.play();
        //
        this._armatureDisplay.x = 100.0;
        this._armatureDisplay.y = 200.0;
        this.addChild(this._armatureDisplay);
        //
        this.stage.addEventListener(egret.TouchEvent.TOUCH_BEGIN, (event: egret.TouchEvent) => {
            const localX = event.stageX - this.x;
            if (localX < -150.0) {
                this._replaceDisplay(-1);
            }
            else if (localX > 150.0) {
                this._replaceDisplay(1);
            }
            else {
                this._replaceDisplay(0);
            }
        }, this);
        //
        this.createText("Touch screen left / center / right to relace slot display.");
    }

    // 这里为最核心的代码，三种换装方式，也简洁明了地展示出来了，可配合github仓库中的工程资源进一步了解。
    private _replaceDisplay(type: number): void {
        if (type === -1) {
            this._rightWeaponIndex++;
            this._rightWeaponIndex %= ReplaceSlotDisplay.WEAPON_RIGHT_LIST.length;
            const displayName = ReplaceSlotDisplay.WEAPON_RIGHT_LIST[this._rightWeaponIndex];
            this._factory.replaceSlotDisplay("weapon_1004_show", "weapon", "weapon_r", displayName, this._armatureDisplay.armature.getSlot("weapon_hand_r"));
        }
        else if (type === 1) {
            this._leftWeaponIndex++;
            this._leftWeaponIndex %= 5;
            this._armatureDisplay.armature.getSlot("weapon_hand_l").displayIndex = this._leftWeaponIndex;
        }
        else {
            const logoSlot = this._armatureDisplay.armature.getSlot("logo");
            if (logoSlot.display === this._logoText) {
                logoSlot.display = logoSlot.rawDisplay;
            }
            else {

                if (!this._logoText) {
                    this._logoText = new egret.TextField();
                    this._logoText.text = "Core Element";
                    this._logoText.anchorOffsetX = this._logoText.width * 0.5;
                    this._logoText.anchorOffsetY = this._logoText.height * 0.5;
                }
                logoSlot.display = this._logoText;
            }
        }
    }
}