Cocos2d-js screen Adaptation Scheme

The COCOS2D engine provides game developers with a screen adaptation strategy (Resolution policy) solution.

Use mode 1. Setting screen adaptation policies (Resolution policy)

If you have not yet used resolution Policy, simply call the following code after the game loading process is complete (Cc.game.onStart function callback):

Cc.view.setDesignResolutionSize (480, CC. Resolutionpolicy.show_all);

　　setDesignResolutionSizeThe first two parameters of the function are the game resolution you want to use in your code, and the third parameter is the adaptation scheme you choose. 5 adaptation options built into the engine

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

Cc.view.setResolutionPolicy (CC. Resolutionpolicy.no_border);

Native games always use full screen space, but there may be other visual or textual elements in your Web page than the game, or maybe 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.

2. The meaning of Resolution policy

The benefits of using resolution policy are obvious, regardless of the device screen size, and regardless of the browser window's aspect ratio, your game scene will be automatically indented 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, then in the game code your game window's upper-right coordinate will always be (320, 480) (in the Fixed_width mode height may be scaled, also in fixed_height mode width may exist in the case of scaling, See below for details).

3. Monitor 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 and drop to change the size of the browser, or more useful, when they turn their phone direction. This behavior can be turned on at any time in the game, and only the functions that are called cc.view are required resizeWithBrowserSize :

Cc.view.resizeWithBrowserSize (true);

To be more flexible in dealing with changes, we cc.view provide a new function that allows you to setResizeCallback register a callback function to listen for browser window size change events:

Cc.view.setResizeCallback (function() {    //  do anything you need to do with the game content level    //  For example, you can decide which adaptation mode to apply to the user's mobile device Orientation });

4. Fullscreen API

The fullscreen API is an API that allows Web pages to be made 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 the fullscreen API, and if you want to use this API,COCOS2D-JS it also simplifies its use:

• Try to enter full-screen mode (requires user interaction):cc.screen.requestFullScreen(targetElement, onFullScreenCallback);
• To detect whether it is in full screen mode:cc.screen.fullScreen();
• To exit full-screen mode:cc.screen.exitFullScreen();

Important Concept 1. Game Frame Frame

The game frame is the initial parent node of your game's canvas element, which, in general, is an element of the HTML document body . 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, you just need to put the canvas element directly body below it.

2. Game Container Container

In the COCOS2D-JS initialization process, the engine automatically places your canvas elements in a div container, which is added to the canvas's original parent node (the out-of-game frame). This game container is an important auxiliary element for implementing a screen adaptation scheme, which you can cc.container access by accessing it.

3. Game World Content

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

4. Windows Viewport

Windows is the coordinates and sizes of the game world relative to the game canvas element coordinate system.

5. Container adaptation Strategy Container strategy

The 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 contents 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.

System Preset Adaptation mode

5 adaptation modes are preset in Cocos2d-js, and the behavior of each adaptation mode is illustrated below. The red box in the figure indicates the bounds of the game world, while the green box indicates the boundaries of the canvas element.

All adaptation modes are made up of a container adaptation strategy with a content adaptation strategy, and the parentheses show how each pattern is constructed.

1. Show_all (Proportion_to_frame + show_all)

Show_all mode enlarges the game world as much as possible by the original aspect ratio to fit the frame, while making the game content visible, so the browser aspect ratio is different from the game aspect ratio, the window will have a certain white. The color or background of the left white part can be modified by setting the CSS properties of the frame.

　　2. No_border (Equal_to_frame + no_border)

The No_border mode enlarges the game world as much as possible by the original aspect ratio to fit the outer frame, and ensures that no blank space is left. So browser aspect ratio is different from the game aspect ratio, the game world will be partially cut. At the same time, in this case, the cc.visibleRect representative of the canvas in the game world window, smaller than the size cc.winSize .

3. Exact_fit (Equal_to_frame + exact_fit)

The Exact_fit mode ignores the original aspect ratio to enlarge the game world to fit the frame completely, so the browser aspect ratio differs from the game aspect ratio when the game world is stretched to a certain extent.

Fixed_width mode zooms in on the world of the game to fit the width of the frame, zooming in vertically by the original aspect ratio. There are two possible results, similar to the results of the Show_all pattern (pictured), or the class in No_border mode. It differs from the previous two modes in that the game world coordinate system is equivalent to the canvas element coordinate system in Fixed_width mode, and the canvas element must fill the entire frame.

Note the difference from Show_all mode, when the canvas size is the entire frame size, so the content area can be displayed actually more than the Show_all mode.

5. Fixed_height (Equal_to_frame + fixed_height)

In contrast to the previous pattern, the Fixed_height mode magnifies the game's world vertically to fit the height of the frame, zooming in and out by the original aspect ratio. The result is ibid.

In this mode, the difference from the No_border mode is that the game world coordinate system and size are equal to the canvas coordinate system.

Using System preset strategy to build adaptive mode

As you can see, all preset modes are a combination of preset strategies, and you do the same thing, and the system preset policy is as follows:

Container Strategies: Container adaptation strategy

    // make container size equal to outer frame    // enlarges the container size to the original aspect ratio to fit the outer frame    // Original Container size

Content Strategies Adaptation Strategy

    Cc. Contentstrategy.show_all    cc. Contentstrategy.no_border    cc. Contentstrategy.exact_fit    cc. Contentstrategy.fixed_width    cc. Contentstrategy.fixed_height

Cocos2d-js screen Adaptation Scheme