Detailed description of quick-cocos2d-x multi-resolution adaptation

Adaptation to multiple resolutions has always been a problem. Companies may have their own solutions. Today, I will introduce the solutions we have implemented in multiple games, which are relatively cost-effective and difficult to implement.

Principles of resolution adaptation

Because the landscape screen and landscape screen have the same principle, this article takes the landscape screen as an example, and then explains how to process the landscape screen.

Create a 640x960 pixel image and input it to the device for viewing:

1. Scale the image to a proper size,Make sure that the entire screen is filled on both sides of the image..
2. On devices with different resolutions, the display effect of this image varies depending on whether the screen can be filled up or down.

For example, on a 480x800 device, this 640x960 image is reduced to 480x720 pixels for display. The screen is filled with black edges on and off the screen.

 

In some common resolutions, the image display effect is as follows:

Zoom ratio = screen pixel width/image pixel width

• Screen size _ 640x960 pixels, with a zoom ratio of 100%, filling the screen
• Screen Size: 640x1136 pixels, scaling ratio: 100%, black edges on top and bottom
• Screen size _ 480x800 pixels, zoom ratio _ 75%, image size _ 480x720 pixels, black edges on and off
• Screen size _ 480X854 pixels, zoom ratio _ 75%, image size _ 480x720 pixels, black edges on and off
• The screen size is 768x1024 pixels, the scaling ratio is 120%, and the image size is 768x1152 pixels after scaling. There is no Black edge, but the image is cropped up or down (beyond the screen)

Black borders on the top and bottom are definitely hard to see. To fill the screen, we only need to make the image bigger. Image Height Calculation:

Image Height = screen pixel height/(screen pixel width/image pixel width)

According to this formula, the Image Height of the above resolution should be:

• Screen size _ 640x960 pixels, Image Height 960 pixels
• Screen Size: 640x1136 pixels, Image Height: 1136 pixels
• Screen size _ 480x800 pixels, Image Height 1066.67 pixels
• Screen size _ 480X854 pixels, Image Height 1138.67 pixels
• Screen Size: 768x1024 pixels, Image Height: 853.3 pixels

The maximum value is 1138.67. It is easy to create and the height value is 1140. That is to say, a 640 × 1140 image can completely fill the screen with the above resolution.

We can also use this method in games. No matter how big the screen is, I give the width of the game scene to death, that is, 640. The problem to be addressed on different devices is the change in the scenario height. Based on this,Supports multiple resolutionsIt's easy:

1. The width of the game scenario is fixed.
2. Calculate the height of the game scenario based on the screen resolution.
3. Use a large background image to ensure that the screen can be filled with any resolution.
4. Locate the displayed content based on the scene height.

 

Virtual resolution

To differentiate the screen resolution from the device, I call the resolution used in the game"Virtual resolution".

In "virtual resolution", the coordinate system size is "point ". This is called "point, abbreviated as PT ".

Based on the formula used to calculate the image height, the width of the virtual resolution is fixed on different devices, while the height is different. To achieve Automatic Computing of this virtual resolution in the quick-cocos2d-x, you only need to use"Fixed_width"Screen scaling policy.

Open the config. Lua file and specify the following code:

CONFIG_SCREEN_WIDTH     = 640CONFIG_SCREEN_HEIGHT    = 960CONFIG_SCREEN_AUTOSCALE = "FIXED_WIDTH"

1. CONFIG_SCREEN_WIDTHAndCONFIG_SCREEN_HEIGHTDefines a reference value for "virtual resolution.
2. Based on the reference values andCONFIG_SCREEN_AUTOSCALEThe virtual resolution used on the device is calculated ".

We can see the following information at quick-cocos2d-x startup:

# CONFIG_SCREEN_AUTOSCALE      = FIXED_WIDTH# CONFIG_SCREEN_WIDTH          = 640.00# CONFIG_SCREEN_HEIGHT         = 1066.67

