Ⓔeui.ProgressBar 用法

先參考：EUI 如何開始

進遊戲前進度條做法, 期望效果如下圖, 先建立LoadingUI組建

新增 LoadingUISkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.LoadingUISkin" 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

namespace edwin {

    export class LoadingUI extends eui.Component implements RES.PromiseTaskReporter {

        private pb: eui.ProgressBar;

        protected createChildren(): void {
            super.createChildren();
            this.percentWidth = this.percentHeight = 100;
            this.pb.direction = eui.Direction.LTR; // loading bar 由左往右長
        }

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

}

default.thm.json 建立組件類別與皮膚關聯

"edwin.LoadingUI": "resource/game_skins/LoadingUISkin.exml"

改寫 Main.ts loadResource 方法即可

private async loadResource() {
    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 解析完成才能用 eui 元件
    // 而 this.stage.addChild 改成 this.addChild 是因為想加元件在 Main 上而不是 stage
    let loadingView = this.addChild(new edwin.LoadingUI()) as edwin.LoadingUI;
    await RES.loadGroup("preload", 0, loadingView);
    this.removeChild(loadingView);
}