creator的loader能否获取加载进度

需求:一个场景会有很多图片资源,我希望有一个进度条显示加载的细节,而不是用户等半天之后进度条才动一下。

疑问: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;

试试看用 cc.loader.onProgress 如果设置了,应该都会派发进度信息

2赞
start: function () {
    var self = this;
    cc.loader.onProgress = function (completedCount, totalCount, item) {
        var progress = (completedCount / totalCount).toFixed(2);
        //cc.log("completedCount = "+completedCount+",totalCount="+totalCount+",progress="+progress);
        if(item && item.uuid && progress > self.loadBar.fillRange){
            self.loadBar.fillRange = progress;
        }
    };

    cc.director.loadScene('Hall',null,function () {
        cc.loader.onProgress = null;
    });
},
1赞

万分感谢 。弱弱地说,手册里没有这个方法,建议补充一下。

cc.loader.onProgress这个是加载场景的时候有用,加载本地目录文件夹是没啥用的?

自己把要加载的东西封在一个数组里,然后处理数组就行了

刚做了个项目就用到了

有例子共享吗?