【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;
});