1.用egret建立一个空的euigame项目;
2.点击f5运行空的项目[他自带了一个加载的txt显示];
EE:资源太少,加载速度太快,童鞋们可能注意不到;
然后,我们在egretwing的资源路径加如下俩文件夹;
loading【放加载界面用的图片】和Pic【放测试loading用的乱七八糟的图片(多复制一些)】
loading文件夹的loadbg是loading的背景图片;
loadback是进度条的背景图片;
loadfill是进度条图片;
自己新建俩个资源组;并且将刚刚的文件拖到对应资源组里面;
3.制作自己的加载界面;
E:(1)在eui_skins文件夹下,兴建LoadingSkin.exml样式文件,点击他;
(2)从左下角的控件位置,拖一个ProgressBar,设置好对应的参数,再拖一个Image作为背景[注意Image再bar前面];
EE:自定loading条的大小长度等,请打开eui.skins里面ProgressbarSkin.exml修改;
对于ProgressBar的一些可以设置的属性介绍:
this.barid.maximum=100;//设置进度条的最大值
this.barid.minimum=0;//设置进度条的最小值
this.barid.width = 200;//设置bar宽
this.barid.height = 40;//高
this.barid.value = 0;//进度条初始值
对于显示的label也在这里;我们可以用他的也可以自定义;
4.找到加载对应的函数,将自定义的界面根据加载进度显示;
EE:到src文件夹下打开LoadingUI.ts脚本;添加修改如下代码:
[添加修改的地方,博主已经做了注释:]
//继承改为eui.Component【可以自定义皮肤】
class LoadingUI extends eui.Component implements RES.PromiseTaskReporter {
public constructor() {
super();
this.skinName="LoadingSkin";//指定好对应的皮肤名称;
this.createView();
}
barid:eui.ProgressBar;
private textField: egret.TextField;
private createView(): void {
this.textField = new egret.TextField();
this.addChild(this.textField);
this.textField.y = 300;
this.textField.width = 480;
this.textField.height = 100;
this.textField.textAlign = "center";
}
//egret加载进度回调的函数
public onProgress(current: number, total: number): void {
this.textField.text = `Loading...${current}/${total}`;
var fill=(current/total);//0,1之间
this.barid.value=fill*100;//进度条显示的进度控制
}
}
5.设置Main.ts脚本中的资源loading顺序;
E:目的是让load界面需要的资源,先load显示出来,再控制其他资源继续loading;
代码修改如下[意义参考注释]:
6.保存编译运行,自定义的进度条界面出来了;
好了,白鹭自定义加载进度条界面 end.... ~ o(* ̄▽ ̄*)o;