método um
escrever LoadingUI.ts
um 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}`;
}
}
Escreva Main.ts
arquivos, carregue recursos com RES e exiba LoadingUI no momento certo
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;
}
caminho dois
O método 2 é praticamente o mesmo que o método 1, exceto que o progresso do carregamento de recursos é implementado diretamente com a interface RES.PromiseTaskReporter
Write LoadingUI.ts
, implemente RES.PromiseTaskReporter
a interface e substitua onProgress
o método. LoadingUI
Em seguida , passe como parâmetro ao carregar recursos
// 加载资源组
RES.loadGroup("bird", 0, this.loadingView);
RES.ResourceEvent.GROUP_PROGRESS
Desta forma, você não precisa ouvir eventos em Main.ts
Então, durante o processo de carregamento de recursos, o mecanismo chamará onProgress
o 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}`;
}
}