1.资源记载方式
(1)Egret引擎是2.0.5。
(2)resource/resource.json文件是:
{
"resources": [
{
"name": "bgImage",
"type": "image",
"url": "assets/bg.jpg"
},
{
"name": "egretIcon",
"type": "image",
"url": "assets/egret_icon.png"
},
{
"name": "description",
"type": "json",
"url": "config/description.json"
}
],
"groups": [
{
"name": "demo2",
"keys": "bgImage,egretIcon"
}
]
}
(3)egretProperties.json中的文档类document_class中的Mian修改为“Demo2”.
(4)Demo2.ts类
/**
*
* @author
*
*/
class Demo2 extends egret.DisplayObjectContainer {
//测试用的位图
private logo: egret.Bitmap;
public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.startGame,this);
}
//游戏启动后,会自动执行此方法
public startGame(): void {
this.loadResource();
}
//加载所需资源
private loadResource(): void
{ //使用所需资源
RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onResourceLoadComplete,this);
//loadConfig的第二个参数用于指定资源根目录
RES.loadConfig("resource/resource.json","resource/");
RES.loadGroup("demo2");
}
//加载完毕后即可使用
private onResourceLoadComplete(event: RES.ResourceEvent): void
{
this.logo = new egret.Bitmap();//创建位图
this.logo.touchEnabled = true;//可点击
this.logo.width = this.logo.height = ;//设置尺寸
this.logo.scaleX = this.logo.scaleY = 1.5;//设置缩放
this.logo.rotation = ;//旋转
this.logo.skewX = ;//斜切
this.logo.anchorX = 0.5;//设置中心点的位置,实现围绕中心旋转
this.logo.texture = RES.getRes("egretIcon");//设置纹理
this.addChild(this.logo);//添加到显示列表
this.startAnimation();//调用运动函数
}
//使用Tween让位图做一些运动,并封装在一个方法内部
private startAnimation(): void
{
var tw = egret.Tween.get(this.logo);
//Tween的执行是串行的,方法执行后,返回自身,这样4个to相连,其实就是依次执行4次to方法。
tw.to({ x: ,y: },).to({ x: ,y: },).to({ x: ,y:},).to({ x: ,y: },);
tw.call(this.startAnimation,this);//最后又调用了一次call,含义是动画完成后,调用startAnimation方法。其实就是产生循环调用的结果,动画会一直执行下去。
} }
2.普通文本
(1)Egret引擎是2.05
(2)egretProperties.json中的文档类document_class中的Mian修改为“Demo2”.
(3)Demo2.ts类
/**
*
* @author
*
*/
class Demo2 extends egret.DisplayObjectContainer { public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.startGame,this);
}
//游戏启动后,会自动执行此方法。
//Canvas有fillText和strokeText两个方法来绘制文本,Egret正式通过这个机制绘制普通文本的。
public startGame(): void {
var label1 = new egret.TextField();//创建TextField实例
label1.fontFamily = "Impact";//设置字体。
label1.textColor = 0xffffff;//设置颜色,和Flash一样,设置16进制的数值
label1.textAlign = "left";//设置文本对齐,可选:left,center,right
label1.text = "English我是光头强\n 你是大熊";//用\n来换行
label1.size = ;//设置字号
label1.width = ;//如果设置宽度,则文本自动换行
label1.strokeColor = 0xFF0000;//设置描边颜色,描边在游戏中的文字上很常见
label1.stroke = ;//设置描边大小
//设置坐标
label1.x = ;
label1.y = ;
//支持旋转和斜切
label1.rotation = ;
label1.skewX = ;
this.addChild(label1);//添加到显示列表
}
}
3.播放音乐
(1)Egret引擎是2.05
(2)egretProperties.json中的文档类document_class中的Mian修改为“Demo2”.
(3)resource/assets中添加hongqinajin.mp3音乐文件。resource/resource.json文件是:
{
"resources": [
{"name":"sfx_die","type":"sound","url":"assets/hongqianjin.mp3"},
{
"name": "description",
"type": "json",
"url": "config/description.json"
} ],
"groups": [
{
"name": "demo2",
"keys": "bgImage,egretIcon"
},
{"name":"demo6","keys":"sfx_die"}
]
}
(4)Demo2.ts类
/**
*
* @author 目前egret支持的音乐格式只有mp3。和图片创建一样,播放音乐也需要先加载音乐文件
*
*
*/
class Demo2 extends egret.DisplayObjectContainer { public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.startGame,this);
}
//游戏启动后,会自动执行此方法
public startGame(): void {
this.loadResource();
}
//加载所需资源
private loadResource(): void { //使用所需资源
RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onResourceLoadComplete,this);
//loadConfig的第二个参数用于指定资源根目录
RES.loadConfig("resource/resource.json","resource/");
RES.loadGroup("demo6");
}
//加载完毕后就可以对音乐文件进行播放和停止的操作
private onResourceLoadComplete(event: RES.ResourceEvent): void {
var sound:egret.Sound = RES.getRes("sfx_die");//获取音乐文件
sound.play();//播放音乐文件 //3秒后音乐播放结束
egret.setTimeout(function() {
sound.pause();//音乐播放结束
},this,);//间隔时间为3秒针 }
}
4.事件
(1)Egret引擎是2.05
(2)egretProperties.json中的文档类document_class中的Mian修改为“Demo2”.
(3)resource/assets中添加hongqinajin.mp3音乐文件。resource/resource.json文件是:
{
"resources": [
{
"name": "bgImage",
"type": "image",
"url": "assets/bg.jpg"
},
{
"name": "egretIcon",
"type": "image",
"url": "assets/egret_icon.png"
},
{
"name": "description",
"type": "json",
"url": "config/description.json"
}
],
"groups": [
{
"name": "demo2",
"keys": "bgImage,egretIcon"
}
]
}
(4)Demo2.ts类
/**
*
* @author :egret采用了和Flash类似的“事件流”机制。事件的基类是Event,所有的事件类从Event扩展而来。
* Egret中的事件支持冒泡机制,在决定事件的时候决定它是否冒泡,同样也就有了target和currentTarget之分.
*
*/
class Demo2 extends egret.DisplayObjectContainer { public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.startGame,this);
}
//游戏启动后,会自动执行此方法
public startGame(): void {
this.loadResource();
}
//加载所需资源
private loadResource(): void { //使用所需资源
RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onResourceLoadComplete,this);
//loadConfig的第二个参数用于指定资源根目录
RES.loadConfig("resource/resource.json","resource/");
RES.loadGroup("demo2");
}
//加载完毕后就可以对文件操作
//显示
private onResourceLoadComplete(): void
{
var container = new egret.DisplayObjectContainer();
container.touchChildren = true;
container.touchEnabled = true;//设置容器是否响应Touch交互
var bitmap1 = new egret.Bitmap(RES.getRes("egretIcon"));
bitmap1.name = "myBitmap";
bitmap1.touchEnabled = true;
container.addChild(bitmap1);
container.name = "myContainer";
container.x = container.y = ;
this.addChild(container); container.addEventListener(egret.TouchEvent.TOUCH_TAP,this.touchHandler,container); }
//事件侦听处理
private touchHandler(event: egret.TouchEvent): void
{
console.log("dddd"+event.type);
var msg: string = event.type;
msg += "\n" + event.stageX + "," + event.stageY;
msg += "\n" + event.localX+ "," + event.localY;
msg += "\n" + event.currentTarget.name + "," + event.target.name;
alert(msg); } }
5.进度条的加载
(1)Egret引擎是2.05
(2)resource/assets中根据resource/resource.json文件配置相关资源。resource/resource.json文件是:
{
"groups":[
{
"keys":"barbright,bardark",
"name":"preload"
},
{
"keys":"x1,x10,x11,x12,x13,x14,x15,x16,x17,x18,x19,x2,x20,x21,x22,x23,x24,x25,x26,x27,x28,x29,x3,x30,x4,x5,x6,x7,x8,x9",
"name":"x30"
},
{
"keys":"",
"name":""
}],
"resources":[
{
"name":"barbright",
"type":"image",
"url":"assets/barbright.png"
},
{
"name":"bardark",
"type":"image",
"url":"assets/bardark.png"
},
{
"name":"x1",
"type":"image",
"url":"assets/x30/x1.png"
},
{
"name":"x10",
"type":"image",
"url":"assets/x30/x10.png"
},
{
"name":"x11",
"type":"image",
"url":"assets/x30/x11.png"
},
{
"name":"x12",
"type":"image",
"url":"assets/x30/x12.png"
},
{
"name":"x13",
"type":"image",
"url":"assets/x30/x13.png"
},
{
"name":"x14",
"type":"image",
"url":"assets/x30/x14.png"
},
{
"name":"x15",
"type":"image",
"url":"assets/x30/x15.png"
},
{
"name":"x16",
"type":"image",
"url":"assets/x30/x16.png"
},
{
"name":"x17",
"type":"image",
"url":"assets/x30/x17.png"
},
{
"name":"x18",
"type":"image",
"url":"assets/x30/x18.png"
},
{
"name":"x19",
"type":"image",
"url":"assets/x30/x19.png"
},
{
"name":"x2",
"type":"image",
"url":"assets/x30/x2.png"
},
{
"name":"x20",
"type":"image",
"url":"assets/x30/x20.png"
},
{
"name":"x21",
"type":"image",
"url":"assets/x30/x21.png"
},
{
"name":"x22",
"type":"image",
"url":"assets/x30/x22.png"
},
{
"name":"x23",
"type":"image",
"url":"assets/x30/x23.png"
},
{
"name":"x24",
"type":"image",
"url":"assets/x30/x24.png"
},
{
"name":"x25",
"type":"image",
"url":"assets/x30/x25.png"
},
{
"name":"x26",
"type":"image",
"url":"assets/x30/x26.png"
},
{
"name":"x27",
"type":"image",
"url":"assets/x30/x27.png"
},
{
"name":"x28",
"type":"image",
"url":"assets/x30/x28.png"
},
{
"name":"x29",
"type":"image",
"url":"assets/x30/x29.png"
},
{
"name":"x3",
"type":"image",
"url":"assets/x30/x3.png"
},
{
"name":"x30",
"type":"image",
"url":"assets/x30/x30.png"
},
{
"name":"x4",
"type":"image",
"url":"assets/x30/x4.png"
},
{
"name":"x5",
"type":"image",
"url":"assets/x30/x5.png"
},
{
"name":"x6",
"type":"image",
"url":"assets/x30/x6.png"
},
{
"name":"x7",
"type":"image",
"url":"assets/x30/x7.png"
},
{
"name":"x8",
"type":"image",
"url":"assets/x30/x8.png"
},
{
"name":"x9",
"type":"image",
"url":"assets/x30/x9.png"
}]
}
(3)Main.ts
class Main extends egret.DisplayObjectContainer {
public constructor(){
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
}
private onAddToStage(event: egret.Event)
{
//初始化Resource资源记载库
RES.addEventListener(RES.ResourceEvent.CONFIG_COMPLETE,this.onConfigComplete,this);
RES.loadConfig("resource/resource.json","resource/");
}
//配置文件加载完成,开始预加载preload资源库
private onConfigComplete(event: RES.ResourceEvent): void
{
RES.removeEventListener(RES.ResourceEvent.CONFIG_COMPLETE,this.onConfigComplete,this);
RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.createGameScene,this);
RES.loadGroup("preload");
}
//perload 资源组加载结束,创建游戏场景
private load: Load;
private createGameScene(event: RES.ResourceEvent): void
{
RES.removeEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.createGameScene,this);
//绘制点击的方块
var sp: egret.Sprite= new egret.Sprite();
sp.graphics.beginFill(0xffffff);
sp.graphics.drawRect(,,,);
sp.x = ;
sp.y = ;
sp.width = ;
sp.height = ;
sp.touchEnabled = true;//打开点击方块中的属性
this.addChild(sp); //文字说明
var txt1: egret.TextField = new egret.TextField();
txt1.text = "点击架载第1波30个资源图片";
txt1.x = ,txt1.y = ;
this.addChild(txt1); //申请一个Load实例
this.load = new Load();
this.load.x = this.stage.width / ; this.load.y = ;
this.addChild(this.load); //点击开始加载
sp.addEventListener(egret.TouchEvent.TOUCH_TAP,this.startLoad,this);
}
private startLoad(): void
{
this.load.startLoad();//记载对象load中的startLoad函数
} }
(4)Load.ts
class Load extends egret.DisplayObjectContainer
{
private maskRect: egret.Rectangle;//一个九宫格
private txt: egret.TextField;
private bright: egret.Bitmap;
public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
}
public onAddToStage(): void
{
this.x = this.stage.stageWidth / ;//改变了这个屏幕的中心点的位置,由原来的左上角中的x改为中间点为x的起始值
//底部的进度条
var dark: egret.Bitmap = new egret.Bitmap(RES.getRes("bardark"));
dark.x = -dark.width / ;
this.addChild(dark);
//上面的进度条
this.bright = new egret.Bitmap(RES.getRes("barbright"));
this.bright.x = -this.bright.width / ;
this.addChild(this.bright); this.maskRect = new egret.Rectangle(,,,);//一开始的遮罩为0
this.bright.mask = this.maskRect; //加载进度说明
this.txt = new egret.TextField();
this.txt.width = ;
this.txt.textAlign = "center";
this.txt.text = "0/30";
this.txt.x = -;
this.txt.y = -;
this.addChild(this.txt);
} public startLoad(): void
{
//加载载资源结束调用onLoadEnd()
RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onLoadEnd,this);
//加载资源的过程,调用onProgress()
RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS,this.onProgress,this);
RES.loadGroup("x30");//记载资源组
}
//记载资源文件过程中
public onProgress(event: RES.ResourceEvent): void
{
this.txt.text = event.itemsLoaded.toString() + "/" + event.itemsTotal.toString();//记载过程中的文字
var per:number = event.itemsLoaded / event.itemsTotal;//记载的百分比。event.itemsLoaded是加载的总量。event.itemsToTal是总共要加载的总量。
this.maskRect = new egret.Rectangle(,,per * ,);//遮罩的百分比
this.bright.mask = this.maskRect;//九宫格赋值给bright的mask属性
}
//记载资源文件结束
public onLoadEnd(): void
{
this.txt.text = "30/30 记载结束";
}
}
6.本地数据存储
(1)Egret引擎是2.05。
(2)Main.ts
//egret实现了本地存储的功能。存储数据需要key和value,都必须是字符串。
class Main extends egret.DisplayObjectContainer{ public constructor() {
super();
this.createGameScene();
} private createGameScene():void{
//申请一个文本框
this.txt = new egret.TextField();
this.txt.text = "点我";
this.addChild(this.txt);
this.touchEnabled = true;//打开文本框的点击属性 this.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onSave,this);//文本框点击的蒋婷 } private txt:egret.TextField
//本案例中的key就是“pro”
private onSave(e:egret.TouchEvent):void{
//egret.localStorage.removeItem("pro");删除数据
//egret.localStorage.clear();//将所有数据清空 var value:string;
//如果能读取到数据,就把数据复制给value,就在文本框txt中显示出来。如果没有读取数据,那么就是文本框就显示1.
if(egret.localStorage.getItem("pro"))
{
value =egret.localStorage.getItem("pro"); //读取数据
}else{
value="";
} this.txt.text = value;
var v2:string = (parseInt(value)+).toString();//每次点击一次,就发生一次监听,也就相当于本函数执行一次,也就是value的值要加1。
egret.localStorage.setItem("pro",v2);//把数组v2存储了在本地了。
} }
7.粒子系统
官方给定的粒子系统中档案非常的乱,现在进行整理如下。
(1)引擎是2.5.4。在官方中下载粒子系统的Particle。注意只需要其中只有三个文件(Particle.d.ts,particle.js,particle.min.js)。不需要其它的文件了。
(2)将上述中的三个文件放到文件夹particle中。放到项目中的libs/modules/中即可。
(3)在egretProperties.json中进行配置。在modules中添加“name”和“path”
{
"native": {
"path_ignore": []
},
"publish": {
"web": ,
"native": ,
"path": "bin-release"
},
"egret_version": "2.5.4",
"modules": [
{
"name": "egret"
},
{
"name": "game"
},
{
"name": "tween"
},
{
"name": "particle",
"path": "../libsrc"
}, {
"name": "res"
} ]
}
不过我郁闷的是path中改为:“path”:"../libs"和“path”:“../libs/modules/particle”都可以。
(4)利用EgretFeather进行制作后得到两个文件,一个是png文理和json文件。拷贝到resource/assets中去,并且在resource.json进行正确的配置,在这里我相信大家都会。这里是官方的resource.json配置。
{
"resources":
[
{"name":"blood","type":"image","url":"assets/particle/blood.png"},
{"name":"star","type":"image","url":"assets/particle/star.png"},
{"name":"energy","type":"image","url":"assets/particle/energy.png"},
{"name":"magic","type":"image","url":"assets/particle/magic.png"},
{"name":"fireworks_json","type":"json","url":"assets/particle/fireworks.json"},
{"name":"fire_json","type":"json","url":"assets/particle/fire.json"},
{"name":"sun_json","type":"json","url":"assets/particle/sun.json"},
{"name":"jellyfish_json","type":"json","url":"assets/particle/jellyfish.json"}
], "groups":
[
{"name":"preload","keys":"blood,star,energy,magic,fireworks_json,fire_json,sun_json,jellyfish_json"}
]
}
(5)到了这一步骤,配置工作都完成了,下面就是代码的运用了。
当然首先是加载资源了。
class Main extends egret.DisplayObjectContainer { /**
* 加载进度界面
*/
private loadingView:LoadingUI; public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
} private onAddToStage(event:egret.Event) {
//设置加载进度界面
this.loadingView = new LoadingUI();
this.stage.addChild(this.loadingView); //初始化Resource资源加载库
RES.addEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
RES.loadConfig("resource/resource.json", "resource/");
} /**
* 配置文件加载完成,开始预加载preload资源组。
*/
private onConfigComplete(event:RES.ResourceEvent):void {
RES.removeEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceProgress, this);
RES.loadGroup("preload");
} /**
* preload资源组加载完成
*/
private onResourceLoadComplete(event:RES.ResourceEvent):void {
if (event.groupName == "preload") {
this.stage.removeChild(this.loadingView);
RES.removeEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
RES.removeEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceProgress, this);
this.createGameScene();
}
} /**
* preload资源组加载进度
*/
private onResourceProgress(event:RES.ResourceEvent):void {
if (event.groupName == "preload") {
this.loadingView.setProgress(event.itemsLoaded, event.itemsTotal);
}
}
//这个上面都在讲述加载资源,下面才是粒子系统运用的代码。 private configList:Array<string> = ["fireworks","fire","sun","jellyfish"];//将所有运用的json文件放到一个数组中
private configIndex:number = -;//标志json文件是哪一个
private textureList:Array<string> = ["blood","star","energy","magic"];//将所有的纹理放在一个数组中
private textureIndex:number = ;//标志纹理集是哪一个?
private system:particle.ParticleSystem;//声明一个粒子系统system
private btn1:egret.TextField;
private btn2:egret.TextField; /**
* 创建游戏场景
*/
private createGameScene():void { this.stage.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onClick, this); //设置换效果的图标
this.btn1 = new egret.TextField();
this.btn1.text = "换效果";
this.addChild(this.btn1);
this.btn1.x = ;
this.btn1.width = ;
this.btn1.height = ;
this.btn1.touchEnabled = true;
this.btn1.addEventListener(egret.TouchEvent.TOUCH_TAP, this.changeEffect, this); //设置换换纹理的图标
this.btn2 = new egret.TextField();
this.btn2.text = "换纹理";
this.addChild(this.btn2);
this.btn2.x = ;
this.btn2.y = ;
this.btn2.width = ;
this.btn2.height = ;
this.btn2.touchEnabled = true;
this.btn2.addEventListener(egret.TouchEvent.TOUCH_TAP, this.changeTexture, this); this.changeEffect();//粒子生函数。
} private onClick(event):void {
if(event.target == this.btn1 || event.target == this.btn2) {//如果点击的不是换纹理图标和换效果的图标那么就返回函数。
return;
}
this.system.emitterX = event.stageX;//粒子系统的位置时点击时位置。也就是鼠标点击哪儿,哪儿生成粒子。
this.system.emitterY = event.stageY;
} private changeEffect():void {
this.configIndex++;//默认采用fireworks.json纹理集
if (this.configIndex >= this.configList.length) {//当configIndex大于长度时就采用fireworks.json这个纹理集
this.configIndex = ;
}
var s = this.configList[this.configIndex];//将json复制给s
var textureS = this.textureList[this.textureIndex];//将纹理集复制给textureS
var texture = RES.getRes(textureS);//获取纹理集
var config = RES.getRes(s + "_json");//获取json文件。 if (this.system) {//如果存在了粒子系统,
this.system.stop();//粒子系统停止制造
this.removeChild(this.system);//移除粒子系统
} this.system = new particle.GravityParticleSystem(texture, config);//生成一个粒子系统
this.addChild(this.system);//粒子系统放到舞台上,否则就不能显示
this.system.start();//粒子系统开始启动
} private changeTexture():void {//改变纹理集
this.textureIndex++;//纹理集增加1
if (this.textureIndex >= this.textureList.length) {//如果textureIndex数目超过其数组长度,那么就复制为0,也就是从头开始
this.textureIndex = ;
}
var s = this.textureList[this.textureIndex];//获取纹理的名字
var texture = RES.getRes(s);//获取纹理
this.system.changeTexture(texture);//粒子系统改变纹理。
}
}
(6)粒子系统中一些重要属性和方法。
ParticleSystem:
(I)publc emissionTime:number=-1;粒子出现的时间,单位是毫秒,取值范围是(0,Number.MAX_VALUE],-1表示无限时间。如果你希望粒子系统之存在几秒毫秒时间,一定要设置。不然粒子系统一定都在创建。
(II)public emitterX:number=0;public emitterY:number=0;也就是粒子系统产生(出现)的位置。
8.callLater()方法
(1)egret.全局函数下定义
(2)public callLater(method:Function,thisObject:any,...args):void
功能:延迟函数到屏幕重绘前执行。
参数:method:Function--要延迟执行的函数
thisObject:any---回调函数的this引用
...args--函数参数列表
(3)
private label: egret.TextField;
private createScene(): void {
//创建TextField对象
this.label = new egret.TextField();
//设置文本颜色
this.label.textColor = 0xFF0000;
//设置字号
this.label.size = ;
//设置显示文本
this.label.text = "Hello Egret";
//添加到显示列表
this.addChild(this.label); console.log("beforCallLater");
//使用callLater实现延迟函数
egret.callLater(this.onCallLater,this);
console.log("afterCallLater");
}
private onCallLater(): void
{
console.log("onCallLater");
this.label.text = "callLater";
}
(4)结果:
打印:
beforCallLater
afterCallLater
onCallLater
屏幕上显示的内容是 callLater
9.getDefinitionByName()方法
(1)egret.全局函数下定义
(2)public getDefinitionByName(name:string):any
功能:返回name参数指定的类的类对象引用
参数:name:string---类的名称
(3)
private createScene(): void {
console.log(egret.getDefinitionByName("egret.DisplayObject"));//egret.DisplayObject对象
console.log(egret.getDefinitionByName("egret.Nothing"));//null var cls: any = egret.getDefinitionByName("egret.Shape");
var shape: egret.Shape = new cls();
shape.graphics.beginFill(0xff00000);
shape.graphics.drawRect(,,,);
shape.graphics.endFill();
shape.x = shape.y = ;
this.addChild(shape);
}
(4)结果
打印:
function DisplayObject() {
_super.call(this);
/**
* @private
* 能够含有子项的类将子项列表存储在这个属性里。
*/
this.$children = null;
/**
* @private
*/
this.$parent = null;
/**
* @private
*/
this.$stage = null;
/**
* @private
* 这个对象在显示列表中的嵌套深度,舞台为1,它的子项为2,子项的子项为3,以此类推。当对象不在显示列表中时此属性值为0.
*/
this.$nestLevel = ;
/**
* @private
*/
this.$visible = true;
/**
* @private
* cacheAsBitmap创建的缓存位图节点。
*/
this.$displayList = null;
/**
* @private
*/
this.$alpha = ;
this.$touchEnabled = DisplayObject.defaultTouchEnabled;
/**
* @private
*/
this.$scrollRect = null;
/**
* @private
*/
this.$blendMode = ;
/**
* @private
* 被遮罩的对象
*/
this.$maskedObject = null;
/**
* @private
*/
this.$mask = null;
/**
* @private
*/
this.$maskRect = null;
/**
* @private
*/
this.$parentDisplayList = null;
/**
* @private
* 是否需要重绘的标志,此属性在渲染时会被访问,所以单独声明一个直接的变量。
*/
this.$isDirty = false;
/**
* @private
* 这个对象在舞台上的整体透明度
*/
this.$renderAlpha = ;
/**
* @private
* 相对于显示列表根节点或位图缓存根节点上的矩阵对象
*/
this.$renderMatrix = new egret.Matrix();
/**
* @private
* 此显示对象自身(不包括子项)在显示列表根节点或位图缓存根节点上的显示尺寸。
*/
this.$renderRegion = null;
this.$displayFlags = /* InitFlags */;
this.$DisplayObject = {
: ,
: ,
: ,
: ,
: ,
: "",
: new egret.Matrix(),
: new egret.Matrix(),
: new egret.Matrix(),
: new egret.Rectangle(),
: new egret.Rectangle(),
: false,
: ,
: ,
: NaN,
: NaN //explicitHeight,
};
}
null
屏幕上显示一个红色的正方形
10.getQualifiedClassName()方法
(1)egret.全局函数下定义
(2)public getQualifiedClassName(value:any):string
功能:返回对象的完全限定类名。
参数:value:any--需要完全限定类名称的对象,可以将任何JavaScript值传递给此方法,包括所有可用的JavaScript类型、对象实例、原始类型(如number)和类对象。
返回:包括完全限定类名称的字符串。
(3)
private createScene(): void {
console.log(egret.getQualifiedClassName(egret.DisplayObject));//egret.DisplayObject
console.log(egret.getQualifiedClassName(window));//Window
}
(4)结果:
egret.DisplayObject
Window
11.音频播放器
(1)Egret引擎2.5.4,新建Egret EUI项目
(2)asset中拷贝音乐,并在default.res.json中配置
(3)Main.ts
/*
* egret2.5 音频播放测试 点击播放按钮从头播发 播放状态下可以暂停和恢复播发。 循环开关开启讲循环播放。
*/ class Main extends eui.UILayer {
protected createChildren(): void {
super.createChildren();
//eui.Theme 皮肤主题
var theme = new eui.Theme("resource/default.thm.json",this.stage);
theme.addEventListener(egret.Event.COMPLETE,this.onLoad,this);
}
private onLoad() {
var appui = new SoundUI();
appui.horizontalCenter = ;
this.addChild(appui);
}
}
SoundUI.ts
/**
* 播放器的UI界面,包括播放,暂停,设置音量等
*/
class SoundUI extends eui.UILayer { private fontSize = ;
public constructor() {
super();
//Panel类定义一个容器,该容器为其子代提供标题栏、关闭按钮、可移动区域和内容区域
var panel = new eui.Panel();
panel.horizontalCenter = ;
panel.verticalCenter = ;
panel.title = "播放器测试";//标题栏中显示的标题
panel.width = ;
panel.height = ; this.addChild(panel); var music = new SoundTest(); //Label是可以呈现一行或多行统一格式文本的UI组件
var volumenLabel = new eui.Label();
volumenLabel.text = "音量";
volumenLabel.textColor = 0x0205cc;
volumenLabel.size = this.fontSize;
volumenLabel.x = ;
volumenLabel.y = ;
panel.addChild(volumenLabel); //使用HSlider(水平滑块)控件,用户可通过在滑块轨道的端点之间移动滑块来选择值。
var slider = new eui.HSlider();
slider.maximum = ;//最大有效值
slider.minimum = ;//最小有效值,规定value属性的值不能够低于的最小值
slider.value = ;//此范围的当前值
slider.liveDragging = true;//如果为true,则将在沿着轨道拖动滑块时,而不是在释放滑块按钮时,提交此滑块的值
slider.addEventListener(egret.Event.CHANGE,(e: egret.Event) => {
console.log(slider.pendingValue);//pendingValue:触摸结束时滑块将具有的值
music.setVolume(slider.pendingValue);
},this);
slider.x = ;
slider.y = ;
slider.width = ;
panel.addChild(slider); //toggleButton组件定义切换按钮。
var play = new eui.ToggleButton();
play.label = "播放";
play.x = ;
play.y = ;
play.addEventListener(egret.Event.CHANGE,(e: egret.TouchEvent) => {
if(play.selected) {//selected:boolean 按钮处于按下状态时为true,而按钮处于弹起状态时为false
music.play();
} else {
music.stop();
}
},this);
panel.addChild(play); //toggleSwitch表示一个开关组件
var loop = new eui.ToggleSwitch();
loop.label = "循环";
loop.x = ;
loop.y = ;
loop.addEventListener(egret.Event.CHANGE,(e: egret.Event) => {
if(loop.selected) {//selected:boolean 按钮处于按下状态时为true,而按钮处于弹起状态时为false
music.setLoop(-);
} else {
music.setLoop();
}
},this);
panel.addChild(loop); var looplable = new egret.TextField();
looplable.text = "循环";
looplable.x = loop.x;
looplable.y = loop.y + ;
looplable.size = ;
looplable.textColor = 0x2103cc;
panel.addChild(looplable); var pause = new eui.Button();
pause.label = "暂停";
pause.x = ;
pause.y = ;
pause.addEventListener(egret.TouchEvent.TOUCH_TAP,(e: egret.TouchEvent) => {
music.pouse();
},this);
panel.addChild(pause); var resume = new eui.Button();
resume.label = "恢复";
resume.x = ;
resume.y = ;
resume.addEventListener(egret.TouchEvent.TOUCH_TAP,(e: egret.TouchEvent) => {
music.resume();
},this);
panel.addChild(resume); var timelable = new eui.Label();
timelable.text = "播放时间: " + music.showPosition().toFixed();
timelable.textColor = 0x0205cc;
timelable.size = this.fontSize;
timelable.x = ;
timelable.y = ;
panel.addChild(timelable); this.addEventListener(egret.Event.ENTER_FRAME,(e: egret.Event) => {
timelable.text = "播放时间:" + music.showPosition().toFixed() + "s";
},this); var inputBg = new eui.Image("resource/assets/CheckBox/checkbox_select_up.png");
inputBg.scale9Grid = new egret.Rectangle(,,,);
inputBg.width = ;
inputBg.height = ;
inputBg.x = ;
inputBg.y =
panel.addChild(inputBg); //可编辑文本,用于显示、滚动、选中和编辑文本
var inputUrl = new eui.EditableText();
inputUrl.width = inputBg.width;
inputUrl.height = inputBg.height;
inputUrl.x = inputBg.x;
inputUrl.y = ;
inputUrl.textColor = 0x000000;
inputUrl.size = this.fontSize;
inputUrl.text = "输入外部音频地址";
panel.addChild(inputUrl); inputUrl.addEventListener(egret.FocusEvent.FOCUS_IN,(e: egret.FocusEvent) => {
inputUrl.text = "";
},this); var button: eui.Button = new eui.Button();
button.label = "加载";
button.x = ;
button.y = inputUrl.y;
button.scaleX = 0.6;
button.scaleY = 0.55;
panel.addChild(button); button.addEventListener(egret.TouchEvent.TOUCH_TAP,(e: egret.TouchEvent) => {
if(inputUrl.text === "先输入外部音频地址")
waring.text = "请先输入地址后再载入";
else
music.setUrl(inputUrl.text);
},this);
music.addEventListener(egret.IOErrorEvent.IO_ERROR,(e: egret.IOErrorEvent) => {
waring.text = e.data;
waring.textColor = 0xcc1122;
},this); var waring: eui.Label = new eui.Label();
waring.text = "";
waring.horizontalCenter = ;
waring.textColor = 0x11cc22;
waring.size = ;
waring.fontFamily = "KaiTi";
waring.y = ;
panel.addChild(waring);
} }
SoundTest.ts
class SoundTest extends egret.Sprite { public constructor (url?:string) { super(); if(url)
this.soundURL = url; this.sound = new egret.Sound();//创建一个Sound对象
this.loadSound();
} private sound:egret.Sound; private soundURL:string = "resource/sound/soundtest.mp3"; private soundChannel:egret.SoundChannel;//SoundChannel类控制引用程序中的声音
//默认播放位置,从头开始的
private positon:number = ;
//默认不循环,设置为负数循环
private loop:number = ;
//当前状态0位空,1位播放,2位暂停, 3表示加载完成,4表示加载失败
private status:number = ;
//加载音频
private loadSound() {
this.sound.once(egret.Event.COMPLETE,this.loadComplete,this);
this.sound.once(egret.IOErrorEvent.IO_ERROR,this.onLoadErr,this);
this.sound.load(this.soundURL);//启动从指定URL加载外部音频文件的过程
}
//加载音频完成
private loadComplete (e:egret.Event) {
this.status = ;
var waring:string = "加载完成";
console.log(waring);
this.dispatchEventWith(egret.Event.COMPLETE,false,waring);
}
//加载音频失败
private onLoadErr (e:egret.IOErrorEvent) {
this.status = ;
var waring:string = "加载失败"+this.soundURL;
console.log(waring);
this.dispatchEventWith(egret.IOErrorEvent.IO_ERROR,false,waring);
}
//设置url并重新加载
public setUrl(url:string) {
this.soundURL = url;
this.loadSound();
}
//设置循环
private looped(e:egret.Event){
this.positon = ;
this.status = ;
this.play();
}
//获取状态
public getStatus() {
return this.status;
}
//设置音量
public setVolume (volume:number) {
if(this.status === )
this.soundChannel.volume = volume / ;//volume:number 音量范围从0(静音)至1(最大量)
}
//显示播放时间
public showPosition ():number { if(this.status === )
this.positon = this.soundChannel.position;//position当播放声音时,position属性表示声音文件中当前播放的位置(以秒为单位)
return this.positon;
} public play() {
if(this.status === ){
this.loadSound();
return;
}
this.status = ;
if(this.soundChannel) this.soundChannel.stop();//stop();void 停止在该声道中播放声音
console.log(this.positon);
this.soundChannel = this.sound.play(this.positon,this.loop);
console.log(this.status);
}
public setLoop(loop:number = ):number{
this.loop = loop;
if(loop < ){
this.soundChannel.addEventListener(egret.Event.SOUND_COMPLETE,this.looped,this);
} else{
return loop;
} }
public pouse () {
console.log(this.status);
if(this.status === ){
this.positon = this.soundChannel.position;
this.soundChannel.stop();
this.status = ;
} return this.positon;
}
public resume () {
if(this.status === )
this.play();
}
public stop () {
this.positon = ;
this.soundChannel.stop();
}
}
12.视频播放器
(1)Egret引擎2.5.4,新建Egret EUI项目
(2)确保加载地址中有视频。
(3)main.ts
class Main extends eui.UILayer {
protected createChildren(): void {
super.createChildren();
var theme = new eui.Theme("resource/default.thm.json",this.stage); this.addChild(new VideoTest());
}
}
VideoTest.ts
/**
*
* @author Video允许在应用程序中使用视频
*
*/
class VideoTest extends egret.DisplayObjectContainer {
private video: egret.Video; public constructor() {
super();
this.video = new egret.Video();
this.video.x = 0;//视频坐标x
this.video.y = 0;//视频坐标y
this.video.width = 640;//视频宽
this.video.height = 320;//视频高
this.video.fullscreen = false;//设置是否全屏(暂不支持移动设备)
this.video.poster = "resource/post.png";//设置loding图 poster:string 视频加载前,或者在不支持将video画canvas的设备上,想要显示的视频截图地址在
this.video.load("http://media.w3.org/2010/05/sintel/trailer.mp4");//load(url:sting):void启动从指定URL加载外部视频文件的过程
this.addChild(this.video);//将视频添加到舞台
//监听视频加载完成
this.video.once(egret.Event.COMPLETE,this.onLoad,this);
//监听视频加载失败
this.video.once(egret.IOErrorEvent.IO_ERROR,this.onLoadErr,this);
}
private onLoad(e: egret.Event) {
var btnPlay: eui.Button = new eui.Button();
btnPlay.label = "播放";
btnPlay.x = this.video.x + 20;
btnPlay.y = this.video.y + this.video.height + 20;
this.addChild(btnPlay);
btnPlay.addEventListener(egret.TouchEvent.TOUCH_TAP,this.play,this); var btnPause: eui.Button = new eui.Button();
btnPause.label = "暂停";
btnPause.x = btnPlay.x + btnPlay.width + 20;
btnPause.y = btnPlay.y;
this.addChild(btnPause);
btnPause.addEventListener(egret.TouchEvent.TOUCH_TAP,this.pause,this); var volume: eui.HSlider = new eui.HSlider();
volume.x = btnPlay.x;
volume.y = btnPlay.y + btnPlay.height + 20;
this.addChild(volume);
volume.value = 100;
volume.maximum = 100;
volume.minimum = 0;
volume.width = 200;
volume.addEventListener(egret.Event.CHANGE,this.setVoluem,this); var screenSwitcher: eui.ToggleSwitch = new eui.ToggleSwitch();
screenSwitcher.label = "全屏";
screenSwitcher.x = btnPause.x + btnPause.width + 20;
screenSwitcher.y = btnPause.y;
screenSwitcher.addEventListener(egret.Event.CHANGE,this.setFullScreen,this);
this.addChild(screenSwitcher); var position: eui.Label = new eui.Label();
position.x = btnPlay.x;
position.y = volume.y + volume.height + 20;
this.addChild(position);
position.addEventListener(egret.Event.ENTER_FRAME,this.showPosition,this); var btnPrintScreen: eui.Button = new eui.Button();
btnPrintScreen.label = "截图";
btnPrintScreen.x = screenSwitcher.x + screenSwitcher.width + 40;
btnPrintScreen.y = btnPlay.y;
this.addChild(btnPrintScreen);
btnPrintScreen.addEventListener(egret.TouchEvent.TOUCH_TAP,this.printScreen,this);
}
private onLoadErr(e:egret.Event)
{
console.log("video load error happend");
}
public play(e: egret.TouchEvent)
{ //play(startTime:number,loop:boolean)播放该视频
this.video.play();
}
public pause(e: egret.TouchEvent)
{ //pause():void 暂停播放
this.video.pause();
}
public setVoluem(e: egret.TouchEvent)
{ //volume:number 音量范围从0(静音)到1(最大音量)
this.video.volume = e.target.value / 100;
}
public setFullScreen(e: egret.Event)
{ //fullscreen:boolean 是否全屏播放这个视频(默认值true)
this.video.fullscreen = e.target.selected; }
public showPosition(e: egret.Event)
{ //position:number 当播放视频时,position属性表示视频文件中当前播放的位置(以妙为单位)
e.target.text = "播放时间:" + this.video.position;
}
public printScreen(e: egret.Event) {
//Video中属性 bitmapData:egret.BitmapData 获取视频的bitmapData,可以将视频绘制到舞台上
//BitmapData对象是一个包含像素数据的数组。
var bitmapData: egret.BitmapData = this.video.bitmapData;
bitmapData = this.video.bitmapData;
//Bitmap类表示用于显示位图图片的显示对象。bitmapData:egret.BitmapData 被引用的BitmapData对象
var bitmap: egret.Bitmap = new egret.Bitmap();
bitmap.bitmapData = bitmapData;
bitmap.x = this.video.x;
bitmap.y = this.video.y + this.video.height + 150;
this.addChild(bitmap);
console.log(bitmapData);
}
}
Egret官方案例学习笔记的更多相关文章
-
GIS案例学习笔记-三维生成和可视化表达
GIS案例学习笔记-三维生成和可视化表达 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:针对栅格或者矢量数值型数据,进行三维可视化表达 操作时间:15分钟 案 ...
-
获取字段唯一值工具- -ArcPy和Python案例学习笔记
获取字段唯一值工具- -ArcPy和Python案例学习笔记 目的:获取某一字段的唯一值,可以作为工具使用,也可以作为函数调用 联系方式:谢老师,135-4855-4328,xiexiaokui# ...
-
面图层拓扑检查和错误自动修改—ArcGIS案例学习笔记
面图层拓扑检查和错误自动修改-ArcGIS案例学习笔记 联系方式:谢老师,135_4855_4328,xiexiaokui#139.com 数据源: gis_ex10\ex01\parcel.shp, ...
-
计算平面面积和斜面面积-ArcGIS案例学习笔记
计算平面面积和斜面面积-ArcGIS案例学习笔记 联系方式:谢老师,135_4855_4328,xiexiaokui#139.com 数据:实验数据\Chp8\Ex5\demTif.tif 平面面积= ...
-
ArcGIS案例学习笔记2_2_等高线生成DEM和三维景观动画
ArcGIS案例学习笔记2_2_等高线生成DEM和三维景观动画 计划时间:第二天下午 教程:Pdf/405 数据:ch9/ex3 方法: 1. 创建DEM SA工具箱/插值分析/地形转栅格 2. 生成 ...
-
ArcGIS案例学习笔记2_2_txtexcel空间可视化和空间插值
ArcGIS案例学习笔记2_2_txt/excel空间可视化和空间插值 计划时间:第二天下午 教程:pdf page=337 数据:chapter8/ex4 方法: 1.加载xy.txt和gdp.tx ...
-
ArcGIS案例学习笔记2_2_模型构建器和山顶点提取批处理
ArcGIS案例学习笔记2_2_模型构建器和山顶点提取批处理 计划时间:第二天下午 背景:数据量大,工程大 目的:自动化,批处理,定制业务流程,不写程序 教程:Pdf/343 数据:chap8/ex5 ...
-
ArcGIS案例学习笔记2_1_山顶点提取最大值提取
ArcGIS案例学习笔记2_1_山顶点提取最大值提取 计划时间:第二天上午 目的:最大值提取 教程:Pdf page=343 数据:chap8/ex5/dem.tif 背景知识:等高线种类 基本等高线 ...
-
ArcGIS案例学习笔记2_1_学校选址适宜性分析
ArcGIS案例学习笔记2_1_学校选址适宜性分析 计划时间:第二天上午 目的:学校选址,适宜性分析 内容:栅格数据分析 教程:pdf page=323 数据:chapter8/ex1/教育,生活,土 ...
随机推荐
-
使用memcache(thinkphp框架学习)
$memcache = new Memcache; $memcache->connect("localhost",11211); $memcache->set('sxt ...
-
Notification在不同版本SDK中的使用
今天总结了一下Notification的使用,发现这个控件在版本上有点扯淡.API11和API16两个分水岭,导致菜鸟在学习的时候比较吃力,受影响的外界因素是多样的,其中比较重要的就是你测试的andr ...
-
JAVA Socket(多个客户同时连接,信息共享) client (java/ruby)
第一步 充分理解Socket 1.什么是socket 所谓socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄.应用程序通常通过"套接字" ...
-
什么时候rootViewController至tabbarController时刻,控制屏幕旋转法
于ios6后,ios系统改变了屏幕旋转的方法,假设您想将屏幕旋转法,在需求rootvc里面制备,例如 UIViewController *viewCtrl = [[UIViewController a ...
-
Inno Setup入门(十六)&mdash;&mdash;Inno Setup类参考(2)
分类: Install Setup 2013-02-02 11:28 815人阅读 评论(0) 收藏 举报 这里将接着在前面的基础上介绍如何在自定义页面上添加按钮.按钮属于Tbutton类,该类继承自 ...
-
C++回顾day02---<;运算符重载>;
一:运算符重载的限制 (一)可以重载的运算符: + - * / % ^ & | ~ ! = < > += -= *= /= %= ^= &= |= << > ...
-
吴恩达机器学习笔记40-用调和平均数F来进行查准率和查全率之间的权衡(Trading Off Precision and Recall by F sore)
在很多应用中,我们希望能够保证查准率和查全率的相对平衡. 我们可以将不同阀值情况下,查全率与查准率的关系绘制成图表,曲线的形状根据数据的不同而不同: 我们希望有一个帮助我们选择这个阀值的方法.一种方法 ...
-
QT 开发小记
1.开发socket网络通信时,需要在.pro 文件中添加 network项 QT += network 2. 报错: mutilple definition of 时,查看 .pro ...
-
OpenStack Q版本新功能以及各核心组件功能对比
OpenStack Q版本已经发布了一段时间了.今天, 小编来总结一下OpenStack Q版本核心组件的各项主要新功能, 再来汇总一下最近2年来OpenStack N.O.P.Q各版本核心组件的主要 ...
-
Chrome 如何让光标快速定位到地址栏-进行搜索
我们经常花费大量的时间来进行使用浏览器搜索网页,如何进行高效的搜索,需要掌握一些快捷键: Windows: Ctrl + L 或 Alt + D 或 F6 Mac: Command + L Linux ...