Lostroutes Project Log--add a multi-resolution adaptation in Main.js

The contents of the Main.js code in the initial COCOS2D-JS project are:

/** * A Brief explanation for ' Project.json ': * Here are the content of Project.json file, this is the global configuration F Or your game, you can modify it to customize some behavior. * The detail of each field is under it.  {"Project_type": "JavaScript",//"Project_type" indicate the program language of your project, can ignore this    Field "DebugMode": 1,//"DebugMode" possible values://0-no message would be printed.    1-cc.error, Cc.assert, Cc.warn, Cc.log would print in console.    2-cc.error, Cc.assert, Cc.warn'll print in console.    3-cc.error, Cc.assert would print in console.    4-cc.error, Cc.assert, Cc.warn, Cc.log would print on canvas, and available only on the web.    5-cc.error, Cc.assert, Cc.warn would print on the canvas, available only on the web.    6-cc.error, Cc.assert would print on the canvas, available only on the web. "Showfps": true,//left bottom corner fps information would show WHEn "Showfps" equals true, otherwise it'll be is hide. "Framerate": $,//"framerate" set the wanted frame rate for your game, but the real FPS depends on your game imp    Lementation and the running environment.    "NoCache": false,//"NoCache" set whether your resources would be loaded with a timestamp suffix in the URL.    In this, your resources would be force updated even if the browser holds a cache of it.    It ' s very useful for mobile browser debuging.  "id": "Gamecanvas",//"Gamecanvas" sets the ID of the your canvas element on the Web page, it's useful only on    Web. "Rendermode": 0,//"Rendermode" sets the renderer type, only useful on Web://0-automatically chosen B Y-engine//1-forced to use canvas renderer//2-forced-to-use WebGL renderer, but this would be ignore  D on mobile browsers "Enginedir": "frameworks/cocos2d-html5/",//in debug mode, if you use the whole engine to Develop YOur game, you should specify it relative path with "Enginedir",//And if you is using a single engine file, can    Ignore it.    "Modules": ["cocos2d"],//"modules" defines which modules you'll need in your game, it's useful only on the web, Using this can greatly reduce your game's resource size, and the Cocos Console tool can package your game with only    The modules you set. For details on modules definitions, you can refer to ". /..    /frameworks/cocos2d-html5/modulesconfig.json ". "Jslist": []//"jslist" sets the list of JS files in your game.  } **/Cc.game.onStart=function(){    if(!cc.sys.isnative && document.getElementById ("cocosloading"))//If referenced loading.js, please remove itDocument.body.removeChild (document.getElementById ("cocosloading")); //Pass True to enable Retina display, on Android disabled by default to improve performanceCc.view.enableRetina (Cc.sys.os = = = Cc.sys.OS_IOS?)true:false); //Adjust viewport MetaCc.view.adjustViewPort (true); //uncomment the following line to set a fixed orientation for your game    //cc.view.setOrientation (CC. orientation_portrait);    //Setup The resolution policy and design resolution sizeCc.view.setDesignResolutionSize (960, 640, CC.    Resolutionpolicy.show_all); //The game would be resized when browser size changeCc.view.resizeWithBrowserSize (true); //Load ResourcesAcl Loaderscene.preload (G_resources,function() {Cc.director.runScene (NewHelloworldscene ()); },  This);}; Cc.game.run ();

main.js (origional)

To remove some comments, Main.js looks a bit clearer:

Cc.game.onStart =function(){    if(!cc.sys.isnative && document.getElementById ("cocosloading"))//If referenced loading.js, please remove itDocument.body.removeChild (document.getElementById ("cocosloading")); Cc.view.enableRetina (Cc.sys.os= = = Cc.sys.OS_IOS?true:false); Cc.view.adjustViewPort (true); Cc.view.setDesignResolutionSize (960, 640, CC.    Resolutionpolicy.show_all); Cc.view.resizeWithBrowserSize (true); Acl Loaderscene.preload (G_resources,function() {Cc.director.runScene (NewHelloworldscene ()); },  This);}; Cc.game.run ();

But here are some changes to make, then the revised code is as follows:

function () {    cc.view.setDesignResolutionSize (640, 960, CC). Resolutionpolicy.show_all);    Cc.view.resizeWithBrowserSize (true);     = res.loading_jpg;     // Load Resources    function () {        cc.director.runScene(new  homescene ());      This );}; Cc.game.run ();

There are still some things not modified, such as the original scene is not Helloworldscene but Homescene (although this homescene is not yet, but will be soon)

Another problem here is that the resource file is 640x960, so the project running in the Web project and the Android project actually looks as shown, because the width of the screen is larger than the height so the black area around the left and right side is visible, but because of this, you can see the entire game scene, I personally feel that the test is quite clear, so still choose Show_all.

Lostroutes Project Log--add a multi-resolution adaptation in Main.js