Cocos2d-x multi-resolution adaptation solution: setDesignResolutionSize

Cocos2d-x is an excellent cross-platform game engine, of course, cross-platform super easy to encounter the resolution adaptation problem, cocos2d-x also provides a super easy to use solution.

The official multi-resolution adaptation wiki page is here: http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Multi_resolution_support

Of course, this is an E-document tutorial, and some details are not clearly stated by the official team. Now I will start to give some of my own opinions.

===== This tutorial is written based on cocos2d-x-2.1.4 ====

1. setDesignResolutionSize usage and three main adaptation modes

In cocos2d-x 2.0, a method called setDesignResolutionSize is provided to automatically adapt to various resolutions with one setting. The method is described as follows:

1234567891011121314151617181920

Enum ResolutionPolicy {kResolutionExactFit, kResolutionNoBorder, kResolutionShowAll, kResolutionFixedHeight, kResolutionFixedWidth, kResolutionUnKnown,};/*** Set the design resolution size. * @ param width Design resolution width. * @ param height Design resolution height. * @ param resolutionPolicy The resolution policy desired, you may choose: * [1] kResolutionExactFit Fill screen by stretch-to-fit: if the design resolution ratio of width to height is different from the screen resolution ratio, your game view will be stretched. * [2] kResolutionNoBorder Full screen without black border: if the design resolution ratio of width to height is different from the screen resolution ratio, two areas of your game view will be cut. * [3] kResolutionShowAll Full screen with black border: if the design resolution ratio of width to height is different from the screen resolution ratio, two black borders will be shown. */virtual void setDesignResolutionSize (float width, float height, ResolutionPolicy resolutionPolicy );

This method is easy to use. After the pDirector-> setOpenGLView (pEGLView) line of the game startup process, you just need to call it once directly. After the call is complete, CCDirector-> WinSize will change the resolution set for you, and then the development will follow this WinSize, of course, sometimes you need to pay attention to some additional points that will be mentioned later.

The function of this method is simply to design a game based on a specific set of resolutions, called design resolution. Then, select the appropriate adaptation scheme, and the engine will scale based on your design resolution, so that the game designed according to the specified resolution can adapt to various resolutions.

There are three main adaptation schemes. For ease of understanding, a diagram is provided. For example:

This is our actual screen size, with a wide screen of 568x320 and a positive screen of 480X360:

This is our design resolution 480 × 320:

1) kResolutionExactFit: force-stretch the game solution, which is very practical. Using a force-stretch to directly stretch the game to full screen will cause distortion of the picture proportion.

2) kResolutionNoBorder: no Black edge to maintain the aspect ratio stretching scheme. This scheme is the most beautiful, but proportional stretching will lead to a portion of the left, right, or up and down will always be displayed outside the screen, ensure that the UI elements are not displayed on the screen.

(We can see that if we directly design the UI according to the design resolution, the buttons attached to the upper and lower sides may be displayed outside the screen. But actually the cocos2d-x has a solution to help us ensure that the UI elements are drawn on the screen, and the following content will refer to the specific method .)

3) kResolutionShowAll: There is a black side to maintain the aspect ratio full display stretch scheme, this scheme between the above two schemes, keep the aspect ratio also shows all content, but will leave a black side on both sides of the screen

(We can see that the difference between the design resolution and the actual screen width to height is too large, there will be more black borders, but this solution is the most worry-free in design)

All three adaptation modes have been explained, and you should be aware of which mode you choose. In fact, the most worry-free solution is to find a design resolution with the center width to height ratio. If solution 2 is selected, the extra attention should be paid to the elements and the elements should not be placed too sideways.

