Building a Game with the Cocos2d-html5 Library - HTML5 Game Development Insights - page 399

// Resize the game canvas when browser size changed
cc.EGLView.getInstance().resizeWithBrowserSize(true);
// turn on display FPS
director.setDisplayStats(this.config['showFPS']);
// set FPS. the default value is 1.0/60 if you don't call this
director.setAnimationInterval(1.0 / this.config['frameRate']);
//load resources
cc.LoaderScene.preload(g_resources, function () {
director.replaceScene(new this.startScene());
}, this);
return true;
}
The first half of the code in Listing 24-3 initializes the director , and it enables the multi-resolution adaptation
feature of the engine and the auto resize event. It is enabled by default on the template. The setSearchPaths feature
code should be removed, and you need to delete the HD and Normal folder under the res directory. Then copy all of
the resources to the res directory.
There are five modes of multi-resolution adaptation.
1. EXACT_FIT : The entire application is visible in the specified area without trying to preserve
the original aspect ratio.
2. NO_BORDER : The entire application fills the specified area without distortion, but possibly
with some cropping, while maintaining the original aspect ratio of the application.
3. SHOW_ALL : The entire application is visible in the specified area without distortion while
maintaining the original aspect ratio of the application. Borders can appear on two sides of
the application.
4. FIXED_HEIGHT : The application takes the height of the design resolution and modifies the
width of the internal canvas so that it fits the aspect ratio of the browser's window.
5. FIXED_WIDTH : The application takes the width of the design resolution and modifies the
height of the internal canvas so that it fits the aspect ratio of the browser's window.
In this game, you'll choose the SHOW_ALL mode. For more details about cocos2d multi-resolution adaptation, visit
http://www.cocos2d-x.org/wiki/Multi_resolution_support .
The rest of the code turns on the statistics display, sets the frame rate, and preloads the resources.
After defining the game display, it is recommended that you configure your project setting in Cocos2d.js
(see Listing 24-4).
Listing 24-4. Project Setting Configuration in Cocos2d.js
( function ( ) {
var d = document ;
var c = {
COCOS2D_DEBUG : 2 , //0 to turn debug off, 1 for basic debug, and 2 for full debug
box2d : false ,
chipmunk : false ,
showFPS : true ,
loadExtension : false ,
frameRate : 60 ,