HTML5 ゲームフレームワーク cnGameJS 開発記録 - リソース読み込みモジュールのコードを詳しく解説

1. 関数

このモジュールは、このモジュールを通じてリソースをロードし、リソースのロードが完了した後にゲームオブジェクトのエントリ関数を呼び出します。さらに、このモジュールにはゲーム シーンの切り替えや、ロード率の計算と表示も含まれています。

ゲームを開始するとき、最初にロードする必要があるリソースのリストを渡し、次にゲームオブジェクトを渡し、最後に各リソースがロードされた後に呼び出される関数を渡します。この関数はロード率を取得できます。以下の通り:

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

この場合、先に渡された 3 つの画像リソースが最初にロードされ、画像がロードされるたびに、次の コールバック関数 が呼び出されます。この関数は、ロード率を取得して実装できます。読み込みインターフェース。現在の読み込み進行状況やその他の機能をユーザーに伝えます。ロードが完了したら、ゲームオブジェクト gameObj の初期化メソッドを呼び出してゲームを開始します。

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

array の走査を開始し、ロード用のイメージ オブジェクトを生成します。 さらに、元の src パラメーターである各画像オブジェクトの srcPath を保存する必要があります (デフォルトでは、ブラウザーは 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 中国語 Web サイトの他の関連記事を参照してください。