Tutorial: Cocos Creator | Multi-Resolution Adaptation

Cocos Creator | Multi-Resolution Adaptation

Concept Explanation

Canvas

This component gets the actual resolution of the device screen at all times and scales all rendered elements in the scene appropriately.

Widget (Alignment Widget)

Placed on the rendering element, able to align the element to different reference positions of the parent node as needed.

Design Resolution

The resolution of the scene at the time the game was designed, i.e. the Design Resolution property in the Canvas, which is the area with the purple border in the picture.

Picture1

Screen Resolution

As the name implies, this is the screen resolution of the device.

The Canvas Component

The Canvas component is able to obtain the actual resolution of the device screen at any time and scale all rendered elements in the scene appropriately. There can be only one Canvas in the scene at the same time, and it is recommended that all UI and renderable elements are set as children of the Canvas.

Picture2

Options

Design Resolution: blueprint of the resolution used by the content producer when creating the scene.

Fit Height: the height of the design resolution automatically fills the screen height.

Fit Width: the width of the design resolution automatically fills the screen width

Resolution Adaptation

When Canvas does screen adaptation, it will only scale the whole game screen, and will not modify the size of the node. The node size will be consistent with the design resolution by default.

Ideally, if the aspect ratio of the game design resolution and the screen resolution are the same, the game will be perfectly adapted to the device screen:

Game screen scaling ratio = screen resolution / design resolution

But with the emergence of more and more phones with notch/punch-hole display and tablets with different aspect ratios, the ideal is increasingly distant from us.

Here is a look at several adaptation options, the specific trade-offs need to be determined based on project requirements.

Usually, the aspect ratio of the design resolution uses the current mainstream device screen resolution aspect ratio, for example, 1280*720, 1334*750, 1624*750.

The design resolution in the example is: 1334*750.

Picture3

Image size: 1334*750

Picture4

To make it more intuitive, look at the added position markers to the scene:

Picture5

1. Check “Fit Height” Only

Fit method: the height of the design resolution automatically fills the screen height.

Picture6

Game screen scaling = screen resolution height / design resolution height

Performance on iPhone 7 Plus (1920*1080):

Picture7

Perfect adaptation! The picture is fully displayed.

Analysis:

Game screen scaling = 1080 / 750 = 1.44

Game screen width after scaling = 1334 * 1.44 = 1920

1920 = 1920 (screen resolution width)

The width is exactly equal to the screen width, so it is fully displayed.

Performance on iPhone X (2436*1125):

Picture8

The picture is fully displayed, but there are black edges on the left and right.

Analysis:

Game screen scaling ratio = 1125 / 750 = 1.5

The width of the game screen after scaling = 1334 * 1.5 = 2001

2001 < 2436 (screen resolution width)

Design resolution after scaling the width < screen resolution width, black edges appear.

Performance on iPad (2048*1536):

Picture9

The image spreads all over the screen, but the left and right sides are not fully displayed.

Analysis:

Game screen scaling ratio = 1536 / 750 = 2

The width of the game screen after scaling = 1334 * 2 = 2668

2668 > 2048 (screen resolution width)

The width of the design resolution after scaling > the width of the screen resolution, so the image cannot be fully displayed.

2. Check “Fit Width” Only

Fit method: the width of the design resolution automatically fills the screen width.

Picture10

Game screen scaling ratio = screen resolution width / design resolution width

The principle is the same as Fit Height, please review it above if needed.

3. Check both “Fit Height” and “Fit Width”

Fit method: fully display the design resolution.

Picture11

Still fits perfectly on iPhone 7 Plus (1920*1080).

The performance on iPhone X (2436*1125) is the same as Fit Height, but the process is different.

Analysis:

Fit Height:

Game screen scaling = 1125/ 750 = 1.5

Game screen width after scaling = 1334 * 1.5 = 2001

2001 < 2436 (screen resolution width)

Design resolution scaled width < screen resolution width. The image can be fully displayed, but there are black edges.

Fit Width:

Game screen scaling = 2436 / 1334= 1.8

Height of the scaled game screen = 750 * 1.8 = 1350

1350 > 1125 (screen resolution width)

The height of the design resolution after scaling > the height of the screen resolution. The image cannot be fully displayed.

This means:

Game screen scaling ratio = Fit Height = 1.5

Performance on iPad (2048*1536):

Picture12

The picture is completely displayed, but there will be black edges on the top and bottom.

Analysis:

Fit Height:

Game screen scaling ratio = 1536 / 750 = 2

The width of the game screen after scaling = 1334 * 2 = 2668

2668 > 2048 (screen resolution width)

Design resolution scaled width > screen resolution width. The image cannot be fully displayed.

Fit Width:

Game screen scaling ratio = 2048 / 1334 = 1.5

Height of the game screen after scaling = 750 * 1.5 = 1125

1125 < 1536 (screen resolution height)

Height after design resolution scaling < screen resolution height. The image can be fully displayed, but there are black edges.

This means:

Game screen scaling = Fit Width = 1.5

4. Both “Fit Height” and “Fit Width” Are Not Checked

Adaptation method: spread all over the screen.

The principle is the same as checking both Fit Height and Fit Width, but the final scaling is the larger one, as to spread allover the screen.

5. Dynamic Adaptation

In many cases, the adaptation scheme is not constant for different devices. To adapt it dynamically by code:

// Get the screen resolution

let frame = cc.view.getFrameSize();

//get the aspect ratio

let ratio = frame.width / frame.height;

let fitHeight = true;

let fitWidth = false;

//set the fit mode

cc.Canvas.instance.fitHeight = fitHeight;

cc.Canvas.instance.fitWidth = fitWidth;

6. Widget

Widget­­ –– the best companion for dynamic adaptation next time.

Widget is a very common UI layout component. It can make the current node automatically align to any position of the parent object, or constrain the size, so that your game can be easily adapted to different resolutions.

References

Mult-Resolution documentation

Widget documentation

8 Likes

The picture is fully displayed, but there are black edges on the left and right.

Useful information!

That’s a caption from above. I’m not following can you clarify?