我们都知道，当游戏越来越大，资源越来越多的时候，加载资源会造成很多时间的浪费。为了避免加载资源时游戏黑屏，导致玩家误认为游戏没有正常运行，Loading界面起到了至关重要的作用。今天给大家带来一个使用Egret制作Loading页面并一步步加载资源的教程。本文涉及以下内容：·RES加载Loading接口使用的资源·逐步加载资源加载LoadingUI需要的资源将LoadingUI需要的资源配置到default.res.json的加载组中，组名是任意的。如下：修改Main.ts中loadResource()函数资源的加载顺序，先异步加载LoadingUI需要的资源，再创建LoadingUI实例。privateasyncloadResource(){try{awaitRES.loadConfig("resource/default.res.json","resource/");//加载配置表awaitRES.loadGroup("loading");//加载加载组constloadingView=newLoadingUI();//创建一个loadingUI实例this.stage.addChild(loadingView);awaitRES.loadGroup("preload",0,loadingView);//加载默认的preload组资源并执行loadingViewthis.stage.removeChild（加载视图）；}catch(e){console.error(e);这样，资源配置好后，就可以在LoaingUI中使用了。接下来制作LoadingUI界面。制作LoadingUI界面显示本例中资源的真实加载百分比和图片百分比，参考如下LoadingUI代码。classLoadingUIextendsegret.SpriteimplementsRES.PromiseTaskReporter{publicconstructor(){super();这个.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;这个.load.x=640/2;这个.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;这个.addChild(这个.textField);}/**loadBar遮罩*/privategetSectorProgress(angle:number):egret.Shape{varself=this;varshape:egret.Shape=newegret.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="点击！跳转场景";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);//加载默认预加载组资源，并执行loadingViewthis.stage.removeChild(loadingView);this.addChild(newTestPanel());}button方法关键字async使用异步加载执行此事件。测试分步加载资源TestPanelclassclassTestPanelextendsegret.Sprite{publicconstructor(){super();这个。初始化（）；}privateinit(){//原始资源letbg:egret.Bitmap=newegret.位图(RES.getRes("loadingBG_jpg"));this.addChild(bg);//testRES新资源leticon_1:egret.Bitmap=newegret.Bitmap(RES.getRes("sjdj_bg2_png"));这。添加孩子（图标_1）；}}总结：通过本文，可以一步步学习到Loading页面的制作方法和加载资源的思路。如果您有什么技术问题或者觉得本文对您有帮助，欢迎在评论区留言与我们交流！本文来源素材链接：https://github.com/shenysun/L...
