菜鳥教程丨Egret製作Loading頁面及分步載入資源教程
阿新 • • 發佈:2018-11-05
我們都知道,當遊戲越做越大,資源越來越多的時候,載入資源會造成大量時間的浪費。為避免載入資源時遊戲黑屏,導致玩家誤認為遊戲非正常執行,Loading介面起到至關重要的作用。今天就為大家帶來用Egret製作Loading頁面及分步載入資源的教程。
本文涉及以下內容:
- RES載入Loading介面所使用的資源
- 分步載入資源
載入LoadingUI所需要的資源
把LoadingUI所需要的資源配置到default.res.json的loading組中,組名任意。如下:
在Main.ts修改loadResource()函式資源的載入順序,先把LoadingUI 所需要的資源非同步載入成功,再建立LoadingUI的例項。
privateasyncloadResource() { try{ awaitRES.loadConfig("resource/default.res.json", "resource/");//載入配置表 awaitRES.loadGroup("loading");//載入loading組 constloadingView=newLoadingUI();//建立loadingUI例項 this.stage.addChild(loadingView); awaitRES.loadGroup("preload", 0, loadingView);//載入預設preload組資源,並執行loadingView this.stage.removeChild(loadingView); } catch(e) { console.error(e); } }
如此,資源配置完畢之後就可以在LoaingUI中使用了,下面製作LoaingUI介面
製作LoadingUI介面
本文事例中顯示資源真實載入百分比和圖片百分比,參照如下LoadingUI程式碼。
classLoadingUIextendsegret.SpriteimplementsRES.PromiseTaskReporter{ publicconstructor() { super(); this.createView(); } /**百分比點陣圖*/ privatetextField: egret.BitmapText; /**loadicon */ privateload:egret.Bitmap; /**百分比圖片*/ privateloadBar:egret.Bitmap; /**loadBar背景*/ privateloadBar2:egret.Bitmap; privatecreateView(): void{ this.textField=newegret.BitmapText(); letfnt=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; letbg:egret.Bitmap=newegret.Bitmap(RES.getRes("loadingBG_jpg")); this.addChild(bg); this.load=newegret.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=newegret.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=newegret.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); } publiconProgress(current: number, total: number): void{ /**顯示百分比*/ this.textField.text=Math.ceil((current/total)*100).toString() +"%"; //遮罩 letmask=this.getSectorProgress(Math.ceil((current/total) *360)); this.addChild(mask) this.loadBar.mask=mask; this.addChild(this.textField); } /**loadBar遮罩*/ privategetSectorProgress(angle: number):egret.Shape{ varself=this; varshape:egret.Shape=newegret.Shape(); changeGraphics(angle); returnshape; //繪製shape遮罩 functionchangeGraphics(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中測試分步載入資源,原有的頁面上加上一個按鈕,新增載入資源事件。
//跳轉場景載入資源測試
lettextBtn: egret.TextField=newegret.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);
privateasynconTextBtnClick() {
constloadingView=newLoadingUI();//建立loadingUI例項
this.stage.addChild(loadingView);
awaitRES.loadGroup("testRES", 0, loadingView);//載入預設preload組資源,並執行loadingView
this.stage.removeChild(loadingView);
this.addChild(newTestPanel());
}
按鈕方法關鍵詞async,使用非同步載入執行此事件。測試分步載入資源TestPanel類
classTestPanelextendsegret.Sprite{
publicconstructor() {
super();
this.init();
}
privateinit() {
//原有資源
letbg: egret.Bitmap=newegret.Bitmap( RES.getRes("loadingBG_jpg"));
this.addChild(bg);
//testRES組新的資源
leticon_1: egret.Bitmap=newegret.Bitmap(RES.getRes("sjdj_bg2_png"));
this.addChild(icon_1);
}
}
小結:
通過本文您可以學到Loading頁面製作方法以及資源分步載入思想,有任何技術問題或者認為這篇文章對您有所幫助,歡迎在評論區留言與我們交流互動!
本文原始碼素材連結:https://github.com/shenysun/LoadingT