Egret飞行模拟-开发记录03-LoadingUI界面

一、非EUI方式

1、LoadingUI里的代码。
class LoadingUI extends egret.Sprite implements RES.PromiseTaskReporter {

    public constructor() {
        super();        
        // 当被添加到舞台的时候触发 (被添加到舞台,说明资源组已经加载完成)
        this.addEventListener(egret.Event.ADDED_TO_STAGE,this.createView,this);
       
    }       

    private loadlable: egret.BitmapText;
    private loadImg: egret.Bitmap // loading图标
    private shape:egret.Shape = new egret.Shape();    

    private createView(): void {
        this.width=this.stage.stageWidth;
        this.height=this.stage.stageHeight;
        //背景色
        let bg:egret.Shape = this.shape;
        bg.graphics.beginFill(0x40BDC9);
        bg.graphics.drawRect(0, 0, this.width, this.height); 
        bg.graphics.endFill();
        this.addChild(this.shape);           
        // 加载位图字体
        this.loadlable = new egret.BitmapText();
        this.loadlable.font = RES.getRes("gameFonts_fnt");;
        this.loadlable.textAlign = "center";
        this.loadlable.verticalAlign = "middle";
        this.loadlable.width = 140;
        this.loadlable.height = 80;                                    
        this.loadlable.x = this.width / 2 - this.loadlable.width / 2;
        this.loadlable.y = this.height / 2 + this.loadlable.height / 2;
        this.addChild(this.loadlable);  
        // loading图标
        this.loadImg = new egret.Bitmap();
        this.loadImg.texture=RES.getRes("loader_png");                                
        this.loadImg.anchorOffsetX = this.loadImg.width / 2;
        this.loadImg.anchorOffsetY = this.loadImg.height / 2;
        this.loadImg.x = this.width / 2;
        this.loadImg.y = this.height / 2;
        this.addChild(this.loadImg);        
    }

    public onProgress(current: number, total: number): void {
        // 计算百分比
        let per = Math.floor((current / total) * 100);
        this.loadlable.text = `${per}%`;
    }
}
2、main.ts里的代码没有变，但是loadResource方法里的加载顺序要搞清楚。核心关键点。
private async runGame() {
        RES.setMaxLoadingThread(1); //防加载卡死
        await this.loadResource();
        this.createGameScene();
    }

    private async loadResource() {
        try {
            await RES.loadConfig("resource/default.res.json", "resource/");
            const loadingView = new LoadingUI();            
            //加载loading组
            await RES.loadGroup("loading");
            this.stage.addChild(loadingView);
            
            await this.loadTheme();
            await RES.loadGroup("preload", 0, loadingView);
            this.stage.removeChild(loadingView);
        }
        catch (e) {
            console.error(e);
        }
    }

 

二、EUI方式（main.ts的加载资源顺序和default.thm.json皮肤配置为核心关键）

1、LoadingUI源码：
class LoadingUI extends eui.Component {

    public lblLoader: eui.BitmapLabel;

    public constructor() {
        super();
        this.skinName = "resource/skins/LoadingSkin.exml";        
    }

    public setProgress(current: number, total: number):void {
        // 计算百分比
        let per = Math.floor((current / total) * 100);
        this.lblLoader.text = `${per}%`;
    }

}

2、main.ts源码：
class Main extends eui.UILayer {

    private loadingView: LoadingUI;

    protected createChildren(): void {
        super.createChildren();

        egret.lifecycle.addLifecycleListener((context) => {
            // custom lifecycle plugin
        })

        egret.lifecycle.onPause = () => {
            egret.ticker.pause();
        }

        egret.lifecycle.onResume = () => {
            egret.ticker.resume();
        }

        //inject the custom material parser
        //注入自定义的素材解析器
        let assetAdapter = new AssetAdapter();
        egret.registerImplementation("eui.IAssetAdapter", assetAdapter);
        egret.registerImplementation("eui.IThemeAdapter", new ThemeAdapter());

        //初始化Resource资源加载库
        RES.addEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
        RES.loadConfig("resource/default.res.json", "resource/");

        /*this.runGame().catch(e => {
            console.log(e);
        })*/
    }

