Egret社区
    参考社区一位大佬的源码,他的设计方案是竖屏640*1136,因为我们的游戏是横屏1136*640的,所以在大佬的基础上进行了相应修改,同时也发现了一些无用代码和层级问题,经过修改,供大家参考使用
    这样写的好处就是如果你的项目用到热更新,进度条的图片不用通过RES加载,也不用在default添加图片资源,可以在RES.loadConfig之前显示出来进度条
[HTML] 纯文本查看 复制代码
/**进度条 设计尺寸1136*640 */
class ProgressBar 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/loading/beijing.jpg";    //加载页面背景
	private loading0 = "resource/loading/jindutiao.png"; //进度条的条
	private loading1 = "resource/loading/jinducao.png";  //进度条的 条背景  
	/**总进度 */
	private plan: number;
	private createView(): void {
		console.log("LoadingUI createView!!!");
		//加载背景图片
		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.textField = new egret.TextField();  //进度文字

		//创建容器,添加背景、进度条、进度条背景到容器
		this.uiContainer = new egret.DisplayObjectContainer();
		this.addChild(this.uiContainer);
		//背景
		this.addChildAt(this.img_loadingBg, 0);
		//进度槽
		this.addChild(this.img_loading1);
		//进度条
		this.addChild(this.img_loading0);
		//显示文字
		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;

			//调节背景缩放
			this.img_loadingBg.scaleY = this.W_H_scale("h");
			this.img_loadingBg.scaleX = this.W_H_scale("w");
		} else if (urlLoader._request.url == this.loading1) {//设置进度条背景
			this.img_loading1.texture = texture;

			this.img_loading1.scale9Grid = new egret.Rectangle(25, 7, 28, 35);
			this.img_loading1.width = this.stage.stageWidth - 200;
			this.img_loading1.scaleX = this.W_H_scale("w");
			this.img_loading1.scaleY = this.W_H_scale("h");

			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;



		} else if (urlLoader._request.url == this.loading0) {//设置进度条
			this.img_loading0.texture = texture;
			this.img_loading0.scale9Grid = new egret.Rectangle(25, 7, 28, 35);
			this.img_loading0.width = this.plan = this.stage.stageWidth - 200;
			this.img_loading0.scaleX = this.W_H_scale("w");
			this.img_loading0.scaleY = this.W_H_scale("h");

			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;

			//设置字体
			this.textField.textColor = 0x000000;
			this.textField.size = 27;
			this.textField.bold = true;
			// this.textField.width = 480;
			// this.textField.height = 100;
			this.textField.scaleX = this.W_H_scale("w");
			this.textField.scaleY = this.W_H_scale("h");
			this.textField.anchorOffsetX = this.textField.width * 0.5;
			this.textField.anchorOffsetY = this.textField.height * 0.5;
			this.textField.x = this.stage.stageWidth / 2;
			this.textField.y = this.stage.stageHeight - 80;
			this.textField.text = "资源加载中...";

		}
	}
	/**宽高缩放比例 */
	private W_H_scale(W_or_H): number {
		if (W_or_H == "w") {
			return this.stage.stageWidth / 1136;
		} else if (W_or_H == "h") {
			return this.stage.stageHeight / 640;
		}

	}
	/**设置进度 */
	public onProgress(current: number, total: number): void {      //设计尺寸 1136 640
		if (this.textField != null) {
			//进度文字
			this.textField.text = "资源加载中..." + Math.round((current / total) * 100) + "%";
		}

		//进度条宽度
		if (this.img_loading0 != null) {
			this.img_loading0.width = this.plan * (current / total);
		}
	}
}

分享到 :
1 人收藏

4 个回复

倒序浏览
box_  官方团队 | 2018-9-25 16:00:09
感谢分享
Min丶  初学乍练 | 2018-10-10 17:06:18
发现一只野生小石头
小天辛  登堂入室 | 2018-10-11 11:03:04
6的一批
你好树先生  初学乍练 | 2018-10-11 11:10:16
可以,学习一下
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

习惯那些不曾习惯的习惯。

登堂入室

积分: 15 帖子: 3 精华: 0

楼主热帖

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号

Powered by Discuz! X3.2 © 2001-2019 Comsenz Inc.

返回顶部