egret加載資源改成進度條

在LoadingUI.ts中將代碼替換成下面的就可以了，在準備3張圖片，一張加載頁面背景圖片，一張進度條的條圖片，一張進度條的條背景圖片 放到resource/assets這個文件夾中

class LoadingUI extends egret.Sprite implements RES.PromiseTaskReporter {
    public constructor() {
        super();
        this.createView();

    }
    private textField: egret.TextField;
    private uiContainer: egret.DisplayObjectContainer;
    private img_loadingBg: egret.Bitmap;
    private img_loading0: egret.Bitmap;
    private img_loading1: egret.Bitmap;
    private loadingBg = "resource/assets/bg22.jpg";    //加載頁面背景
    private loading0 = "resource/assets/loading0.png"; //進度條的條
    private loading1 = "resource/assets/loading1.png";  //進度條的 條背景    
    private w: number;
    private h: number;
    private r: number;
    private createView(): void {
        console.log("LoadingUI createView!!!");
        this.w = egret.Capabilities.boundingClientWidth;  //設備的寬
        this.h = egret.Capabilities.boundingClientHeight;
        this.textField = new egret.TextField();  //進度文字

        var urlLoader: egret.URLLoader = new egret.URLLoader();                      
        urlLoader.addEventListener(egret.Event.COMPLETE, this.onComplete, this);
        urlLoader.dataFormat = egret.URLLoaderDataFormat.TEXTURE;
        urlLoader.load(new egret.URLRequest(this.loadingBg));

        var urlLoader: egret.URLLoader = new egret.URLLoader();
        urlLoader.addEventListener(egret.Event.COMPLETE, this.onComplete, this);
        urlLoader.dataFormat = egret.URLLoaderDataFormat.TEXTURE;
        urlLoader.load(new egret.URLRequest(this.loading0));

        var urlLoader: egret.URLLoader = new egret.URLLoader();
        urlLoader.addEventListener(egret.Event.COMPLETE, this.onComplete, this);
        urlLoader.dataFormat = egret.URLLoaderDataFormat.TEXTURE;
        urlLoader.load(new egret.URLRequest(this.loading1));

        this.img_loadingBg = new egret.Bitmap();
        this.img_loading0 = new egret.Bitmap();
        this.img_loading1 = new egret.Bitmap();

        this.uiContainer = new egret.DisplayObjectContainer();
        this.addChild(this.uiContainer);
        this.addChildAt(this.img_loadingBg, 0);
        this.addChild(this.img_loading0);
        this.addChild(this.img_loading1);
        this.addChild(this.textField);

    }

    private onComplete(e: egret.Event): void {   
        var urlLoader: egret.URLLoader = <egret.URLLoader>e.target;
        var texture = urlLoader.data;
        this.img_loading1.width = 0;//這一行代碼是需要的，不然會先100%再顯示加載
        if (urlLoader._request.url == this.loadingBg) {
            this.img_loadingBg.texture = texture;
            var bgW = this.img_loadingBg.width;     
            var bgH = this.img_loadingBg.height;

            console.log(bgW + "背景寬");
            console.log(bgH + "背景高");
            console.log(this.w + "視口寬");
            console.log(this.h + "視口高");
            if(this.w / 640 < this.h / 1136){       
                //W
                this.img_loadingBg.scaleX = 1;   
                this.img_loadingBg.scaleY = this.stage.stageHeight/bgH;

            }else{
                //H
                this.img_loadingBg.scaleY = 1;
                this.img_loadingBg.scaleX = this.stage.stageWidth/bgW;
            }

        } else if (urlLoader._request.url == this.loading0) {
            this.img_loading0.scale9Grid = new egret.Rectangle(5, 5, 10, 10);
            this.img_loading0.width = this.stage.stageWidth -140;
            this.img_loading0.height = 50;

            this.img_loading0.texture = texture;
            this.img_loading0.anchorOffsetX = this.img_loading0.width * 0.5;
            this.img_loading0.anchorOffsetY = this.img_loading0.height * 0.5;
            this.img_loading0.x = this.stage.stageWidth/2;
            this.img_loading0.y = this.stage.stageHeight- 100;

        } else if (urlLoader._request.url == this.loading1) {
            this.img_loading1.scale9Grid = new egret.Rectangle(5, 5, 10, 10);
            this.img_loading1.width = this.stage.stageWidth -140;
            this.img_loading1.height = 50;

            this.img_loading1.texture = texture;
            this.img_loading1.anchorOffsetX = this.img_loading1.width * 0.5;
            this.img_loading1.anchorOffsetY = this.img_loading1.height * 0.5;
            this.img_loading1.x = this.stage.stageWidth/2;
            this.img_loading1.y = this.stage.stageHeight - 100;
            console.log(this.stage.stageWidth +"AAAA"+this.img_loading1.width );

            // this.img_loading1.scaleX =  10;
            this.textField.textColor = 0xffffff;
            this.textField.size = 20;
            this.textField.x =  this.stage.stageWidth / 2 ;

            this.textField.y = 1136 - 110;
            this.textField.width = 480;
            this.textField.height = 100;
        }
    }

    public onProgress(current: number, total: number): void {      //設計尺寸 640 1136 
        //進度文字
        this.textField.text = "" + Math.round((current / total) * 100) + "%";
        //進度條寬度
        if (this.img_loading1 != null) {
            this.img_loading1.width = 400 * (current / total);
        }
    }
}

效果：