Egret制作Loading页面及分步加载资源教程

菜鸟丨Egret制作Loading页面及分步加载资源教程

我们都知道，当游戏越做越大，资源越来越多的时候，加载资源会造成大量时间的浪费。为避免加载资源时游戏黑屏，导致玩家误认为游戏非正常运行，Loading界面起到至关重要的作用。今天就为大家带来用Egret制作Loading页面及分步加载资源的教程。

本文涉及以下内容：

· RES加载Loading界面所使用的资源

· 分步加载资源

加载LoadingUI所需要的资源

把LoadingUI所需要的资源配置到default.res.json的loading组中，组名任意。如下：

在Main.ts修改loadResource()函数资源的加载顺序，先把LoadingUI所需要的资源异步加载成功，再创建LoadingUI的实例。

private async loadResource() {

try {

await RES.loadConfig("resource/default.res.json", "resource/");//加载配置表

await RES.loadGroup("loading");//加载loading组

const loadingView = new LoadingUI();//创建loadingUI实例

this.stage.addChild(loadingView);

await RES.loadGroup("preload", 0, loadingView);//加载默认preload组资源,并执行loadingView

this.stage.removeChild(loadingView);

}

catch (e) {

console.error(e);

}

}

?

如此，资源配置完毕之后就可以在LoaingUI中使用了，下面制作LoaingUI界面

制作LoadingUI界面

本文事例中显示资源真实加载百分比和图片百分比，参照如下LoadingUI代码。

class LoadingUI extends egret.Sprite implements RES.PromiseTaskReporter {

?

public constructor() {

super();

this.createView();

}

/**百分比位图 */

private textField: egret.BitmapText;

/**loadicon */

private load:egret.Bitmap;

/**百分比图片 */

private loadBar:egret.Bitmap;

/**loadBar背景 */

private loadBar2:egret.Bitmap;

?

private createView(): void {

this.textField = new egret.BitmapText();

let fnt = RES.getRes("num_fnt");//加载字体位图

this.textField.text = "0%";

this.textField.font = fnt;

this.textField.textAlign = "center",

this.textField.x = 260,

this.textField.y = 550,

this.textField.width = 130,

this.textField.height = 100;

?

let bg:egret.Bitmap = new egret.Bitmap(RES.getRes("loadingBG_jpg"));

this.addChild(bg);

this.load = new egret.Bitmap(RES.getRes("loading_json.loading_icon_png"));

this.load.anchorOffsetX = this.load.width / 2;

this.load.anchorOffsetY = this.load.height / 2;

this.load.x = 640 / 2;

this.load.y = 1136 / 2;

this.addChild(this.load);

?

this.loadBar2 = new egret.Bitmap(RES.getRes("loading_json.loading_bar1_png"));

this.loadBar2.x = (640 - this.loadBar2.width) / 2;

this.loadBar2.y = (1136 - this.loadBar2.height) / 2;

this.addChild(this.loadBar2);

?

this.loadBar = new egret.Bitmap(RES.getRes("loading_json.loading_bar2_png"));

this.loadBar.x = (640 - this.loadBar.width) / 2;

this.loadBar.y = (1136 - this.loadBar.height) / 2;

this.addChild(this.loadBar);

}

public onProgress(current: number, total: number): void {

/**显示百分比 */

this.textField.text = Math.ceil((current/total)*100).toString() + "%";

//遮罩

let mask = this.getSectorProgress(Math.ceil((current/total) * 360));

this.addChild(mask)

this.loadBar.mask = mask;

this.addChild(this.textField);

}

/**loadBar遮罩 */

private getSectorProgress(angle: number):egret.Shape {

var self = this;

var shape:egret.Shape = new egret.Shape();

changeGraphics(angle);

return shape;

//绘制shape遮罩

function changeGraphics(angle) {

shape.graphics.clear();

shape.graphics.beginFill(16711680);

shape.graphics.moveTo(self.loadBar.x, self.loadBar.y);

shape.graphics.lineTo(self.loadBar.x + self.loadBar.width /2 , self.loadBar.y + self.loadBar.height / 2);

shape.graphics.drawArc(self.loadBar.x + self.loadBar.width /2, self.loadBar.y + self.loadBar.height / 2, self.loadBar.width / 2, 0, angle * Math.PI / 180);

shape.graphics.lineTo(self.loadBar.x + self.loadBar.width /2, self.loadBar.y + self.loadBar.height / 2);

shape.graphics.endFill();

}

}

}

LoadingUI制作完毕，现在运行，即可看到效果。

分步加载资源

分步加载资源和LoadingUI加载方式相同，也同样是为了避免一次性加载太多的资源而造成时间的浪费，加载的同时也可以运行LoadingUI。在资源配置表中继续增加资源组testRES，多加一些preload和loading之外的资源，效果更佳明显。

在Main.ts中测试分步加载资源，原有的页面上加上一个按钮，添加加载资源事件。

//跳转场景加载资源测试

let textBtn: egret.TextField = new egret.TextField();

textBtn.text = "Click! 跳转场景";

textBtn.touchEnabled = true;

textBtn.x = 300;

textBtn.y = 500;

this.addChild(textBtn);

textBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTextBtnClick, this);

?

private async onTextBtnClick() {

const loadingView = new LoadingUI();//创建loadingUI实例

this.stage.addChild(loadingView);

await RES.loadGroup("testRES", 0, loadingView);//加载默认preload组资源,并执行loadingView

this.stage.removeChild(loadingView);

this.addChild(new TestPanel());

}

按钮方法关键词async，使用异步加载执行此事件。测试分步加载资源TestPanel类

class TestPanel extends egret.Sprite {

public constructor() {

super();

this.init();

}

?

private init() {

//原有资源

let bg: egret.Bitmap = new egret.Bitmap( RES.getRes("loadingBG_jpg"));

this.addChild(bg);

//testRES组新的资源

let icon_1: egret.Bitmap = new egret.Bitmap(RES.getRes("sjdj_bg2_png"));

this.addChild(icon_1);

}

}

小结：

通过本文您可以学到Loading页面制作方法以及资源分步加载思想，有任何技术问题或者认为这篇文章对您有所帮助，欢迎在评论区留言与我们交流互动！

本文源码素材链接：https://github.com/shenysun/LoadingT