【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;
});
浙公網安備 33010602011771號