本文共 4710 字，大约阅读时间需要 15 分钟。
本篇主要内容是 ， EUI 及 龙骨。
我用EUI项目进行测试，看下效果：
实际上这个robot是一直在跑的 。
步骤
首先 ， 在项目的egretProperties.json中增加EUI和龙骨模块如下：
1，
2，使用DOS命令 ： egret build -e 加入这2个模块
其次 ，注册主题（default.thm.json）,要使用exml文件必须要注册
1，在resource文件加下新建default.thm.json文件，如下
2，在main.ts中注册此主题：
new eui.Theme("resource/default.thm.json", this.stage);//注册主题
3，需要往default.thm.json中添加基本数据
| 1 2 3 4 5 | { "skins": {}, "autoGenerateExmlsList": true, "exmls": [] } |
最后 ，弹出一个简单的EUI界面
1，在resource文件夹下新建一个eui_skins文件夹用来存放exml皮肤文件
2，在eui_skins中新建一个DragonE.exml文件。
3，编辑DragonE.exml文件
①，切换至设计师
②，对于组件/资源没有出来的情况
如下图：
解决方案如下（重置引擎）：
编写ui代码 DragonE_View.ts如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | module app { export class DragonE_View extends eui.Component implements eui.UIComponent { private com_dragon : eui.Group; private img_dragon : eui.Image; private txt_name : eui.Label; public constructor() { super (); this .skinName = "resource/eui_skins/DragonE.exml" ; } protected partAdded(partName : string , instance : any):void{ super .partAdded(partName , instance); } protected childrenCreated():void{ super .childrenCreated(); this .txt_name.text = "Snow" ; this .img_dragon.source = RES.getRes( "egret_icon_png" ); } } } |
在舞台上显示ui ， 在main.ts中
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /** * preload资源组加载完成 * Preload resource group is loaded */ private onResourceLoadComplete(event: RES.ResourceEvent) { if (event.groupName == "preload" ) { this .stage.removeChild( this .loadingView); RES.removeEventListener(RES.ResourceEvent.GROUP_COMPLETE, this .onResourceLoadComplete, this ); RES.removeEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this .onResourceLoadError, this ); RES.removeEventListener(RES.ResourceEvent.GROUP_PROGRESS, this .onResourceProgress, this ); RES.removeEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this .onItemLoadError, this ); //this.createGameScene(); let dragon : app.DragonE_View = new app.DragonE_View(); this .addChild(dragon); } } |
结果如下：
看看default.thm.json(软件自动添加的)
龙骨：
1，在resource中建一个robot文件夹，用于存储龙骨的3个文件 ：
2，在default.res.json中配置动画资源
3，新建DragonBoneTools.ts类以创建dragonBones.EgretFactory如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | module tools { /** * 龙骨工具 * @author Aonaufly */ export class DragonBoneTools { private static _instance : DragonBoneTools; public static get Instance() : DragonBoneTools{ if ( DragonBoneTools._instance == null ) DragonBoneTools._instance = new DragonBoneTools(); return DragonBoneTools._instance; } /** * 构建龙骨 新 不需要绑定时钟 */ public createEff2New(dataRes: string,texJson: string,texPng: string): dragonBones.EgretFactory { var dragonbonesData = RES.getRes(dataRes); var textureData = RES.getRes(texJson); var texture = RES.getRes(texPng); let dragonbonesFactory: dragonBones.EgretFactory = new dragonBones.EgretFactory(); dragonbonesFactory.parseDragonBonesData(dragonbonesData); dragonbonesFactory.parseTextureAtlasData(textureData,texture); return dragonbonesFactory; } } } |
4，更改DragonE_View.ts 以播放龙骨动画：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | ///<reference path="./../tools/DragonBoneTools.ts" /> module app { export class DragonE_View extends eui.Component implements eui.UIComponent { private com_dragon : eui.Group; private img_dragon : eui.Image; private txt_name : eui.Label; private egretFactory : dragonBones.EgretFactory; public constructor() { super (); this .skinName = "resource/eui_skins/DragonE.exml" ; } protected partAdded(partName : string , instance : any):void{ super .partAdded(partName , instance); } protected childrenCreated():void{ super .childrenCreated(); this .txt_name.text = "Snow" ; this .img_dragon.source = RES.getRes( "egret_icon_png" ); this .playDragonEff(); } /** *刷新机器人特效 */ public playDragonEff(): void { this .loadChibangByResName( "Robot_json" ); } /** * 异步Robot动画资源 */ private loadChibangByResName(name: string): void { var self = this ; RES.getResAsync(name, function (data: any,key: string): void { if (key == "Robot_json" ) { self.loadChibangByResName( "texture_json" ); } else if (key == "texture_json" ) { self.loadChibangByResName( "texture_png" ); } else if (key == "texture_png" ) { this .showRoleWing(); } }, this ); } /** * 展示Robot特效 */ private showRoleWing(wingId: number): void { this .egretFactory = tools.DragonBoneTools.Instance.createEff2New( "Robot_json" , "texture_json" , "texture_png" , ); let eff_robot : dragonBones.EgretArmatureDisplay = this .egretFactory.buildArmatureDisplay( "robot" ); this .addChild(eff_robot); eff_robot.animation.play( "Run" ,0); eff_robot.x = 250; eff_robot.y = 300; } } } |