However, this game seems to be too insensitive to the user experience. I personally think that we should at least check the actual aspect ratio of the screen. We can use more than two sets of resolutions for the wide screen and the positive screen series. To determine the most suitable resolution, you need to check the mainstream screen resolution in advance. Here we can convert the resolution to the aspect ratio for convenience:
(Android device resolution from http://developer.android.com/guide/practices/screens_support.html#testing)
IPad: 1.333: 1
IPhone5: 1.775: 1
IPhone4 (s): 1.5: 1
WVGA800 (800x480): 1.667: 1
WVGA854 (854x480): 1.779: 1
1024 × 600: 1.707: 1
WXGA (1280x800): 1.6: 1
1024 × 768: 1.333: 1
1280 × 768: 1.667: 1
In summary, the resolution of handheld devices is much higher, and most of them follow the four major aspect ratios in the display field:, and. iPhone4 (s) is a slightly special aspect ratio. Based on this statistics, we can determine two to three primary support resolutions based on the game's primary push platform. Of course, it is sometimes necessary to adopt a high-definition resolution solution based on HD devices.

2. getVisibleSize and getVisibleOrigin

In the previous kResolutionNoBorder mode, the game UI may be drawn out of the screen. Is there any good solution? The answer is yes, cocos2d-x has prepared a way for us to get the true visual range, see the two methods for details:

123456789

/*** Get the visible area size of opengl viewport. */virtualCCSizegetVisibleSize () const;/*** Get the visible origin point of opengl viewport. */virtualCCPointgetVisibleOrigin () const;

Take the design resolution 480 × 360, but the actual screen is 480 × 320 for example (this value is calculated because it is not stretched well -__-!), At this time, some of the upper and lower pictures cannot be displayed, and the following values are obtained after calculation by the engine:
VisibleSize: 480x320
VisibleOrigin: 0, 20

With these two values, we can correctly obtain the rectangle range displayed in the view on the screen. In combination with this value, you can specify all the UI elements as alignment options: top left, center left, bottom left, top middle, bottom right, top right, middle right, and bottom right, the coordinates can be dynamically calculated and placed in the appropriate position on the screen.

==== The level is limited. If any error occurs, please correct it ====

3. Design resolution for Dynamic Changes

The above three major adaptation schemes use fixed design resolutions, which makes it easier for the designer to directly design the UI design with fixed coordinates.

Take a closer look at the enumeration of the adaptation solution. We can see that there are two other solutions that do not appear in the notes of setDesignResolutionSize. They are kResolutionFixedHeight and kResolutionFixedWidth. (To be honest, I do not know the two solutions before I did not study the code cocos2d-x has been officially supported, I and my friends are manually implemented Ah QAQ)

1) kResolutionFixedHeight: fixed height, dynamic width adaptation mode, you can freely handle the game according to the dynamic width

2) kResolutionFixedWidth: fixed width, dynamic height adaptation mode, you can freely handle the game based on the dynamic height

Here is an example of a fixed height scheme. For example, if I set a fixed height of 600 and the actual aspect ratio of the screen is 1.5: 1, then CCDirector-> WinSize will change to 900 × 600; if the actual aspect ratio of the screen is 1.667: 1, The CCDirector-> WinSize will change to 1000 × 600.

Do you understand? Yes! That is to say, if the height is fixed, it is necessary to design the game panorama Based on the longest width possible (600 to calculate it should be 600 × 1.78 = 1068, to ensure that no black edges appear on the right side of the maximum length, width, and height ratio. The UI element on the right must be set to "right alignment". In this way, the UI element is automatically moved left when the width is narrow, and the UI element is automatically shifted right when the width is wider. In addition, make sure that the Left and Right UIS are placed without overlap in the case of the narrower width (600 × 1.333 = 800.

The fixed width is similar.

This is the best dynamic adaptation solution for the moment. You don't have to worry about the Black edge or the UI output screen. You do not need to consider the complex eight Alignment Methods. Because the width and height are fixed, you only need to consider the two alignment methods. For horizontal or vertical scroll games, this adaptation solution requires almost zero additional design costs.

4. coming soon

Basically for cocos2d-x multi-resolution adaptation solution, my use of opinion is mainly these, have more details want to discuss the welcome to leave a message.

For details about how to resolve resolution adaptation, we will write a special tutorial soon.