Design UI for multiple resolutions

Today's games and programs often need to support many different screen resolutions, and their UI layouts also need to be adaptable to a variety of resolutions. Unity's UI system contains a variety of tools for this purpose.

Below we will use a simple example to learn, observe, and compare how different tools can achieve this goal. In this example, we place three buttons in the corner of the screen, while at the same time allowing them to adapt to the layout at different resolutions.

In this example, we will use four resolutions: Phone HD in Portrait (640 x 960) and Landscape (960 x 640) and phone SD in portrait (+ x 480) and Landscap E (480 x 320). The initialized resolution is phone HD Portrait.

use anchor points to accommodate zooming in different directions

The UI element defaults to the center of the rectangle of its parent object as the anchor point. That is, their displacement from the center is a constant. If the resolution changes to landscape direction, those buttons may even run out of the screen.

One way to keep a button on the screen is to change the layout, such as binding the position of the button to its corresponding corner. The anchor point of the button in the upper-left corner is set to the upper-left corner of the screen by modifying the anchor preset (anchors Preset) in the inspector, or by dragging the triangle anchor symbol in Scene view.

The buttons remain fixed in their respective corners, regardless of the size of the screen or when it becomes smaller. However, because they maintain the original pixel-size dimensions, they may become larger or smaller in proportion to the screen. This may be the result you want, maybe not, depending on what you want your layout to look like at different resolutions.

In this example, the small resolution of the phone SD Portrait and landscape is not to say that the screen is very small in physical sense, but rather that it has a lower pixel density. In these low pixel density screens, the buttons do not appear large on the screen with high pixel density and they should show the same size.

This means that if the screen becomes smaller, the button should be scaled down as well. In other words, the zoom of the button should follow the screen and remain consistent with it. At this point, theCanvas Scaler component can provide help.

As the screen scales together

Canvas Scaler can be added to the root object canvas--A game object with a canvas component, and all UI elements are his child objects. Canvas is added by default with the canvas Scaler component from the gameobject menu.

In the canvas Scaler component, you can set its UI zoom mode (UIscale modes) to Sizewith a screen. In this mode, you can specify a resolution as the reference. Regardless of whether the current screen resolution is larger or smaller than the reference resolution, the zoom factor for the canvas is set, so all UI elements will be scaled along with the screen.

In our example, we set the Canvas Scaler to the resolution 640 x 960 for the phone HD landscape. Now, when you set the screen resolution to 480 for the phone SD portrait, the entire layout is scaled down. Everything shrinks: The button size, the distance from the edge of the screen, the icon of the button, and the text. This means that the layout shown in the phone SD portrait is the same as in the phone HD portrait, only the pixel density is reduced.

After adding the Canvas Scaler component, it is important to figure out what the layout looks like at other aspect ratios. By setting back to phone HD landscape, we found that the buttons now show larger sizes than they should.

The reason why the buttons become larger depends on how the canvas scaler is set up. By default, he takes the current resolution width with canvas Scaler A wide contrast of the specified reference resolution, and the result will be scaled to scale all things. This component has a property named match whose value can be set to 0 (wide), 1 (high), or a value in between. By default its value is 0, which is the width of the current screen and Canvas Scaler , for comparison.

If the Match value is set to 0.5, he will compare the current width and reference width as well as the current height and reference height, and select a scaling factor within the range ( personal Understanding ). Because the landscape resolution in this example is 1.5 times times wider but also 1.5 times times shorter, the two scaling factors average a scaling factor of 1, which means that the button retains its original size.

Design UI for multiple resolutions