[Cson original] HTML5 game framework cngamejs development record (resource loading module)

Returned directory

1. Functions

This module is the game entry. We load resources through this module and call the entry function of the game object after the resources are loaded. In addition, this module also includes switching between game scenarios and calculating and displaying the loading percentage.

When starting the game, first input the list of resources to be loaded, then input the game object, and finally input the function called after each resource is loaded. This function can get the loading percentage. As follows:

 
Cngame. loader. Start (["src1", "src2", "src3"], gameobj,Function(Loadedpercent ){});
 

In this way, the preceding three image resources will be loaded, and each time an image is loaded, the callback function will be called,This function can get the loading percentage to implement the loading interface and tell users the current loading progress and other functions. After loading, call the intialize method of the game object gameobj to start the game.

2. Specific implementation:

First, let's look at the loader'sCode:

     /*  *
* Image Loader
*  */     
 VaR Loader = {
Sum: 0, //  Total number of images  
 Loadedcount: 0, //  Number of images loaded  
 Loadingimgs :{}, //  Image Set not loaded  
 Loadedimgs :{}, //  Image Set loaded  
          /* *
* After loading images, start the game
*  */     
Start: Function (SRC, gameobj, onload ){ //  You can input an SRC array or a single 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 without automatic transformation  
 }

}

}

}

First, the resource loader saves the following fields: List of loaded resources, list of unloaded resources, total number of resources, and total number of loaded resources. When the start method is called, the loader starts to traverse the image SRC array and generate an image object for loading.In addition, we need to save srcpath for each image object. this parameter is the original SRC parameter (because the browser will convert the SRC parameter to the complete image path by default). The onload processing is added for each image.ProgramIn this processing program, we need to calculate the loading percentage and save the loaded image object to the loadedimgs object for later use. The processing program for image loading is as follows:

     /*  *
* Processing program after image loading
*  */     
 VaR Imgload = Function (Self ){
 Return   Function (){
Self. loadedcount + = 1;
Self. loadedimgs [ This . Srcpath] = This ;
 This . Onload = Null ; //  Ensure that the image is destroyed after the onload is executed once.  
 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 ){ //  End the previous Loop  
 CG. Loop. End ();
}
CG. Loop = New CG. gameloop (self. gameobj ); // Start a new game loop  
 CG. Loop. Start ();
}

}


}
}

After each image is loaded, add 1 to the number of Loaded Images, save the image object, and calculate the percentage of Loaded Images.Finally, you need to delete the processing program of the image (because the image has been loaded and the processing program is useless, it can be released to save memory resources ).When the load percentage is 100%, all values are reset and loadingimgs is released for the next Resource load. In addition, the game loop will also be started (the game loop is responsible for updating and drawing all game objects at each frame. For details, see the HTML5 game framework cngamejs development record (game loop )).

Attach all the source code of the loader:

 /*  *
*
* Resource Loader
*
*  */ 
Cngame. Register ("cngame ", Function (CG ){

 /*  *
* Processing program after image loading
*  */     
 VaR Imgload = Function (Self ){
 Return   Function (){
Self. loadedcount + = 1;
Self. loadedimgs [ This . Srcpath] = This ;
 This . Onload = Null ; //  Ensure that the image is destroyed after the onload is executed once.  
 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 ){ //  End the previous Loop  
 CG. Loop. End ();
}
CG. Loop = New CG. gameloop (self. gameobj ); //  Start a new game loop  
 CG. Loop. Start ();
}

}


}
}
 /* *
* Image Loader
*  */     
 VaR Loader = {
Sum: 0, //  Total number of images  
 Loadedcount: 0, //  Number of images loaded  
 Loadingimgs :{}, //  Image Set not loaded  
 Loadedimgs :{}, // Image Set loaded  
          /*  *
* After loading images, start the game
*  */     
Start: Function (SRC, gameobj, onload ){ //  You can input an SRC array or a single 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 without automatic transformation  
 }

}

}

}


 This . Loader = loader;
});