eui-eui.ProgressBar

我想自定義遊戲一開始的 loading 外觀與呈現方式如下圖

先定義皮膚 LoadingUISkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="skins.LoadingUISkin" width="640" height="1136" xmlns:e="http://ns.egret.com/eui">
    <!-- 白色背景 -->
    <e:Rect fillColor="0xFFFFFF" width="100%" height="100%" />
    <!-- 遊戲標題 -->
    <e:Label text="遊戲標題" size="89" textColor="0x000000" horizontalCenter="0" verticalCenter="-134" italic="true" />
    <!-- ProgressBar 元件 -->
    <e:ProgressBar id="pb" horizontalCenter="0" verticalCenter="0">
        <e:Skin>
            <e:Group>
                <!-- 深灰框 -->
                <e:Rect fillColor="0x333333" width="510" height="60" horizontalCenter="0" verticalCenter="0" />
                <!-- 進度條範圍限制在 500x50 -->
                <e:Group width="500" height="50" left="5" verticalCenter="0">
                    <!-- 進度條要加上 id 為 thumb, 且寬高一定要 100% -->
                    <e:Rect id="thumb" fillColor="0xFFCC00" width="100%" height="100%" />
                </e:Group>
                <!-- 進度條上文字 0/100 -->
                <e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0" />
            </e:Group>
        </e:Skin>
    </e:ProgressBar>
</e:Skin>

重新定義組件 LoadingUI.ts

// 繼承 eui.Component 讓組件可以有皮膚. 
// 實作 RES.PromiseTaskReporter, onProgress 讓讀取條可以顯示百分比數值
class LoadingUI extends eui.Component implements RES.PromiseTaskReporter {

    private pb: eui.ProgressBar;

    protected createChildren(): void {
        super.createChildren();
        // 連結 skin
        this.skinName = skins.LoadingUISkin;
    }

    public onProgress(current: number, total: number): void {
        this.pb.value = Math.round(current / total * 100); // 0 到 100
    }

}

主場景部分

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));
        // loadingView 改到此行是因爲要等 default.thm.json 解析完 exml
        let loadingView = this.stage.addChild(new LoadingUI()) as LoadingUI;
        await RES.loadGroup('preload', 0, loadingView);
        this.stage.removeChild(loadingView);
    }

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

    }

}