method one
write LoadingUI.tsa document
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}`;
}
}
Write Main.tsfiles, load resources with RES, and display LoadingUI at the right time
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;
}
way two
Method 2 is roughly the same as method 1, except that the progress of resource loading is directly implemented with the RES.PromiseTaskReporter interface
Write LoadingUI.ts, implement RES.PromiseTaskReporterthe interface, and override onProgressthe method. LoadingUIThen pass in as a parameter when loading resources
// 加载资源组
RES.loadGroup("bird", 0, this.loadingView);
RES.ResourceEvent.GROUP_PROGRESSThis way you don't have to listen to events in Main.ts
Then during the process of loading resources, the engine will call onProgressthe method
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}`;
}
}