我們都知道,當(dāng)游戲越做越大,資源越來(lái)越多的時(shí)候,加載資源會(huì)造成大量時(shí)間的浪費(fèi)。為避免加載資源時(shí)游戲黑屏,導(dǎo)致玩家誤認(rèn)為游戲非正常運(yùn)行,Loading界面起到至關(guān)重要的作用。今天就為大家?guī)?lái)用Egret制作Loading頁(yè)面及分步加載資源的教程。
本文涉及以下內(nèi)容:
· RES加載Loading界面所使用的資源
· 分步加載資源
加載LoadingUI所需要的資源
把LoadingUI所需要的資源配置到default.res.json的loading組中,組名任意。如下:
在Main.ts修改loadResource()函數(shù)資源的加載順序,先把LoadingUI所需要的資源異步加載成功,再創(chuàng)建LoadingUI的實(shí)例。
private async loadResource() {
try {
await RES.loadConfig("resource/default.res.json", "resource/");//加載配置表
await RES.loadGroup("loading");//加載loading組
const loadingView = new LoadingUI();//創(chuàng)建loadingUI實(shí)例
this.stage.addChild(loadingView);
await RES.loadGroup("preload", 0, loadingView);//加載默認(rèn)preload組資源,并執(zhí)行l(wèi)oadingView
this.stage.removeChild(loadingView);
}
catch (e) {
console.error(e);
}
}
如此,資源配置完畢之后就可以在LoaingUI中使用了,下面制作LoaingUI界面.
制作LoadingUI界面
本文事例中顯示資源真實(shí)加載百分比和圖片百分比,參照如下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制作完畢,現(xiàn)在運(yùn)行,即可看到效果。
分步加載資源
分步加載資源和LoadingUI加載方式相同,也同樣是為了避免一次性加載太多的資源而造成時(shí)間的浪費(fèi),加載的同時(shí)也可以運(yùn)行LoadingUI。在資源配置表中繼續(xù)增加資源組testRES,多加一些preload和loading之外的資源,效果更佳明顯。
在Main.ts中測(cè)試分步加載資源,原有的頁(yè)面上加上一個(gè)按鈕,添加加載資源事件。
//跳轉(zhuǎn)場(chǎng)景加載資源測(cè)試
let textBtn: egret.TextField = new egret.TextField();
textBtn.text = "Click! 跳轉(zhuǎn)場(chǎng)景";
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();//創(chuàng)建loadingUI實(shí)例
this.stage.addChild(loadingView);
await RES.loadGroup("testRES", 0, loadingView);//加載默認(rèn)preload組資源,并執(zhí)行l(wèi)oadingView
this.stage.removeChild(loadingView);
this.addChild(new TestPanel());
}
按鈕方法關(guān)鍵詞async,使用異步加載執(zhí)行此事件。測(cè)試分步加載資源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);
}
}
小結(jié):
通過(guò)本文您可以學(xué)到Loading頁(yè)面制作方法以及資源分步加載思想,有任何技術(shù)問(wèn)題或者認(rèn)為這篇文章對(duì)您有所幫助,歡迎在評(píng)論區(qū)留言與我們交流互動(dòng)!
本文源碼素材鏈接:https://github.com/shenysun/LoadingT
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。