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

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

 

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

class BeginScene extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.Init, this)
    }

    public Init() {
        let begin = new egret.TextField();
        begin.text = "Click Begin"
        begin.size = 50;

        this.addChild(begin)
        begin.x = (GameConfig.SceneW - begin.width) / 2;
        begin.y = GameConfig.SceneH/2;
    }
}

然后我們再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兩個方法，前面一個是可以設置容器對象的深度，可以控制對象渲染的層級，比如顯示到前面或者后面，后面一個方法，我的理解就是（先添加就先渲染，后添加就后渲染，后添加的就顯示在前面）

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

然后開始界面就做好了。

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