HereCONFIG_SCREEN_HEIGHTThe engine makes adjustments and is no longer the reference value specified in config. Lua. Eventually,CONFIG_SCREEN_WIDTHAndCONFIG_SCREEN_HEIGHTIt is the virtual resolution size of the game scenario.

 

Content Positioning

The quick-cocos2d-x is better at engine initialization with some specific coordinate values that we can use in the game asReference PointTo locate our content.

# display.width                = 640.00# display.height               = 1066.67# display.cx                   = 320.00# display.cy                   = 533.33# display.left                 = 0.00# display.right                = 640.00# display.top                  = 1066.67# display.bottom               = 0.00

• display.width,display.heightIs the size of the virtual resolution
• display.cx,display.cyIs the coordinate of the center of the screen
• display.left,display.right,display.top,display.bottomIs the coordinates of the four corners of the screen

With these "reference points", it is easy to locate the content.

For example, to place a button image in the upper-right corner of the screen, use the following code:

Local x = display. right-100 -- the image center is 100 to the left on the right of the screen ptlocal y = display. top-100 -- the image center goes down to the top of the screen 100 ptlocal sprite = display. newsprite ("button.png") -- create a Sprite object to display the sprite: setposition (x, y) -- set the coordinates of this sprite object

To display a background image on the screen, ensure that the image center and the screen center overlap:

local bg = display.newSprite("Background.png")bg:setPosition(display.cx, display.cy)

So as long as the "reference point" is properly used, all the content in our game can be automatically adapted to any resolution.

 

Visible Area

When filling the screen with content, the problem is that the content that the same image can be viewed by users is different on different devices. On devices like 640x1136, you can see all the content. In devices such as 768x1024, a large amount of content is cropped up and down.

The content area that can be viewed by users is the scenarioVisible Area. This area is exactly the size of the "virtual resolution.

Because the visual area height of different devices changes, we need to consider the problem of the minimum visible area when designing the UI. According to the fixed_width algorithm, the minimum visible area of all devices on the market should be the iPad, and its "virtual resolution" is only 640 × 853.

However, if the rigid UI is limited to the smallest visible area, the experience on different devices will be poor, because too much screen space is wasted. Therefore, when designing the UI, we need to make some content "dynamic size.

For example, in the following interface, the toolbar at the bottom is fixed height, and the height of the blue area is calculated based on the virtual Resolution:

Local toolbarheight = 130 -- toolbar Height 130 local padding = 50 -- all whitelists 50 -- calculate the height of the content area local contentheight = display. Height-toolbarheight-padding

Because the quick-cocos2d-x supports the "Nine Palace" image, so this type of highly uncertain area, making no difficulty, a little exercise can grasp.

 

Prepare art materials

After understanding the principles, the last difficulty was the preparation of art materials.

There are two main types of art materials: background images and scene elements.

For the background image, the designer uses 1536x2280 for the following reasons:

1. For the reference virtual resolution of 640x960, the maximum size of the background image is 640x1140, And the size after doubling is 1280x2280.
2. The image width is increased to 1536, which may be optimized separately for the iPad. Because the screen resolution of the retina iPad is 1536 × 2048.

When creating a background image, you must consider the minimum visible area to ensure that the main content of the background is visible at different resolutions. If it is a complex background, it can be divided into multiple layers.

For example, a background is composed of distant and near characters. You can divide the vision and characters into two pictures. The foreground is displayed in the center of the screen, and the characters are located in the program to ensure that the headers of the characters are fully displayed at any resolution. In this way, the display effect is good.

 

It is troublesome to create scene elements. First, make sure that the minimum visible area can accommodate all the content of a scenario. Secondly, on a larger screen, some scene elements (mainly the UI) need to be stretched. The basic principle is to double the size by 640x960, that is, 1280x1920. Some elements that need to be stretched are made into nine cells, or multiple images are spliced.

The designer is made based on a resolution of 1280x1920. The Developer then positions some elements based on the actual situation.

 