    /**
     * 配置文件加载完成,开始预加载皮肤主题资源和preload资源组。
     * Loading of configuration file is complete, start to pre-load the theme configuration file and the preload resource group
     */
    private onConfigComplete(event:RES.ResourceEvent):void {
        RES.removeEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
        // load skin theme configuration file, you can manually modify the file. And replace the default skin.
        //加载皮肤主题配置文件,可以手动修改这个文件。替换默认皮肤。
        var theme = new eui.Theme("resource/default.thm.json", this.stage);
        theme.addEventListener(eui.UIEvent.COMPLETE, this.onThemeLoadComplete, this);

        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
        RES.addEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onResourceLoadError, this);
        RES.addEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this.onItemLoadError, this);
        RES.loadGroup("loading");
    }
    private isThemeLoadEnd: boolean = false;
    /**
     * 主题文件加载完成,开始预加载
     */
    private onThemeLoadComplete(): void {
        this.isThemeLoadEnd = true;
        this.createScene();
    }
    private isResourceLoadEnd: boolean = false;
    /**
     * 资源组加载完成
     */
    private onResourceLoadComplete(event:RES.ResourceEvent):void {
        if (event.groupName == "loading") {
            RES.removeEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
            RES.removeEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onResourceLoadError, this);
            RES.removeEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this.onItemLoadError, this);
            this.isResourceLoadEnd = true;
            this.createScene();
        }
        if(event.groupName == 'preload'){
            this.startCreateScene();
            this.stage.removeChild(this.loadingView);
        }
    }
    private createScene(){
        if(this.isThemeLoadEnd && this.isResourceLoadEnd){
            //设置加载进度界面
            this.loadingView = new LoadingUI();
            this.stage.addChild(this.loadingView);
            // 加载preload资源组
            RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onResourceLoadComplete,this);
            RES.addEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR,this.onResourceLoadError,this);
            RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS,this.onResourceProgress,this);
            RES.addEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR,this.onItemLoadError,this);
            RES.loadGroup("preload");
        }
    }
    /**
     * 资源组加载出错
     *  The resource group loading failed
     */
    private onItemLoadError(event:RES.ResourceEvent):void {
        console.warn("Url:" + event.resItem.url + " has failed to load");
    }
    /**
     * 资源组加载出错
     */
    private onResourceLoadError(event:RES.ResourceEvent):void {
        //TODO
        console.warn("Group:" + event.groupName + " has failed to load");
        //忽略加载失败的项目
        this.onResourceLoadComplete(event);
    }
    /**
     * preload资源组加载进度
     */
    private onResourceProgress(event:RES.ResourceEvent):void {
        if (event.groupName == "preload") {
            this.loadingView.setProgress(event.itemsLoaded, event.itemsTotal);
        }
    }
    /**
     * 创建场景界面
     */
    protected startCreateScene(): void {
        console.log('start')
        this.playsc1();

    }
    public sc1: eui.Component;
    protected playsc1():void{
        var sc1: eui.Component = new GameLogo();
        this.stage.addChild(sc1);
        this.sc1 = sc1;
    }    
}


3、default.thm.json
{
        "skins": {
                "eui.Button": "resource/eui_skins/ButtonSkin.exml",
                "eui.CheckBox": "resource/eui_skins/CheckBoxSkin.exml",
                "eui.HScrollBar": "resource/eui_skins/HScrollBarSkin.exml",
                "eui.HSlider": "resource/eui_skins/HSliderSkin.exml",
                "eui.Panel": "resource/eui_skins/PanelSkin.exml",
                "eui.TextInput": "resource/eui_skins/TextInputSkin.exml",
                "eui.ProgressBar": "resource/eui_skins/ProgressBarSkin.exml",
                "eui.RadioButton": "resource/eui_skins/RadioButtonSkin.exml",
                "eui.Scroller": "resource/eui_skins/ScrollerSkin.exml",
                "eui.ToggleSwitch": "resource/eui_skins/ToggleSwitchSkin.exml",
                "eui.VScrollBar": "resource/eui_skins/VScrollBarSkin.exml",
                "eui.VSlider": "resource/eui_skins/VSliderSkin.exml",
                "eui.ItemRenderer": "resource/eui_skins/ItemRendererSkin.exml",
                "LoadingUI": "resource/skins/LoadingSkin.exml",
                "GameLogo": "resource/skins/GameLogo.exml"
        },
        "autoGenerateExmlsList": true,
        "exmls": [
                "resource/eui_skins/ButtonSkin.exml",
                "resource/eui_skins/CheckBoxSkin.exml",
                "resource/eui_skins/HScrollBarSkin.exml",
                "resource/eui_skins/HSliderSkin.exml",
                "resource/eui_skins/ItemRendererSkin.exml",
                "resource/eui_skins/PanelSkin.exml",
                "resource/eui_skins/ProgressBarSkin.exml",
                "resource/eui_skins/RadioButtonSkin.exml",
                "resource/eui_skins/ScrollerSkin.exml",
                "resource/eui_skins/TextInputSkin.exml",
                "resource/eui_skins/ToggleSwitchSkin.exml",
                "resource/eui_skins/VScrollBarSkin.exml",
                "resource/eui_skins/VSliderSkin.exml",
                "resource/skins/GameLogo.exml",
                "resource/skins/LoadingSkin.exml"
        ],
        "path": "resource/default.thm.json"
}