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);
}
}
}
效果:
上一篇: 【数据分析】苹果公司股票数据处理
下一篇: 手游SDK-动画