Egret Loading 页面实现方法

实现Loading页面的方法有好多，这里的方法是，使用EUI皮肤的加载页，可配置型和可定制型程度更高，也更易用。但不是最好的方法。

资源的处理

加载页的UI资源是限于preload组资源加载的，所以这两个资源组需要分开处理。加载完并处理相关动画之后才开始加载preload资源组。

资源分组

将loading页面需要用到的资源分一个loading资源组出来。

修改main.js

调整资源加载顺序

main.ts


class Main extends eui.UILayer {
    /**
     * 加载进度界面
     * loading process interface
     */
    private loadingView: LoadingUI;
    protected createChildren(): void {
        super.createChildren();
        //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/");
    }
    /**
     * 配置文件加载完成,开始预加载皮肤主题资源和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.
        //加载皮肤主题配置文件,可以手动修改这个文件。替换默认皮肤。
        let 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.GROUP_PROGRESS, this.onResourceProgress, this);
        RES.addEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this.onItemLoadError, this);

        RES.loadGroup("loading");
    }

    private isThemeLoadEnd: boolean = false;
    /**
     * 主题文件加载完成,开始预加载
     * Loading of theme configuration file is complete, start to pre-load the 
     */
    private onThemeLoadComplete(): void {
        this.isThemeLoadEnd = true;
        this.createScene();
    }
    private isResourceLoadEnd: boolean = false;
    /**
     * preload资源组加载完成
     * preload resource group is loaded
     */
    private onResourceLoadComplete(event: RES.ResourceEvent): void {
        if (event.groupName == 'loading') {
            //设置加载进度界面
            this.loadingView = new LoadingUI();
            this.stage.addChild(this.loadingView);
        }

        if (event.groupName == "preload") {
            this.stage.removeChild(this.loadingView);
            RES.removeEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
            RES.removeEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onResourceLoadError, this);
            RES.removeEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceProgress, this);
            RES.removeEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this.onItemLoadError, this);
            this.isResourceLoadEnd = true;

            this.createScene();

            //调用安卓接口，获取用户信息       
            let userInfo = window.JsAndroidWebView.sendInfoToJs()
            sessionStorage.setItem('androidUserInfo', userInfo)
        }
    }

    private createScene() {
        if (this.isThemeLoadEnd && this.isResourceLoadEnd) {
            this.startCreateScene();
        }
    }
    /**
     * 资源组加载出错
     *  The resource group loading failed
     */
    private onItemLoadError(event: RES.ResourceEvent): void {
        console.warn("Url:" + event.resItem.url + " has failed to load");
    }
    /**
     * 资源组加载出错
     * Resource group loading failed
     */
    private onResourceLoadError(event: RES.ResourceEvent): void {
        //TODO
        console.warn("Group:" + event.groupName + " has failed to load");
        //忽略加载失败的项目
        //ignore loading failed projects
        this.onResourceLoadComplete(event);
    }
    /**
     * preload资源组加载进度
     * loading process of preload resource
     */
    private onResourceProgress(event: RES.ResourceEvent): void {
        if (event.groupName == "preload") {
            this.loadingView.setProgress(event.itemsLoaded, event.itemsTotal);

        }
    }
    private textfield: egret.TextField;
    /**
     * 创建场景界面
     * Create scene interface
     */
    protected startCreateScene(): void {
        this.addChild(new GameScene())
    }
}

Loading页

LoadingUISkin.exml 皮肤

给一个蓝色的矩形背景。

包含用于显示进度条的外框以及一小段进度条。

并且在代码中，添加一个序列帧动画到当前皮肤中。

LoadingUI.ts

添加到动画帧到舞台中，在每一次的资源数回调函数中，播放动画，实现每次加载一个资源，人物的脚步开始运动。

class LoadingUI extends eui.Component {
    private solomc: egret.MovieClip

    public constructor() {
        super();
        this.once(eui.UIEvent.COMPLETE, this.uiComplete,this)
        this.skinName = 'src/LoadingUISkin.exml'
    }

    private uiComplete(e:eui.UIEvent){
        this.initMC()
        RES.loadGroup("preload")
    }

    private initMC(): void {
        let data = RES.getRes('solo_loading_json')
        let txtr = RES.getRes('solo_loading_png') 
        let mcFactory: egret.MovieClipDataFactory = new egret.MovieClipDataFactory(data, txtr)
        this.solomc = new egret.MovieClip(mcFactory.generateMovieClipData('loading'))
        this.solomc.x = 220
        this.solomc.y = 500
        this.addChild(this.solomc)
    }

    private loadingLabel: eui.Label
    private loadingBorder: eui.Image
    private loadingPer: eui.Image

    public setProgress(current: number, total: number): void {
        this.solomc.gotoAndPlay('moving', 1)
        let percentage: string = (current / total * 100).toFixed(0).toString()
        this.loadingLabel.text = `${percentage}`
        this.loadingPer.width = (this.loadingBorder.width - 6) * parseFloat(percentage) / 100
    }
}