After the designer's image is exported in 100% size, texture Packer and other tools are required for further processing. In addition to packaging, the most important thing is to reduce the image size to 50%. In this way, the background image of 1536x2280 is changed to 768x1140, and the background image of 1280x1920 is changed to 640x960.

In the end, we used only one set of materials to adapt to all devices. It also leaves room for optimization for the retina iPad and other ultra-high resolution devices.

 

Optimization for iPad

The screen width of the iPad exceeds 640, so the whole scenario will be enlarged. There are two problems:

1. There is some slight blur.
2. Scene content is cropped up and down a lot.

There are two solutions to solve this problem:

1. Use 768x1024 as the reference virtual resolution.
2. Set virtual resolution for iPad separately.

The first method is the simplest. As long as we re-calculate the new image size according to the previous article, and make art production on this basis. However, the disadvantages are also outstanding:

1. The image size is greatly increased. The background image must be 1536x2728, and the reference resolution of the scene element is 1536x2048. This directly increases the size of the final generated image and increases the memory usage. Only the background image will increase by 20%.
2. It is not scaled only on the iPad. On all other devices, scenes are scaled down and displayed. It is difficult to read some text on a mobile phone. Although the font can be zoomed in, the font cannot be particularly clear due to the existence of scaling.

Considering that there are far more mobile phone users than iPad users, our games give priority to the experience of mobile phone users. Therefore, we adopt the second method to optimize the iPad experience.

 

When the game is started, the virtual resolution of 768 × 1024 is detected for iPad. The trouble is that the program has to make a lot of adjustments to ensure that the scene element is 640X ???? And 768 × 1024 can be displayed normally in both virtual resolutions.

From the perspective of practice, skilled developers can make an iPad Optimization for a casual game (or simply eliminate that complexity every day) in about a week. In terms of art materials, except for a small number of UI elements to be adjusted or made separately for the iPad, other materials can be used. It has little impact on development costs.

To enable the game to use the resolution settings of the iPad when starting on the iPad, add the following code to config. Lua:

CONFIG_AUTOSCALE_CALLBACK = function(w, h, deviceModel)    if (w == 768 and h == 1024)        or (w == 1536 and h == 2048) then            -- iPad            CONFIG_SCREEN_WIDTH = 768            CONFIG_SCREEN_HEIGHT = 1024            return 1.0, 1.0    endend

If the game is started on the iPad, 768/1024 is used as the reference resolution and the content is scaled to 100% to ensure that the image is completely non-blurred.

 

Optimization for ultra-high resolution Devices

The iPad and some high-end Android phones or tablets on the retina display screen provide extremely high resolution. To achieve the best display effect on these devices, you must use ultra-high-resolution materials. This is why the High Resolution is required when the art materials are produced.

However, the size of the game is almost doubled because of the ultra-high resolution material, which is not conducive to the spread of the game. Therefore, the actual method is to generate a separate version for users to download, or detect ultra-high resolution devices after the game starts, and then remind users to download resources.

The optimization of these devices has no effect on the program, because the virtual resolution is still 640 × 960 as the benchmark. You only need to use the following code to notify the engine to use ultra-high resolution materials when the program starts:

CCDirector:sharedDirector():setContentScaleFactor(2)

 

Horizontal Screen Processing

The horizontal screen processing is actually quite simple, that is, replacing "fixed_width" with "fixed_height ". In this way, the height of the virtual resolution becomes fixed, and the width varies according to the device. As for the production and content positioning of art materials, the method is exactly the same as that of vertical screens.

 

Summary

This solution has already been used in several games. Both the cost and the final effect are good.

For small teams with tight time and budget, even the iPad optimization step can be implemented in subsequent versions. After satisfying the needs of a large number of mobile phone users, we can optimize the iPad experience.

Finally, the solution described in this article can be used in the original cocos2d-x. Because the original cocos2d-x also has two screen adaptation policies: fixed_width and fixed_height.

-EOF-

This article cited Liao's article, entrance: http://quick.cocoachina.com /? P = 1436