打開 Egret Wing，新建一個Egret遊戲項目，然後刪掉默認生成的createGameScene方法裏面的東西

然後新建一個BeginScene.ts的文件，作為我們的遊戲的第一個場景

 1 class BeginScene extends egret.DisplayObjectContainer {
 2     public constructor() {
 3         super();
 4         this.addEventListener(egret.Event.ADDED_TO_STAGE, this.Init, this)
 5     }
 6 
 7
 
     public Init() {
 8         let begin = new egret.TextField();
 9         begin.text = "Click Begin"
10         begin.size = 50;
11 
12         this.addChild(begin)
13         begin.x = (GameConfig.SceneW - begin.width) / 2;
14         begin.y = GameConfig.SceneH/2;
15     }
16 }

然後我們再Main.ts裏面的createGameScene方法把這個場景添加到裏面

 /**
     * 創建遊戲場景
     * Create a game scene
     */
    private createGameScene() 
    {
        /**
         * 添加開始場景
         */
        this.beginScene = new BeginScene();
        this.beginScene.width = GameConfig.SceneW;
        this.beginScene.width = GameConfig.SceneH;
        this.addChild(this
 
.beginScene)

    }

然後點擊Wing的調試按鈕，這時候不出意外的話，模擬器中間上就會顯示出Click Begin的字，（如果使用Chrome調試的話，那麽最好切換到手機模式）

光禿禿的幾個字看起來也有點尷尬，我們再來給當前場景弄一個背景層

再在src下新建一個文件 BgContent.ts 然後編寫如下代碼

/**
 * 背景
 */
class BgContent extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.Init, this)
    }

    public Init(): void {
        var shp: egret.Shape = new egret.Shape();
        shp.graphics.beginFill(0x000000, 1);   
        shp.graphics.drawRect(0, 0, GameConfig.SceneW, GameConfig.SceneH);
        shp.graphics.endFill();
        this.addChild(shp);
    }
}

這個背景層就是一個黑色的背景，如果需要自己加圖片或者其他的樣式，就直接在Init裏面寫自己的邏輯就行了

加上背景之後，我們再次把這個背景層添加到Main.ts裏面

/**
     * 創建遊戲場景
     * Create a game scene
     */
    private createGameScene() {

        /**
        * 添加背景層
        */
        var bg = new BgContent();
        bg.name = "bg";
        this.addChildAt(bg, 0)
        /**
         * 添加開始場景
         */
        this.beginScene = new BeginScene();
        this.beginScene.width = GameConfig.SceneW;
        this.beginScene.width = GameConfig.SceneH;
        this.addChild(this.beginScene)

    }

添加到場景的，egret給我們提供了addChildAt和addChild兩個方法，前面一個是可以設置容器對象的深度，可以控制對象渲染的層級，比如顯示到前面或者後面，後面一個方法，我的理解就是（先添加就先渲染，後添加就後渲染，後添加的就顯示在前面）

然後再次點擊調試按鈕，運行我們的代碼

然後開始界面就做好了。

好了，我也要睡覺去了，眼睛都有點疼了

Egret學習筆記 (Egret打飛機-2.開始遊戲)