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.
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.
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.
Image size: 1334*750
To make it more intuitive, look at the added position markers to the scene:
1. Check “Fit Height” Only
Fit method: the height of the design resolution automatically fills the screen height.
Game screen scaling = screen resolution height / design resolution height
Performance on iPhone 7 Plus (1920*1080):
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):
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):
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.
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.
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):
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.