How cocos2d-x enables the game to truly adapt to screen resolutions

Refer to this blog post for this note.

I mentioned the setdesignresoultionsize () function when I studied the helloworld project in depth, for example:

Cceglview: Export dopenglview ()-> setdesignresolutionsize (480,320, kresolutionnoborder); in this function, the first two parameters set the size of the game resource image, the third parameter sets how the image is scaled Based on the screen resolution. Remember? However, when we used this function. the screen resolution size is set in CPP: eglview-> setframesize (960,640 ); in this way, the image size of 480*320 will be doubled. So how can we make the game adapt to different resolutions? First, players can play games well at different resolutions. They must meet some requirements: 1. The background image fills up the entire screen and try not to have a black edge; 2. The main content of the background image should be displayed on the screen and cropped as few as possible. 3. If the background image is enlarged, the proportion should not be too large; otherwise, the image will be blurred; 4. The text labels and buttons on the game interface should be fully displayed at any resolution. To meet these requirements, two key tasks must be completed, create a multi-resolution background image and properly locate the elements (tags, buttons, etc.) on the user interface ).
First, let's take a look at how to create a multi-resolution background image. The common resolutions of various devices on the market are:

Based on these common devices, the resolution of several background images is determined: 1, 2048*1536, which is specially designed for the new iPad. The designer's original size is also 2, 960*720, size for iPhone and iPad. On the iPhone, the screen is scaled up and down by 40 PX, and scaled up by 1.067 on the iPad. The screen is filled up and not blurred. The scaled down ratio from the original article to 0.469 is exactly 960*720; 3. 854*480 for Android phones on the market. Android phones 854*480 and 800*480 on the market are the two most common resolutions. The original version is scaled down by 0.417, and the excess content can be removed. 4, 1280*800, for high-resolution Android phones and tablets, the original version can be obtained at a rate of 0.625. Therefore, for art, the background images are all drawn in the size of 2048*1536, and four background images with different resolutions can be exported in proportion. To minimize the download volume of a game, you can use only 960*720 clips. In fact, you can use a set of clips to deal with different resolutions, that is, the effect is not as good as 4 sets. The following figure shows the visible area of the 2048*1536 source on different devices. It is also the reference link.

The reason for these images is that these images are helpful for understanding the region. Next, let's take a look at how to make a reasonable user interface. After understanding the visible area, it is natural to think that the elements of the user interface must be placed in the smallest area. All the elements of the following interface can be completely displayed at various resolutions.

The minimum visible area is 960*540. in this range, no matter how many devices have the resolution, the content is displayed. Reference a feasible solution for locating interface elements of devices of different resolutions in the above link blog, which is very easy to use. Virtual resolution: to simplify program development, a uniform virtual coordinate system is used to map the screen of the device. Experiments have proved that it is reasonable to set the screen width to 960pt. When discussing the virtual coordinate system, Pt (point) is used as the unit, rather than PX (pixel) is the correspondence between various device resolutions and 960pt width virtual resolutions:

Location by reference point interface elements: During Game initialization, the engine automatically sets the corresponding virtual resolution based on the actual resolution of the device and determines several reference points on the screen:

With the reference point, it is easy to locate the interface elements. For example, the origin of a button (the center of the button image) is 40pt relative to the left side of the screen, and 30pt relative to the bottom of the screen. On devices with different resolutions, the button is similar to the button in the lower left corner of the screen. As long as you make sure that all interface elements are located using reference points, you will never see the interface elements on the device screen.

The following is an example of my own change based on the above link. Some changes have been made in the original gamestart project to match different devices. Here we use a set of materials of 960*720. The following is a brief introduction.

First, add a header file of smartres. H to the project. The content of the header file is as follows:

Then add a smartres. cpp file with the following content:

The smartres class allows you to set the virtual screen and computing reference point. I wrote a detailed comment on the figure.

Next we modify the gamestart. h file as follows:

Modify the gamestart. cpp file as follows:


In the previous main. cpp, we modified the device screen eglview-> setframesize (1024,
600); then let's see the running effect:

These images are the materials in the link. You can also find a 960*720 jpg image by yourself and change the name to BG. Here we just record this method, first come here.

Post: http://blog.sina.com.cn/s/blog_7985987f01016gdw.html