需求:一个场景会有很多图片资源,我希望有一个进度条显示加载的细节,而不是用户等半天之后进度条才动一下。
疑问:loader类有loaderResAll方法,也有回调,但是这个回调是加载完所有资源的回调,没找到获取加载进度的方法。
摸索:于是我自己封装了一个加载方法 ,但总觉得不完善,貌似重复造轮子了。
var Load = cc.Class({
name : ‘Load’,
statics : {
instance : null,
getInstance : function(){
if(Load.instance === null){
return Load.instance = new Load;
}
return Load.instance;
}
},
properties: {
tipLabel : cc.Node,
progressNode : cc.Node,
finishCallBack : null,
currentItemID : 0,
currentChildItemID : null,
finishLoadCount : 0,
loadList : [],
callback : null,
data : null,
target : null
},
ctor : function(){
Load.instance = this;
},
initialize : function(config){
this.setTipLabel(config.tipLabel);
this.setFinishedCallBack(config.callback,config.data,config.target);
this.progressNode = config.progressNode;
},
// 设置加载文字空间
setTipLabel : function(tipLabel){
this.tipLabel = tipLabel;
},
// 加载
load : function(){
if(this.loadItem(0) === true){
this.updateLoadLabel(this.loadList[this.finishLoadCount].tip);
}
},
// 更新加载进度文本控件
updateLoadLabel : function(str){
this.tipLabel.getComponent(cc.Label).string = str;
},
// 更新加载进度条
updateLoadingProgress : function(){
var progress = this.finishLoadCount / this.loadList.length;
this.progressNode.getComponent(cc.ProgressBar).progress = progress;
},
// 增加加载项
addLoadItem : function(item){
if(typeof item.root == ‘string’){
return this.loadSingleItem(item);
}else{
return this.loadGroupItem(item);
}
},
// 增加单个加载项
loadSingleItem : function(item){
item.tip = this.getLoadTip(item.name);
item.callbackResourceID = this.loadList.length;
this.setItemCallBack(item,item.callback,item.data,item.target);
this.loadList.push(item);
return item.callbackResourceID;
},
// 增加资源组资源项
loadGroupItem : function(item){
var itemLength = item.root.length;
var itemIDs = [];
for(var i = 0;i < itemLength;i++){
this.loadList.push({root : item.root[i] , tip : this.getLoadTip(item.name,i,itemLength) });
itemIDs.push(this.loadList.length - 1);
}
var finalItem = this.loadList[this.loadList.length - 1];
finalItem.callbackResourceID = itemIDs;
this.setItemCallBack(finalItem,item.callback,item.data,item.target);
return itemIDs;
},
// 加载资源项
loadItem : function(){
var item = this.loadList[this.finishLoadCount];
if(item === undefined){
return false;
}
cc.loader.loadRes(item.root, function (err, resource) {
item.resource = resource;
this.updateLoadStatus();
}.bind(this));
return true;
},
// 获得提示文字
getLoadTip : function(name,currentItemID,itemCount){
var string = '正在加载' + name;
if(currentItemID !== undefined && itemCount !== undefined){
var number = currentItemID + 1;
string += '(' + number + '/' + itemCount + ')';
}
return string;
},
// 设置资源项加载完成回调函数
setItemCallBack : function(item,callback,data,target){
item.callback = callback;
item.data = data;
item.target = target;
},
// 设置加载完成的回调函数
setFinishedCallBack : function(callback,data,target){
if(typeof callback == 'function' && typeof target == 'object'){
this.callback = callback;
this.data = data;
this.target = target;
}
},
// 加载完成一个加载项的回调函数
updateLoadStatus : function(){
this.finishLoadCount += 1;
this.runCallback();
if(this.finishLoadCount === this.loadList.length){
this.finishedLoad();
this.updateLoadLabel('加载完成');
return;
}
this.loadItem();
this.updateLoadLabel(this.loadList[this.finishLoadCount].tip);
this.updateLoadingProgress();
},
// 调用回调函数
runCallback : function(){
var itemID = this.finishLoadCount - 1;
var item = this.loadList[itemID];
if(item.callback !== undefined){
item.callback.call(item.target,{data : item.data , resource : this.getResource(item.callbackResourceID)});
}
},
// 结束加载后进行的操作
finishedLoad : function(){
if(typeof this.callback == 'function' && typeof this.target == 'object'){
this.callback.call(this.target,this.data);
return;
}
cc.error('没有指定加载完成后的回调函数');
},
// 返回得到资源
getResource : function(id){
if(typeof id == 'number'){
return this.getSingleResource(id);
}else{
var resources = [];
for(var i = 0;i < id.length;i++){
resources.push(this.getSingleResource(id[i]));
}
return resources;
}
},
// 获得单个资源
getSingleResource : function(id){
var resource = this.loadList[id].resource;
if(resource === null){
cc.error('资源' + this.loadList[id].root + '不存在');
return;
}
return resource;
}
});
module.exports = Load;