我們都知道，當遊戲越做越大，資源越來越多的時候，載入資源會造成大量時間的浪費。為避免載入資源時遊戲黑屏，導致玩家誤認為遊戲非正常執行，Loading介面起到至關重要的作用。今天就為大家帶來用Egret製作Loading頁面及分步載入資源的教程。

本文涉及以下內容：

• RES載入Loading介面所使用的資源
• 分步載入資源

載入LoadingUI所需要的資源

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

在Main.ts修改loadResource()函式資源的載入順序，先把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