Egret學習筆記 (Egret打飛機-4.添加主角飛機和實現飛行效果)

今天繼續寫點擊了開始之后，添加一個飛機到場景中，然后這個飛機的尾巴還在冒火的那種感覺

先拆解一下步驟

1.首先完成飛機容器的圖片加載
2.然后把容器添加到場景中
3.然后實現動畫
*
-首先，我們新建一個TypeScript的類叫做HeroObject，英雄對象，哈哈，我命名水平不怎么高。然后繼承自egret.DisplayObjectContainer

class HeroObject extends egret.DisplayObjectContainer {
	_textures: egret.Texture[] = [];
	_hero: egret.Bitmap;
	public constructor() {
		super();
		this.addEventListener(egret.Event.ADDED_TO_STAGE, () => {
			this._textures[0] = RES.getRes("hero1_png");
			this._textures[1] = RES.getRes("hero2_png");
			this._hero = new egret.Bitmap();
			this._hero.texture = this._textures[0];
			this.width = 100;
			this.height = 122;
			this.addChild(this._hero)
		}, this)
	}

變量_textures是用來保存兩張貼圖，在ADDED_TO_STAGE里面，加載兩張圖到_texture數組里面，然后new一個圖片對象。再設置當前容器的寬高，這里的寬高我們用飛機的圖片的寬高就行了，然后把圖片裝到當前容器里面
-然后把編寫好的飛機對象添加到Main的場景里面去

//移除開始界面，然后加入其它的GameObject
this.removeChild(this.beginScene);
//開始加入Hero
this._Hero = new HeroObject();
this._Hero.Fly(100, 100)
this.addChildAt(this._Hero, 10)

上邊這段代碼是處理 點擊開始 的點擊事件，然后從Main場景中移除開始界面，並且添加飛機到界面上。

這時候，飛機就出現在Main場景的左上角了，但是上面的GIF圖片是飛機的后邊在噴氣，看起來飛機像是在動一樣，那這是怎么做到呢？
看到ADDED_TO_STAGE方法里面的加載了兩張圖，有機智的小伙伴肯定會想到是不是切換圖片？沒錯，就是切換圖片的視覺效果，才讓飛機看起來像是在噴氣飛一樣。

我們先分析一下，Egret的Index.html里面的div中的data-frame-rate屬性，默認是30，從官方文檔中知道，egret默認是每秒30幀，我理解的意思是在理想的環境下面，每秒刷新界面30次（我也是半吊子，說錯了請大家指正一下）
然后我們兩張圖，我們就讓它大致每秒切換兩次算了

_tag: number = 0;
	public frame(e: egret.Event) {
		if (this._tag >= 30) this._tag = 0;
		if (this._tag >= 15) {
			this._hero.texture = this._textures[0];
		}
		else {
			this._hero.texture = this._textures[1];
		}
		this._tag += 1;
	}

我的思路是先放一個tag計數器，每一幀，加1個數，然后小於15的話，就把第一張圖給飛機顯示，大於15的話，就給第二張圖顯示。這樣大致就做到了運行起來，上邊的gif圖的效果了。。。（據說還有更好的實現方式，但是我也是新手，以后再說吧，先實現，再考慮優化的問題）