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 = 100;//設置尺寸 this.logo.scaleX = this.logo.scaleY = 1.5;//設置縮放 this.logo.rotation = 45;//旋轉 this.logo.skewX = 45;//斜切 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: 280,y: 0 },400).to({ x: 280,y: 300 },500).to({ x: 0,y:300},500).to({ x: 0,y: 0 },200); 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 = 30;//設置字號 label1.width = 120;//如果設置寬度，則文本自動換行 label1.strokeColor = 0xFF0000;//設置描邊顏色，描邊在游戲中的文字上很常見 label1.stroke = 2;//設置描邊大小 //設置坐標 label1.x = 120; label1.y = 100; //支持旋轉和斜切 label1.rotation = 30; label1.skewX = 30; 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,3000);//間隔時間為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 = 100; 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(0,0,100,50); sp.x = 10; sp.y = 10; sp.width = 100; sp.height = 50; sp.touchEnabled = true;//打開點擊方塊中的屬性 this.addChild(sp); //文字說明 var txt1: egret.TextField = new egret.TextField(); txt1.text = "點擊架載第1波30個資源圖片"; txt1.x = 120,txt1.y = 10; this.addChild(txt1); //申請一個Load實例 this.load = new Load(); this.load.x = this.stage.width / 2; this.load.y = 110; 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 / 2;//改變了這個屏幕的中心點的位置，由原來的左上角中的x改為中間點為x的起始值 //底部的進度條 var dark: egret.Bitmap = new egret.Bitmap(RES.getRes("bardark")); dark.x = -dark.width / 2; this.addChild(dark); //上面的進度條 this.bright = new egret.Bitmap(RES.getRes("barbright")); this.bright.x = -this.bright.width / 2; this.addChild(this.bright); this.maskRect = new egret.Rectangle(0,0,0,24);//一開始的遮罩為0 this.bright.mask = this.maskRect; //加載進度說明 this.txt = new egret.TextField(); this.txt.width = 400; this.txt.textAlign = "center"; this.txt.text = "0/30"; this.txt.x = -200; this.txt.y = -40; 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(0,0,per * 256,24);//遮罩的百分比 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="1"; } this.txt.text = value; var v2:string = (parseInt(value)+1).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": 0, "native": 1, "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 = -1;//標志json文件是哪一個 private textureList:Array<string> = ["blood","star","energy","magic"];//將所有的紋理放在一個數組中 private textureIndex:number = 0;//標志紋理集是哪一個？ 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 = 180; this.btn1.width = 100; this.btn1.height = 50; 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 = 180; this.btn2.y = 50; this.btn2.width = 100; this.btn2.height = 50; 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 = 0; } 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 = 0; } 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 = 30; //設置顯示文本 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(0,0,100,100); shape.graphics.endFill(); shape.x = shape.y = 100; 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 = 0; /** * @private */ this.$visible = true; /** * @private * cacheAsBitmap創建的緩存位圖節點。 */ this.$displayList = null; /** * @private */ this.$alpha = 1; this.$touchEnabled = DisplayObject.defaultTouchEnabled; /** * @private */ this.$scrollRect = null; /** * @private */ this.$blendMode = 0; /** * @private * 被遮罩的對象 */ this.$maskedObject = null; /** * @private */ this.$mask = null; /** * @private */ this.$maskRect = null; /** * @private */ this.$parentDisplayList = null; /** * @private * 是否需要重繪的標志，此屬性在渲染時會被訪問，所以單獨聲明一個直接的變量。 */ this.$isDirty = false; /** * @private * 這個對象在舞台上的整體透明度 */ this.$renderAlpha = 1; /** * @private * 相對於顯示列表根節點或位圖緩存根節點上的矩陣對象 */ this.$renderMatrix = new egret.Matrix(); /** * @private * 此顯示對象自身（不包括子項）在顯示列表根節點或位圖緩存根節點上的顯示尺寸。 */ this.$renderRegion = null; this.$displayFlags = 880 /* InitFlags */; this.$DisplayObject = { 0: 1, 1: 1, 2: 0, 3: 0, 4: 0, 5: "", 6: new egret.Matrix(), 7: new egret.Matrix(), 8: new egret.Matrix(), 9: new egret.Rectangle(), 10: new egret.Rectangle(), 11: false, 12: 0, 13: 0, 14: NaN, 15: 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 = 0; this.addChild(appui); } }
SoundUI.ts
/** * 播放器的UI界面，包括播放，暫停，設置音量等 */ class SoundUI extends eui.UILayer { private fontSize = 22; public constructor() { super(); //Panel類定義一個容器，該容器為其子代提供標題欄、關閉按鈕、可移動區域和內容區域 var panel = new eui.Panel(); panel.horizontalCenter = 0; panel.verticalCenter = 0; panel.title = "播放器測試";//標題欄中顯示的標題 panel.width = 400; panel.height = 400; 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 = 5; volumenLabel.y = 210; panel.addChild(volumenLabel); //使用HSlider(水平滑塊)控件，用戶可通過在滑塊軌道的端點之間移動滑塊來選擇值。 var slider = new eui.HSlider(); slider.maximum = 100;//最大有效值 slider.minimum = 0;//最小有效值，規定value屬性的值不能夠低於的最小值 slider.value = 80;//此范圍的當前值 slider.liveDragging = true;//如果為true，則將在沿着軌道拖動滑塊時，而不是在釋放滑塊按鈕時，提交此滑塊的值 slider.addEventListener(egret.Event.CHANGE,(e: egret.Event) => { console.log(slider.pendingValue);//pendingValue:觸摸結束時滑塊將具有的值 music.setVolume(slider.pendingValue); },this); slider.x = 70; slider.y = 210; slider.width = 200; panel.addChild(slider); //toggleButton組件定義切換按鈕。 var play = new eui.ToggleButton(); play.label = "播放"; play.x = 50; play.y = 70; 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 = 150; loop.y = 70; loop.addEventListener(egret.Event.CHANGE,(e: egret.Event) => { if(loop.selected) {//selected：boolean 按鈕處於按下狀態時為true，而按鈕處於彈起狀態時為false music.setLoop(-1); } else { music.setLoop(1); } },this); panel.addChild(loop); var looplable = new egret.TextField(); looplable.text = "循環"; looplable.x = loop.x; looplable.y = loop.y + 27; looplable.size = 20; looplable.textColor = 0x2103cc; panel.addChild(looplable); var pause = new eui.Button(); pause.label = "暫停"; pause.x = 50; pause.y = 120; pause.addEventListener(egret.TouchEvent.TOUCH_TAP,(e: egret.TouchEvent) => { music.pouse(); },this); panel.addChild(pause); var resume = new eui.Button(); resume.label = "恢復"; resume.x = 150; resume.y = 120; 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(4); timelable.textColor = 0x0205cc; timelable.size = this.fontSize; timelable.x = 5; timelable.y = 250; panel.addChild(timelable); this.addEventListener(egret.Event.ENTER_FRAME,(e: egret.Event) => { timelable.text = "播放時間：" + music.showPosition().toFixed(4) + "s"; },this); var inputBg = new eui.Image("resource/assets/CheckBox/checkbox_select_up.png"); inputBg.scale9Grid = new egret.Rectangle(2,2,19,19); inputBg.width = 300; inputBg.height = 25; inputBg.x = 70; inputBg.y = 300 panel.addChild(inputBg); //可編輯文本，用於顯示、滾動、選中和編輯文本 var inputUrl = new eui.EditableText(); inputUrl.width = inputBg.width; inputUrl.height = inputBg.height; inputUrl.x = inputBg.x; inputUrl.y = 300; 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 = 5; 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 = "5"; waring.horizontalCenter = 0; waring.textColor = 0x11cc22; waring.size = 18; waring.fontFamily = "KaiTi"; waring.y = 350; 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 = 0; //默認不循環，設置為負數循環 private loop:number = 1; //當前狀態0位空，1位播放，2位暫停, 3表示加載完成,4表示加載失敗 private status:number = 0; //加載音頻 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 = 3; var waring:string = "加載完成"; console.log(waring); this.dispatchEventWith(egret.Event.COMPLETE,false,waring); } //加載音頻失敗 private onLoadErr (e:egret.IOErrorEvent) { this.status = 4; 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 = 0; this.status = 0; this.play(); } //獲取狀態 public getStatus() { return this.status; } //設置音量 public setVolume (volume:number) { if(this.status === 1) this.soundChannel.volume = volume / 100;//volume:number 音量范圍從0(靜音)至1(最大量) } //顯示播放時間 public showPosition ():number { if(this.status === 1) this.positon = this.soundChannel.position;//position當播放聲音時，position屬性表示聲音文件中當前播放的位置（以秒為單位） return this.positon; } public play() { if(this.status === 4){ this.loadSound(); return; } this.status = 1; 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 = 1):number{ this.loop = loop; if(loop < 0){ this.soundChannel.addEventListener(egret.Event.SOUND_COMPLETE,this.looped,this); } else{ return loop; } } public pouse () { console.log(this.status); if(this.status === 1){ this.positon = this.soundChannel.position; this.soundChannel.stop(); this.status = 2; } return this.positon; } public resume () { if(this.status === 2) this.play(); } public stop () { this.positon = 0; 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); } }