第一步: (在配置文件default.res.json中)先确定好分步加载资源的资源列表,将loading界面所需要的资源区分出来.
第二步:(在脚本入口文件Main.ts中)修改资源加载顺序以使用loading界面所需的资源!
private async loadResource() { try { await RES.loadConfig("resource/default.res.json", "resource/"); await RES.loadGroup("start"); /*加载start组的资源*/ const loadingView = new LoadingUI(); this.stage.addChild(loadingView); await RES.loadGroup('preload', 0, loadingView) this.stage.removeChild(loadingView); } catch (e) { console.error(e); } }
第三步:(在LoadingUI.ts文件中)修改Loading界面的加载时机
public constructor() { super(); this.addEventListener(egret.Event.ADDED_TO_STAGE,this.createView,this); // this.createView(); }
第四步:(同第三步文件)绘制界面,使用加载好的资源,并获取stage属性调整资源
//例如: private async createView() { this.width = this.stage.stageWidth; this.height = this.stage.stageHeight; // 加载背景图 let bg: egret.Bitmap = new egret.Bitmap(RES.getRes('UI_jiazai_Img_ditu_jpg')); bg.width = this.width; bg.height = this.height; this.addChild(bg); }
注意:这个步骤使用了异步加载的资源,所以该方法也要作为异步方法使用