本节课的内容是实现一个进度条。与之前学习的内容有着密切的联系。首先是需要通过cc.DrawNode绘制一个节点，画一个四边形。然后通过cc.textureCache.addImageAsync实现异步加载。通过查询API，得知异步加载指定的纹理文件。如果文件图像先前没有被加载,它将创建一个新的Texture2D对象。 否则它将会在一个新线程加载纹理，加载完成时，Texture2D 对象会作为参数调用callback回调函数。回调函数将从主线程调用，所以在回调函数中可以创建任何cocos2d对象。Callback函数中首先需要再次绘制一个四边形，但是右边的两个点是变值，根据进度条的变化进行变化。部分代码如下：
var HelloWorldLayer = cc.Layer.extend({
process:0,
sprite:null,
ctor:function () {
//////////////////////////////
// 1. super init first
this._super();
var size = cc.winSize;
//还记得启动我们之前作业的启动画面吗
//是在main.js cc.LoadScene.preload .....
//这个文件在frameworks/cocos2d-html5/cocos2d/core/scenes/CCloaderScene.js
//有兴趣可以看看引擎源码 其原理是用一个场景加载进度
var allpic=["res/bg.jpg",
"res/h2.png",
"res/walk01.png",
"res/walk02.png",
"res/walk03.png",
"res/walk04.png",
"res/walk05.png"];
//用一个label显示进度
// var tit=new cc.LabelTTF("当前进度0%","",50);
// this.addChild(tit);
// tit.setPosition(size.width/2,size.height/2);
// tit.setTag(100);
//使用异步任务加载所有图片，定义全局进度process
for(var n=0;n<allpic.length;n++)
{ //异步加载图片
cc.textureCache.addImageAsync(allpic[n],this.callback,this);
}
var node1 = new cc.DrawNode();
var label = new cc.LabelTTF("0%","黑体",50);
label.setTag(200);
label.setColor(cc.color(255,255,255));
label.setPosition(size.width/2,size.height/2 + 20);
this.addChild(label,2);
this.addChild(node1,0);
node1.setTag(100);
var point1 = [cc.p(0,200),
cc.p(0,300),
cc.p(size.width,200)];
node1.drawPoly(point1,cc.color(0,255),5,cc.color(255,255));
return true;
},
callback:function()
{
//每个图片加载完成都会回调
//this.process++;
this.process = this.process + 1;
var np=parseInt(this.process*100/5);//计算进度
//this.getChildByTag(100).setString("当前进度"+np+"%");
var point2 = [cc.p(0,
cc.p(np*cc.winSize.width/100,200)];
this.getChildByTag(100).drawPoly(point2,255));
this.getChildByTag(200).setString(np+"%");
if(np==100)
{
//将标记为100和200的子节点移除
this.removeChild(100,true);
this.removeChild(200,true);
var spbg=new cc.Sprite("res/bg.jpg");//这时候就会从缓存读取
this.addChild(spbg,3);
var sphero=new cc.Sprite("res/h2.png");
this.addChild(sphero,4);
spbg.setPosition(cc.winSize.width/2,cc.winSize.height/2);
sphero.setScale(0.3);
sphero.setPosition(200,200);
}
}
});
最后附上作业链接：
http://www.cocoscvp.com/usercode/2016_04_23/e78ffc94df5c28f28e8e699ad4e6e035c463df79/