JavaScript reinforcement tutorial-Cocos2d-JS screen adaptation solution

This article for H5EDU institutions official HTML5 training courses, the main Introduction: JavaScript reinforcement tutorial-Cocos2d-JS screen adaptation solution 1. set the screen adaptation policy (ResolutionPolicy) If you have not... this article is H5EDU official HTML5 training courses, mainly introduces: JavaScript reinforcement tutorial-Cocos2d-JS screen adaptation solution

1. Set a Resolution Policy)

If you have not used a Resolution Policy, you only need to call the following code after the game loading process is completed (in the callback of the cc. game. onStart function:

Cc. view. setDesignResolutionSize (320,480, cc. ResolutionPolicy. SHOW_ALL );
The first two parameters of the setDesignResolutionSize function are the game resolutions you want to use in your code. The third parameter is the adaptation solution you choose. The engine has five built-in adaptation solutions, each of which has its own unique behavior. For details, see the following.

If you have set the design Resolution, you can directly set your Resolution Policy:

Cc. view. setResolutionPolicy (cc. ResolutionPolicy. NO_BORDER );
In Native games, games always use all the screen space, but on the WEB side, Your webpage may have other visual or text elements besides the game, or you may need to design a beautiful border for your game. So the adaptation scheme of Web engine in Cocos2d-JS will adapt to the parent node of the game Canvas Element by default, if you want the game scenario to adapt to the browser screen, you only need to place the Canvas directly under the body:




2. Significance of Resolution Policy

The advantage of using the Resolution Policy is obvious. Regardless of the screen size of the device or the aspect ratio of the browser window, your game scenario will be automatically scaled down to the screen size. More importantly, in the game code, you will always use the game resolution you designed to arrange the game scenario. For example, if you set the design resolution to 320*480, the coordinates in the upper right corner of your game window in the game code will always be (320,480) (the height may be scaled in FIXED_WIDTH mode, in FIXED_HEIGHT mode, the width may be scaled. For details, see the following description ).

3. Listen to browser window size change events

The new adaptation scheme allows you to automatically retry the adaptation when the browser size changes. For example, when users drag to change the browser size, or are more useful, they turn their mobile phone direction. This behavior can be enabled at any time in the game. You only need to call the resizeWithBrowserSize function of cc. view:

Cc. view. resizeWithBrowserSize (true );
To cope with changes more flexibly, we provide a new function for cc. view. You can use the setResizeCallback function to register a callback function to listen to browser window size change events:

Cc. view. setResizeCallback (function (){
// Perform any adaptation operations on the game content level you need
// For example, you can determine the Adaptation Mode of the application based on the user's mobile device direction.
});
4. Fullscreen API

Fullscreen API is a new API used by the browser to allow Web pages to obtain the full screen of users.

Cocos2d-JS in Mobile browsers will try to automatically enter the full screen to give users a better gaming experience (it should be noted that not all browsers support this API ).

On the other hand, almost all modern browsers on the desktop support the Fullscreen API, and if you want to use this API, The Cocos2d-JS also simplifies its use:

Try to enter full screen mode (user interaction required): cc. screen. requestFullScreen (targetElement, onFullScreenCallback );
Check whether it is in full screen mode: cc. screen. fullScreen ();
Exit full screen mode: cc. screen. exitFullScreen ();
4.4.3 important concepts

1. Game Frame

The game outer frame is the initial parent node of your game Canvas Element. Generally, it is the body element of the html document. But if you want to, it can be any container node in the DOM structure. The initial size of the Canvas element is not important. During screen adaptation, it is automatically scaled down to fit the size of the box you set. Again, if you want the game window to adapt to the entire browser window, you only need to put the Canvas Element directly under the body.

2. Game Container

In the initialization process of the Cocos2d-JS, the engine will automatically place your Canvas element in a DIV container, which will be added to the original parent node (out-of-game box) of the Canvas. This game container is an important auxiliary element for implementing the screen adaptation solution. You can access it through cc. container.

3. game world Content

The game world represents the world coordinate system used in the game.

4. Window Viewport

Windows is the coordinates and size of the game world relative to the game Canvas Element coordinate system.

5. Container adaptation policy Container Strategy

The container adaptation policy is used to scale down game containers and game Canvas elements to adapt to game outer frames.

6. Content adaptation policy Content Strategy

The content adaptation policy is responsible for shrinking the game world to adapt to the game container, and computing and setting Windows.