EgretはLoadingページを作成し、段階的にリソースをロードするチュートリアル

ゲームがますます大きくなり、リソースがますます多くなると、リソースをロードすることで多くの時間の浪費をもたらすことを知っています.Loadingインタフェースは、リソースのロード時にゲームの黒い画面が表示され、ゲームが正常に動作していないと誤解されることを避けるために重要な役割を果たします.今日はEgretでLoadingページを作成したり、リソースを段階的にロードしたりするチュートリアルをお届けします.
ここでは、次の内容について説明します.
・RESロードLoadingインタフェースで使用されるリソース・ステップ別ロードリソース
LoadingUIのロードに必要なリソース
LoadingUIに必要なリソースをdefaultに設定します.res.jsonのloadingグループでは、グループ名は任意です.次のようになります.
Mainでts loadResource()関数リソースのロード順序を変更し、LoadingUIに必要なリソースを非同期でロードしてから、LoadingUIのインスタンスを作成します.

 private async loadResource() {
        try {
            await RES.loadConfig("resource/default.res.json", "resource/");//     
            await RES.loadGroup("loading");//  loading 
            const loadingView = new LoadingUI();//  loadingUI  
            this.stage.addChild(loadingView);
            await RES.loadGroup("preload", 0, loadingView);//    preload   ,   loadingView
            this.stage.removeChild(loadingView);
        }
        catch (e) {
            console.error(e);
        }
    }

このように、リソースの配置が完了するとLoaingUIで使用できるようになり、以下、LoaingUIインタフェースを作成する.
LoadingUIインタフェースの作成
この例では、次の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の作成が完了し、実行すると効果が表示されます.
段階的にリソースをロード
段階的にリソースをロードするのはLoadingUIのロード方式と同じで、同時にLoadingUIを実行することもできます.リソース構成テーブルにリソースグループtestRESを追加し続け、preloadとloading以外のリソースを追加すると、より効果的です.
Mainでtsではステップ別にリソースをロードするテストを行い、既存のページにボタンを付けてリソースイベントをロードします.

  //          
        let textBtn: egret.TextField = new egret.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);

    private async onTextBtnClick() {
        const loadingView = new LoadingUI();//  loadingUI  
        this.stage.addChild(loadingView);
        await RES.loadGroup("testRES", 0, loadingView);//    preload   ,   loadingView
        this.stage.removeChild(loadingView);
        this.addChild(new TestPanel());
    }

       async，           。        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);
    }
}

小結:この文章を通じて、Loadingページの作成方法とリソースの段階的なロード思想を学ぶことができます.技術的な問題があるか、この文章が役に立つと思っています.コメントエリアでメッセージを残して、私たちと交流することを歓迎します.ソース素材リンク:https://github.com/shenysun/L...