本帖最后由 张宇 于 2015-1-19 17:23 编辑
loading进度条是做游戏的时候常用的一个功能呢,今天有人在群里问到这个问题,几句话说不清楚,还是写个教程说说怎么吧。
附件是源文件,代码都在里面。
主场景上画了一个按钮,点击以后就开始下载30个小图片
- var sp:egret.Sprite = new egret.Sprite();
- sp.graphics.beginFill(0xFFFFFF);
- sp.graphics.drawRect(0,0,100,50);
- sp.x=10;sp.y=10;
- sp.width = 100; sp.height =50;//设置点击区域
- sp.touchEnabled= true;//可点击
- this.addChild(sp);
- //第1个按钮的说明文字
- var txt1:egret.TextField = new egret.TextField();
- txt1.text = "点击加载第1波30个资源图片";
- txt1.x=120; txt1.y=10;
- this.addChild(txt1);
- //第一个loading条
- this.load = new Load();
- this.load.x = this.stage.width/2; this.load.y = 110;
- this.addChild(this.load);
- //点击开始加载
- sp.addEventListener(egret.TouchEvent.TOUCH_TAP,this.startLoad,this);
复制代码
Load.ts是loading条的代码,里面最主要的就是这一段- public onProgress(event:RES.ResourceEvent):void{
- this.txt.text = event.itemsLoaded.toString()+"/"+event.itemsTotal.toString();
- var per:number = event.itemsLoaded/event.itemsTotal;//加载的比例
- this.maskRect = new egret.Rectangle(0,0,per*256,24);//计算遮罩的大小
- this.bright.mask = this.maskRect;
- }
复制代码
进度条的原理是这样的,底部有一个默认的灰色条,表示整个进度的长度。上面是一个亮的条,表示加载的部分。
根据加载的百分比,画一个Rectangle,设置为亮条的遮罩,这样就形成了一个进度条。
貌似除了flash,一般的网页加载都不能实现按照精确的加载字节数显示进度,只能按照文件数量来显示。egret也是这样。
通过event.itemsLoaded得到目前已经加载的文件数量。
event.itemsTotal是要加载的总文件数量。
两个相除就是加载的进度百分比。
最终效果是这样
flash的各种加载样式网上有很多,可以参考一下,原理都是一样的,希望你能做出更酷的效果来。
效果演示地址 egret.zhihuasi.com/loadbar
|
|