método uno
escribir LoadingUI.ts
un documento
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}`;
}
}
Escriba Main.ts
archivos, cargue recursos con RES y muestre LoadingUI en el momento adecuado
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;
}
forma dos
El método 2 es aproximadamente el mismo que el método 1, excepto que el progreso de la carga de recursos se implementa directamente con la interfaz RES.PromiseTaskReporter
Escriba LoadingUI.ts
, implemente RES.PromiseTaskReporter
la interfaz y anule onProgress
el método. LoadingUI
Luego páselo como un parámetro al cargar recursos
// 加载资源组
RES.loadGroup("bird", 0, this.loadingView);
RES.ResourceEvent.GROUP_PROGRESS
De esta manera, no tiene que escuchar eventos en Main.ts
Luego, durante el proceso de carga de recursos, el motor llamará onProgress
al método
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}`;
}
}