Egret之EUI及龙骨基础
本篇主要内容是 ， 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;
}
}
} |
本文转自Aonaufly51CTO博客，原文链接：http://blog.51cto.com/aonaufly/1966048 ，如需转载请自行联系原作者