EUI 如何開始

Step1. 開新 EUI 專案並刪除 Platform.ts, 請將 Main.ts 程式碼精簡如下:（可以拷貝貼上）

class Main extends eui.UILayer {

    protected createChildren(): void {
        super.createChildren();
        egret.lifecycle.onPause = () => egret.ticker.pause();
        egret.lifecycle.onResume = () => egret.ticker.resume();
        egret.registerImplementation("eui.IAssetAdapter", new AssetAdapter());
        egret.registerImplementation("eui.IThemeAdapter", new ThemeAdapter());
        this.runGame();
    }

    private async loadResource() {
        let loadingView = this.stage.addChild(new LoadingUI()) as LoadingUI;
        await RES.loadConfig("resource/default.res.json", "resource/");
        await new Promise(resolve => new eui.Theme("resource/default.thm.json", this.stage).once(eui.UIEvent.COMPLETE, resolve, this));
        await RES.loadGroup("preload", 0, loadingView);
        this.stage.removeChild(loadingView);
    }

    private async runGame() {
        await this.loadResource();
        // --- 給你最乾淨的程式碼, 從這行以下開始寫喔 ---
        console.log('eui教學開始囉!!!');
    }

}

Step2. 了解本文資料結構如圖：

Step3. 先在 src 新建資料夾 adapter 把 AssetAdapter, ThemeAdapter 放進. 其次在 resource 資料夾中新增 game_skins 資料夾, 裡面新建 MainUISkin.exml, 代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.MainUISkin" xmlns:e="http://ns.egret.com/eui">
    <!-- 讓黑色區塊寬高佔滿父元件 -->
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <!-- 建立一個按鈕 id 為 myButton, id 可以給 MainUI 類別引用 -->
    <e:Button id="myButton" label="edwin"/>
</e:Skin>

Step4. src 資料夾下新增 MainUI.ts, 代碼如下：

namespace edwin { // 依照你的喜好定義名稱空間

    export class MainUI extends eui.Component {

        // exml 設定好的按鈕 id 在此會轉成物件, 變數名稱需要跟 id 一樣
        private myButton: eui.Button; 

        // 第一次添加到舞台時會調一次, 僅執行一次
        protected createChildren(): void {
            super.createChildren();
            // 初始化程式放在這
            // eui 的元件跟 shape, sprite 不一樣, this.myButton.touchEnabled 預設是 true, 可以直接用 touch 事件
            this.myButton.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>console.log('click!'),this);
        }

    }

}

Step5. 讓 MainUI 類別與 MainUISkin exml 產生關聯, 請打開 default.thm.json, 加上設定 "edwin.MainUI": "resource/game_skins/MainUISkin.exml" 如圖：

Step6. 回到 Main.ts runGame 函式修改如下：

private async runGame() {
    await this.loadResource();
    // --- 給你最乾淨的程式碼, 從這行以下開始寫喔 ---

    // 新增自定義組建 edwin.MainUI
    let ui = this.addChild(new edwin.MainUI()) as edwin.MainUI;
    // 讓 ui 物件滿版於 Main, Main 繼承 eui.UILayer 為整個 eui 樹的根節點
    // 注意：因爲 ui 滿版, 所以 ui 的子節點 rect 因設定寬高100%也會跟著滿版
    ui.percentWidth = ui.percentHeight = 100; // 可以改寫, 請刪掉此行看 Step8
}

Step7. Compile 執行畫面如下：

Step8. 改寫 MainUI.ts 如下：

namespace edwin { // 依照你的喜好定義名稱空間

    export class MainUI extends eui.Component {

        // exml 設定好的按鈕 id 在此會轉成物件, 變數名稱需要跟 id 一樣
        private myButton: eui.Button; 

        // 第一次添加到舞台時會調一次, 僅執行一次
        protected createChildren(): void {
            super.createChildren();
            // 初始化程式放在這
            // ui.percentWidth = ui.percentHeight = 100; 刪掉, 改寫到這 !!!!!!!!!
            this.percentWidth = this.percentHeight = 100; 
            // eui 的元件跟 shape, sprite 不一樣, this.myButton.touchEnabled 預設是 true, 可以直接用 touch 事件
            this.myButton.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>console.log('click!'),this);
        }

    }

}

總節：乾淨的代碼
保持代碼跟我一樣(default.thm.json 關聯一定要設好)：
Main.ts

class Main extends eui.UILayer {

    protected createChildren(): void {
        super.createChildren();
        egret.lifecycle.onPause = () => egret.ticker.pause();
        egret.lifecycle.onResume = () => egret.ticker.resume();
        egret.registerImplementation("eui.IAssetAdapter", new AssetAdapter());
        egret.registerImplementation("eui.IThemeAdapter", new ThemeAdapter());
        this.runGame();
    }

    private async loadResource() {
        let loadingView = this.stage.addChild(new LoadingUI()) as LoadingUI;
        await RES.loadConfig("resource/default.res.json", "resource/");
        await new Promise(resolve => new eui.Theme("resource/default.thm.json", this.stage).once(eui.UIEvent.COMPLETE, resolve, this));
        await RES.loadGroup("preload", 0, loadingView);
        this.stage.removeChild(loadingView);
    }

    private async runGame() {
        await this.loadResource();
        this.addChild(new edwin.MainUI());
    }

}

MainUI.ts

namespace edwin {

    export class MainUI extends eui.Component {

        protected createChildren(): void {
            super.createChildren();
            this.percentWidth = this.percentHeight = 100;
        }

    }

}

MainUISkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.MainUISkin" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
</e:Skin>