在项目中我们经常会有这样写需求:更换角色皮肤,更换角色使用的武器,更换场景等。
本文演示一个更换角色使用的武器。
根据需求我们发现其实就是更换插槽的图片而已。
dragonbones.js中提供了对应的接口:
/** * - 用特定的显示对象数据替换特定插槽当前的显示对象数据。 * 用 "dragonBonesName/armatureName/slotName/displayName" 指定显示对象数据。 * @param dragonBonesName - DragonBonesData 实例的缓存名称。 * @param armatureName - 骨架数据名称。 * @param slotName - 插槽数据名称。 * @param displayName - 显示对象数据名称。 * @param slot - 插槽。 * @param displayIndex - 被替换的显示对象数据的索引。 (如果未设置,则替换当前的显示对象数据) * @version DragonBones 4.5 * @language zh_CN */ replaceSlotDisplay(dragonBonesName: string, armatureName: string, slotName: string, displayName: string, slot: Slot, displayIndex?: number): boolean;
/** * 龙骨动画换肤 */ class DBTestScene5 extends eui.UILayer{ constructor(){ super(); this.init(); } private init(){ this.createDagonbonesAnimation(); let btn:eui.Button = new eui.Button(); btn.label = "更换武器"; btn.horizontalCenter = 0; btn.verticalCenter = 0; this.addChild(btn); btn.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onTap,this); } private index = 0; private onTap(){ let textureArr:string[] = ["sword","knife"]; this.index++; let textureName = textureArr[this.index%2]; console.log(textureName); this.factory.replaceSlotDisplay("theWarrior","warrior","hand_weapon",textureName,this.armatureDisplay.armature.getSlot("hand_weapon")) } private factory:dragonBones.EgretFactory; private armatureDisplay:dragonBones.EgretArmatureDisplay; private createDagonbonesAnimation(){ let factory:dragonBones.EgretFactory = new dragonBones.EgretFactory(); this.addDragonbonesDataToFactory(factory,"theWarrior"); this.factory = factory; let theWarrior:dragonBones.EgretArmatureDisplay = factory.buildArmatureDisplay("warrior"); theWarrior.x = 300; theWarrior.y = 300; this.addChild(theWarrior); theWarrior.animation.play("alert"); this.armatureDisplay = theWarrior; } private addDragonbonesDataToFactory(factory:dragonBones.EgretFactory,ResName:string){ factory.parseDragonBonesData(RES.getRes(ResName+"_ske_json")); factory.parseTextureAtlasData(RES.getRes(ResName+"_tex_json"),RES.getRes(ResName+"_tex_png")); } }