Interface adaptation strategy

July 4, 2022

Interface adaptation strategy

Player devices have different resolutions. In order to display the same effect as possible on different screens, the engine provides a set of adaptation solutions. The specific adaptation method is as follows:

Design Resolution vs Screen Resolution

Design resolution is the standard resolution that creators use when making UI,The default design resolution of the engine is 1280*720. It is recommended that creators design the original UI image based on this resolution.

Screen resolution refers to the screen display resolution on the device. Common Android devices have screen resolutions of 1920*1080, 1280*720, etc., and IOS devices have screen resolutions of 2436*1125, 1920*1080, etc.

When the screen resolution of the device is the same as the design resolution, both of which are 1280*720, the display effect on the screen is the same as the design drawing. However, if there is a difference between the screen resolution and the design resolution, UI adaptation is required.

Screen resolution aspect ratio equal to 16:9

Since the aspect ratio of the screen resolution is the same as the aspect ratio of the design resolution (1280 * 720), both are 16:9,The width and height of UI controls only need to be proportionally enlarged to fit the screen

For example: the screen resolution is 2560 * 1440, and the size of the control is 50 * 100, then the width of the control actually rendered on the screen is 50 * (2560/1280)=100px, and the height is 100 * (1440/720)=200px.

Screen resolution aspect ratio greater than 16:9

If the aspect ratio of the screen resolution is greater than 16:9, the common ones are 18:9, 19.5:9, etc.Based on the height of the design resolution

For example: the screen resolution is 1920*1080 and the size of the control is 50*100. Then when adapting, the control will be enlarged by 1080/720=1.5 times (magnification factor=higher screen resolution/higher design resolution). So the width of the control actually rendered to the screen is 50 * 1.5=75px and the height is 100 * 1.5=150px.

Screen resolution aspect ratio less than 16:9

If the aspect ratio of the screen resolution is less than 16:9, the common ones are 4:3, 16:10, etc.Based on the width of the design resolution

For example: the screen resolution is 1920×960 and the size of the controls is 50*100. Then when adapting, the control will be enlarged by 1920/1280=1.5 times (magnification factor=width of screen resolution/width of design resolution). So the width of the control actually rendered to the screen is 50 * 1.5=75px and the height is 100 * 1.5=150px.

Preview the adaptation effect

In the toolbar in the upper right corner of the canvas, you can switch the size of the canvas and preview the display effect of the current UI in different aspect ratios.