| Size__ (when Orthographic is selected) |The camera's viewport size when set to Orthographic. | | Field of view__ (when Perspective is selected) | The width of the camera's view angle in degrees along the local Y-axis. |
| Pixels Per Unit | The number of width/height pixels in the sprite image corresponding to one distance unit in world space |
Designing UIs for Multiple Resolutions - Unity Manual
UI designed for multiple resolutions
Modern games and applications often need to support a variety of different screen resolutions, and UI layouts in particular need to be able to adapt to this. The UI system in Unity contains various tools for this purpose, and these tools can be combined in various ways.
In this how-to, we'll look at a simple case and understand and compare different tools in this context. In our case study, we have three buttons at the corners of the screen (shown below), and the goal is to adapt this layout to various resolutions.
In this how-to guide, we'll consider four screen resolutions: Mobile High Definition (HD) in portrait (640 x 960) and landscape (960 x 640) and Mobile Standard Definition (SD) in portrait (320 x 480) and landscape (480 x 320). The initial layout is set to mobile HD portrait resolution.
Use anchors to accommodate different aspect ratios
By default, UI elements are anchored to the center of the parent rectangle. This means that they maintain a constant offset from this center.
If you change the resolution to a horizontal aspect ratio using this setting, the buttons may no longer even fit within the rectangle of the screen.
One way to keep buttons within the screen is by changing the layout so that the button's position is tied to the corners of the screen. You can set the upper-left button's anchor point to the upper-left corner using the Anchors Preset drop-down menu in the Inspector or by dragging the triangle anchor point handle in the Scene view. This is best done if the current screen resolution set in the Game view is the target resolution when the layout was originally designed (when the button positions look correct). (See the UI Basic Layout page to learn more about anchor points.) Likewise, the anchor points for the lower left and lower right buttons can be set to the lower left and lower right corners respectively.
Once the buttons are anchored to their respective corner points, they will stay in place when the resolution is changed to a different aspect ratio.
The buttons also remain anchored to their respective corners when the screen size changes to a larger or smaller resolution. However, because buttons maintain their original size in pixels, the proportion of the screen they occupy may become larger or smaller. This state may or may not be desirable, depending on how you want your layout to appear on screens with different resolutions.
In this how-to guide, we know that the smaller resolution of the mobile phone's standard definition portrait and landscape layout does not mean that the screen is physically smaller, just that the screen has a lower pixel density. On these lower pixel density screens, buttons should not look larger than buttons shown on higher density screens, but should appear the same size.
This means that the button should become smaller in the same proportion as the screen becomes smaller. In other words, the proportions of the buttons should follow the screen size. In this case, the __Canvas Scaler__ component is useful.
Scale to fit screen size
The CanvasScaler__ component can be added to the root __Canvas__; a canvas is a game object with a canvas component of which all UI elements are children. When creating a new canvas via the GameObject__ menu, the canvas scaler is also added by default.
In the canvas scaler component, its UI Scale Mode can be set to Scale With Screen Size . Using this scaling mode, you can specify the resolution to use as a reference. If the current screen resolution is smaller or larger than this reference resolution, the canvas's scaling factor is set accordingly, causing all UI elements to scale up or down with the screen resolution.
In our example, we set the canvas resizer to a mobile HD portrait resolution of 640 x 960. Now, when the screen resolution is set to the phone's SD vertical resolution of 320 x 480, the entire layout will be scaled down to maintain the same proportions as the full resolution. Everything is scaled down: button size, button distance from the edge of the screen, button graphics, and text elements. This means that the layout in mobile SD portrait resolution is the same as in mobile HD portrait resolution; it's just that the pixel density is reduced.
One thing to note: after adding the canvas scaler component, you must also check the layout display under other aspect ratio conditions. By returning the resolution to mobile SD landscape resolution, we can see that the button now looks larger than it should (its previous size).
The reason why buttons get larger in landscape aspect ratio conditions comes down to how the canvas scaler settings work. By default the width or current resolution is compared to the width of the canvas scaler and the result is used as the scaling factor to scale everything. Since the current horizontal resolution of 960 x 640 is 1.5 times wider than the vertical canvas scaler of 640 x 960, the layout's scale increases to 1.5.
This component has a property called Match , the value of this property can be 0 (width), 1 (height), or a value in between. Set to 0 by default, meaning the current screen width is compared to the canvas resizer width, as described above.
If the Match property is set to 0.5, the current width is compared to the reference width and the current height is compared to the reference height, and a scaling factor between the two is chosen. Since the horizontal resolution in this example is 1.5 times wider, but the height is also 1/1.5 times shorter, combining these two factors results in a final scaling factor of 1, which means the button will maintain its Original size.
According to the previous article, by using appropriate anchoring techniques on the canvas combined with the canvas scaler component, the layout will support all four screen resolutions.
See the canvas scaler reference page to learn more about different ways to scale UI elements for different screen sizes.