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，而按钮处于d起状态时为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，而按钮处于d起状态时为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 音量范围从０（静音）到１（最大音量）
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);
}
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）