白鷺のロードリソースの進行状況表示

方法 1

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;
}

方法 2

方法 2 は方法 1 とほぼ同じですが、リソースの読み込みの進行状況が 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}`;
    }
}