Home > Developer > JavaScript
1. Setting the screen adaptation policy (Resolution policy) If you haven't used Resolution policy, Just after the game loading process is complete (in the Cc.game.onStart function callback), call the following code: Cc.view.setDesignResolutionSize (320,&NBSP;480,&NBSP;CC. Resolutionpolicy.show_all); The first two parameters of the Setdesignresolutionsize function are the game resolution you want to use in your code, and the third parameter is the adaptation scheme you choose. There are 5 adaptation schemes built into the engine, each of which has its own unique behavior, as described below. If you have set the design resolution, then you can set your Resolution policy:cc.view.setresolutionpolicy directly (CC. Resolutionpolicy.no_border); Native games always use full screen space, but on the Web your Web page may have other visual or textual elements in addition to the game, or perhaps you need to design a nice border for your game. So the adaptation scheme of the Web engine in Cocos2d-js will default to the parent node of the game canvas element, and if you want the game scene to fit the browser screen, just place the canvas directly under the body:<body> <canvas id= "Gamecanvas" ></canvas></body>2. Resolution The benefits of using resolution policy in the sense of policy are obvious, regardless of the device screen size or the aspect ratio of the browser window, your game scene will be automatically shrunk to the screen size. More importantly, in the game code, you will always use the game resolution you designed to decorate the game scene. For example, if you set the design resolution to 320 * 480, the coordinates of your game window's upper-right corner will always be (320, 480) in the game code (the height of the fixed_width mode may be scaled, as well as the Fixed_ The width may be scaled in height mode, as described below. 3. Monitor browser window size Change event The new adaptation scheme allows automatic retry of adaptation when the size of the browser changes. For example, when users drag and drop to change theBrowser size, or more useful when they turn their phone direction. This behavior can be turned on at any time in the game, and only the resizewithbrowsersize function of the Cc.view is called: Cc.view.resizeWithBrowserSize (True); to be more flexible in dealing with change, We have provided a new function for Cc.view, you can register a callback function through the Setresizecallback function to listen to the browser window size Change event: Cc.view.setResizeCallback (function () { // do whatever you need to fit the game content level // for example, You can decide which adaptation mode to apply for the user's mobile device orientation}); 4. fullscreen apifullscreen api is an API that allows Web pages to be used in a new development of the user's full screen. Cocos2d-js in the mobile browser will try to automatically enter the full screen to give the user a better gaming experience (it is necessary to point out that not all browsers support this API). On the other hand, almost all modern browsers on the desktop support FULLSCREEN&NBSP;API, and if you want to use this API,COCOS2D-JS also simplifies its use: try to enter full-screen mode (requires user interaction): Cc.screen.requestFullScreen (targetelement, onfullscreencallback); detect whether in full-screen mode: cc.screen.fullscreen (); Exit full Screen mode: cc.screen.exitfullscreen ();4.4.3 important concept 1. game frame frame game Outer box is the initial parent node of your game canvas element, in general, It is the BODY element of the HTML document. But if you want, it can be any container node in the DOM structure. The initial size of the canvas element is not important, and it is automatically indented during the screen adaptation to fit the size of the frame you set. Again, if you want the game window to fit the entire browser window, just place the canvas element directly under the body. 2. game Container container in the COCOS2D-JS initialization process, the engine willAutomatically places your canvas elements in a div container, which is added to the canvas's original parent node (the out-of-game box). This game container is an important auxiliary element to implement the screen adaptation scheme, and you can access it through Cc.container. 3. game World content game World represents the world coordinate system used within the game. 4. Windows viewport window is the game world relative to the coordinates and size of the game canvas element coordinate system .5. container adaptation strategy Container The Strategy container adaptation strategy is responsible for shrinking the game container and the game canvas elements to fit the game's outer frame. 6. Content Adaptation strategy content strategy the content adaptation strategy is responsible for shrinking the game world to fit the game container, as well as calculating and setting the window.
This article ish5eduAgency officialHTML5 Trainingtutorials, the main introduction:JavaScript Intensive Tutorials--cocos2d-js screen adaptation scheme
JavaScript Intensive tutorial--cocos2d-js screen adaptation scheme
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
