一个好的游戏，加载页面看着也是让人陶醉的，加载页面就是为了让玩家不会认为这个页面已经停止工作了，毕竟加载资源的时候黑屏大家都很尴尬。
首先是加载资源，加载loading资源肯定是在其他资源未加载的时候去加载，即预加载。
//加载loading组
await RES.loadGroup("loading");
const loadingView = new LoadingUI();
this.stage.addChild(loadingView);首先加载Loading组的资源，loading组配置表如下，都是游戏开始前的素材，分别两张背景，一张loading图片
到这，引擎已经为我们加载好了资源，那么怎么去用呢
public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.createView,this);
//this.createView();
}首先是构造函数，用绑定加载舞台的方法，main.ts异步加载资源和创建loadingUI实例顺序无所谓，但用了普通的调用方法，要注意他们两个的先后一定是先一步加载资源，后创建实例，否则会报错（getRES underfind）。
附上本文源代码
class LoadingUI extends egret.Sprite implements RES.PromiseTaskReporter {
public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.createView,this);
//this.createView();
}
//
private textField: egret.TextField;
//位图文件
private Bg:egret.Bitmap;//背景
private BGimage:egret.Bitmap;//小背景图片
private loadingImage:egret.Bitmap;//loading图标
private async createView() {
this.width = this.stage.stageWidth;
this.height = this.stage.stageHeight;
//加载大背景
this.Bg = new egret.Bitmap();
this.Bg.texture = RES.getRes('loading_jpg');
this.Bg.width = this.width;
this.Bg.height = this.height;
this.addChild(this.Bg);
//加载的背景图片
this.BGimage = new egret.Bitmap()
this.BGimage.texture = RES.getRes('toast-bg_png')
this.BGimage.anchorOffsetX = this.BGimage.width / 2
this.BGimage.anchorOffsetY = this.BGimage.height / 2
this.BGimage.x = this.width / 2
this.BGimage.y = this.height / 2
this.addChild(this.BGimage)
// loading图标
this.loadingImage = new egret.Bitmap()
this.loadingImage.texture = RES.getRes('loading2_png')
//设置锚点
this.loadingImage.anchorOffsetX = this.loadingImage.width / 2
this.loadingImage.anchorOffsetY = this.loadingImage.height / 2
this.loadingImage.x = this.width / 2
this.loadingImage.y = this.height / 2
this.addChild(this.loadingImage)
//文本
this.textField = new egret.TextField();
this.addChild(this.textField);
this.textField.width = 480;
this.textField.height = 20
this.textField.y = this.height / 2 - this.textField.height / 2;
this.textField.size = 14
this.textField.textAlign = "center";
this.addEventListener(egret.Event.ENTER_FRAME,this.onFrame,this);
}
private onFrame() {
if(this.loadingImage) {
this.loadingImage.rotation += 5;
}
}
public onProgress(current: number, total: number): void {
if(this.textField) {
this.textField.text = `Loading...${current}/${total}`;
}
}
}Main.ts里的loadResource（）
private async loadResource() {
try {
await RES.loadConfig("resource/default.res.json", "resource/");
//加载loading组
await RES.loadGroup("loading");
const loadingView = new LoadingUI();
this.stage.addChild(loadingView);
await this.loadTheme();
await RES.loadGroup("preload", 0, loadingView);
this.stage.removeChild(loadingView);
}
catch (e) {
console.error(e);
}
}笔者刚接触白鹭引擎，如有不足还望多多指教，共同学习共同进步。