【CSON原创】HTML5游戏框架cnGameJS开发实录(资源加载模块篇)

返回目录

1.功能  

  该模块是游戏的入口,我们通过该模块加载资源,并且在资源加载完成后调用游戏对象的入口函数。另外该模块还包括游戏场景之间的切换,以及加载百分比的计算和显示。

  当开始游戏时,首先传入需要加载的资源列表,然后传入游戏对象,最后传入每个资源加载完成后调用的函数,该函数可以获取加载的百分比。如下:

cnGame.loader.start(["src1","src2","src3"],gameObj,function(loadedPercent){});

  这样的话,会先加载前面传入的三个图像资源,并且每次加载完一张图片,就调用后面的回调函数,该函数可以获取加载的百分比,实现加载界面,告诉用户目前加载的进度之类的功能。当加载完成后,调用游戏对象gameObj的intialize方法,开始游戏。

2.具体实现:

  首先我们看看加载器的代码:

    /**
*图像加载器
*
*/
var loader={
sum:0, //图片总数
loadedCount:0, //图片已加载数
loadingImgs:{}, //未加载图片集合
loadedImgs:{}, //已加载图片集合
/**
*图像加载,之后启动游戏
*
*/
start:function(src,gameObj,onLoad){//可传入src数组或单个src "xxx.jpg" or ["xxx.jpg","ggg,gif","www.png"]

if(cg.core.isArray(src)){
this.sum=src.length;
for(var i=0,len=src.length;i<len;i++){
this.gameObj=gameObj;
this.onLoad=onLoad;
this.loadingImgs[src[i]]=new Image();
this.loadingImgs[src[i]].onload=imgLoad(this);
this.loadingImgs[src[i]].src=src[i];
this.loadingImgs[src[i]].srcPath=src[i];//没有经过自动变换的src
}

}

}

}

  首先,资源加载器保存如下几个字段:已加载资源的列表,未加载资源的列表,资源总数,已加载总数。当调用start方法,加载器就开始遍历图片src数组,并生成image对象进行加载。另外我们需要为每个图片对象保存srcPath,该参数为原始的src参数(因为默认情况下浏览器会把src参数转换成完整的图片路径)。之后就是为每张图片添加onLoad的处理程序,我们需要在该处理程序中进行加载百分比的计算,以及把加载好的图片对象保存进loadedImgs对象,方便用户后续使用。图片加载的处理程序如下:

    /**
*图像加载完毕的处理程序
*
*/
var imgLoad=function(self){
return function(){
self.loadedCount+=1;
self.loadedImgs[this.srcPath]=this;
this.onLoad=null; //保证图片的onLoad执行一次后销毁
self.loadedPercent=Math.floor(self.loadedCount/self.sum*100);
self.onLoad&&self.onLoad(self.loadedPercent);
if(self.loadedPercent===100){
self.loadedCount=0;
self.loadedPercent=0;
loadingImgs={};
if(self.gameObj&&self.gameObj.initialize){
self.gameObj.initialize();
if(cg.loop&&!cg.loop.stop){//结束上一个循环
cg.loop.end();
}
cg.loop=new cg.GameLoop(self.gameObj);//开始新游戏循环
cg.loop.start();
}

}


}
}

  每张图片加载完成后,加载数量加1,把该图像对象保存,并且计算加载完成的百分比。最后还需要删除该图像的处理程序(因为图像已加载完成,处理程序已无用,可以释放掉节约内存资源)。当加载百分比为100%,则重置所有值,并释放loadingImgs,为下次加载资源所用,另外,还会启动游戏循环(游戏循环负责每帧对所有游戏对象的更新和绘制,详情请见:HTML5游戏框架cnGameJS开发实录(游戏循环篇))。

  附上加载器所有源码:

/**
*
*资源加载器
*
*
*/
cnGame.register("cnGame",function(cg){

/**
*图像加载完毕的处理程序
*
*/
var imgLoad=function(self){
return function(){
self.loadedCount+=1;
self.loadedImgs[this.srcPath]=this;
this.onLoad=null; //保证图片的onLoad执行一次后销毁
self.loadedPercent=Math.floor(self.loadedCount/self.sum*100);
self.onLoad&&self.onLoad(self.loadedPercent);
if(self.loadedPercent===100){
self.loadedCount=0;
self.loadedPercent=0;
loadingImgs={};
if(self.gameObj&&self.gameObj.initialize){
self.gameObj.initialize();
if(cg.loop&&!cg.loop.stop){//结束上一个循环
cg.loop.end();
}
cg.loop=new cg.GameLoop(self.gameObj);//开始新游戏循环
cg.loop.start();
}

}


}
}
/**
*图像加载器
*
*/
var loader={
sum:0, //图片总数
loadedCount:0, //图片已加载数
loadingImgs:{}, //未加载图片集合
loadedImgs:{}, //已加载图片集合
/**
*图像加载,之后启动游戏
*
*/
start:function(src,gameObj,onLoad){//可传入src数组或单个src "xxx.jpg" or ["xxx.jpg","ggg,gif","www.png"]

if(cg.core.isArray(src)){
this.sum=src.length;
for(var i=0,len=src.length;i<len;i++){
this.gameObj=gameObj;
this.onLoad=onLoad;
this.loadingImgs[src[i]]=new Image();
this.loadingImgs[src[i]].onload=imgLoad(this);
this.loadingImgs[src[i]].src=src[i];
this.loadingImgs[src[i]].srcPath=src[i];//没有经过自动变换的src
}

}

}

}


this.loader=loader;
});



posted @ 2012-02-14 12:41  Cson  阅读(...)  评论(...编辑  收藏