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，為下次載入資源所用，另外，還會啟動遊戲循環（遊戲循環負責每幀對所有遊戲對象的更新和繪製）

/**
 *
 *资源加载器
 *
**/
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;
});

以上是HTML5遊戲框架cnGameJS開發實錄-資源載入模組程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！