JavaScript enhancement tutorial - screen adaptation solution of Cocos2d-JS

This article is the official HTML5 training tutorial of H5EDU organization. It mainly introduces: JavaScript enhancement tutorial-Screen adaptation solution of Cocos2d-JS

1. Set the screen adaptation policy (Resolution Policy)

If you haven’t used Resolution Policy yet, Just call the following code after the game loading process is completed (in the cc.game.onStart function callback):

cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL);
The first two parts of the setDesignResolutionSize function The first parameter is 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 with its own unique behavior, see below for details.

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

cc.view.setResolutionPolicy(cc.ResolutionPolicy.NO_BORDER);
In native games, the game always uses the full screen space, but in On the WEB side, your web page may have other visual or text elements besides the game, or maybe you need to design a beautiful border for your game. Therefore, the adaptation scheme of the web engine in Cocos2d-JS will adapt to the parent node of the game Canvas element by default. If you want the game scene to adapt to the browser screen, then you only need to place the Canvas directly under the body:

< ;body>


2. The meaning of Resolution Policy

The benefits of using Resolution Policy are obvious, regardless of the device screen size or Depending on the browser window's aspect ratio, your game scene will automatically scale to the screen size. More importantly, in game code, you will always lay out the game scene using the resolution of the game you designed. For example, if you set the design resolution to 320 * 480, then the coordinates of the upper right corner of your game window in the game code will always be (320, 480) (in FIXED_WIDTH mode the height may be scaled, also in FIXED_HEIGHT mode The width may be scaled, see details below).

3. Monitor browser window size change events

The new adaptation scheme allows automatic retrying of adaptation when the browser size changes. For example, when users drag to change the browser size, or more usefully, when they rotate their phone. This behavior can be turned on at any time in the game, just call the resizeWithBrowserSize function of cc.view:

cc.view.resizeWithBrowserSize(true);
In order to respond to changes more flexibly, we provide a new function for cc.view function, you can register a callback function through the setResizeCallback function to listen for browser window size change events:

cc.view.setResizeCallback(function() {
  // Do any adaptation operations you need at the game content level
  / / For example, you can determine the adaptation mode to be applied based on the user's mobile device orientation
});
4. Fullscreen API

Fullscreen API is a new formulation that allows browsers to allow Web pages to obtain the user's full screen API.

Cocos2d-JS will try to automatically enter full screen in mobile browsers 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. If you wish 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 it is in full screen mode: cc.screen.fullScreen();
Exit full screen mode: cc.screen.exitFullScreen();
4.4.3 Important concepts

1. Game frame Frame

The game 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, it can be any container node in the DOM structure. The initial size of the Canvas element is not important; it will be automatically scaled to fit the frame size you set during the screen adaptation process. Again, if you want the game window to fit within the entire browser window, just place the Canvas element directly under the body.

2. Game container Container

During the initialization process of Cocos2d-JS, the engine will automatically place your Canvas element into a DIV container, and this container will be added to the original parent node of the Canvas (game outer frame) middle. This game container is an important auxiliary element for implementing screen adaptation solutions. You can access it through cc.container.

3. Game World Content

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

4. Viewport

The viewport is the coordinates and size of the game world relative to the coordinate system of the game Canvas element.

5. Container Adaptation Strategy Container Strategy

The container adaptation strategy is responsible for scaling the game container and game Canvas elements to fit the game frame.

6. Content Adaptation Strategy Content Strategy

The content adaptation strategy is responsible for scaling the game world to fit the game container, and also calculates and sets the window.