欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

egret加载资源改成进度条

程序员文章站 2024-03-20 19:56:28
...

在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;
        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);
        }
    }
}

效果:

egret加载资源改成进度条

相关标签: egret白鹭