egret 加载资源进度展示

方式一

编写LoadingUI.ts文件

class LoadingUI extends egret.Sprite {

    public constructor() {
        super();
        this.createView();
    }

    private textField: egret.TextField;

    private createView(): void {
        this.textField = new egret.TextField();
        this.addChild(this.textField);
        this.textField.y = 50;
        this.textField.width = 480;
        this.textField.height = 100;
        this.textField.textAlign = egret.HorizontalAlign.LEFT;
        this.textField.textColor = 0xffffff;
    }

    public setProgress(current:number, total:number):void {
        this.textField.text = `Loading...${current}/${total}`;
    }
}

编写 Main.ts 文件，用RES加载资源，并在合适的时机展示LoadingUI

class Main18 extends egret.DisplayObjectContainer {

  // 加载进度UI
  private loadingView: LoadingUI;

  public constructor() {
    super();
    this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
  }

  private onAddToStage(event: egret.Event) {
    //实例化LoadingUI，并放入stage
    this.loadingView = new LoadingUI();
    this.stage.addChild(this.loadingView);


    // 加载资源配置文件，并监听配置文件加载完毕事件
    RES.addEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
    RES.loadConfig("resource/default.res.json", "resource/");
  }

  // 配置文件加载完毕，加载资源组
  private onConfigComplete(event: RES.ResourceEvent): void {
    // 移除资源配置文件加载完毕的事件
    RES.removeEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
    // 监听 加载资源组完成 事件
    RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
    // 监听 资源组加载进度 事件，加载资源过程中会不停回调
    RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceProgress, this);
    // 加载资源组
    RES.loadGroup("bird");
  }

  private onResourceLoadComplete(event: RES.ResourceEvent) {
    if (event.groupName == "bird") {
      // 加载资源完成后，移除 LoadingUI 
      this.stage.removeChild(this.loadingView);
      // 移除 事件监听
      RES.removeEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);    
      RES.removeEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceProgress, this);
     
    }
  }

  // 加载资源进度回调
  private onResourceProgress(event: RES.ResourceEvent) {    
      if (event.groupName == "bird") {
          // 调用 LoadingUI 里的 setProgress 方法，实时设置资源加载进度
          this.loadingView.setProgress(event.itemsLoaded, event.itemsTotal);
      }
  }

  private textfield: egret.TextField;
}

方式二

方式二与方式一思路大致一样，只不过把资源加载的进度，直接用 RES.PromiseTaskReporter 接口实现

编写 LoadingUI.ts， 实现 RES.PromiseTaskReporter 接口，且重写 onProgress 方法。然后 在加载资源的时候把 LoadingUI 当作参数传入

// 加载资源组
RES.loadGroup("bird", 0, this.loadingView);

这样就不用在Main.ts 里监听RES.ResourceEvent.GROUP_PROGRESS 事件

那么 加载资源的过程中会 由引擎调用 onProgress 方法

class LoadingUI extends egret.Sprite implements RES.PromiseTaskReporter {

    public constructor() {
        super();
        this.createView();
    }

    private textField: egret.TextField;

    private createView(): void {
        this.textField = new egret.TextField();
        this.addChild(this.textField);
        this.textField.y = 50;
        this.textField.width = 480;
        this.textField.height = 100;
        this.textField.textAlign = egret.HorizontalAlign.LEFT;
        this.textField.textColor = 0xffffff;
    }

    public onProgress(current: number, total: number): void {

        this.textField.text = `Loading...${current}/${total}`;
    }
}