Earlier we explored some basic text formatting. We need to consider a question, how does this text adapt when the screen size changes?
In Unity, we can use the Canvas and Anchor Point (anchor point) system to ensure that UI elements always appear in the correct position, no matter what kind of screen they appear on.
Modify the Editor layout to facilitate UI related work
When editing and modifying the UI, it is very helpful to have both the scene view and the game view at the same time.
1. Rearrange the layout of Unity Editor so that the scene view and game view are stacked together. In the Layout selector, use the 2 by 3 option to achieve this purpose. Of course, we can also customize the layout. The final desired effect is similar to the following figure:
2. In the Hierarchy, double-click the Canvas game object to frame it in the scene view. The current perspective view will become a 3D scene in the lower left corner of the Canvas, which becomes very small, and the screen mainly displays a huge 2D rectangle.
If we don't see the border of the rectangle, we may need to enable Gizmos in the scene view.
This rectangular Canvas represents the screen where the item will eventually be displayed, and all UI elements must be within the rectangle to be seen on the screen.
3. In the scene view, enable 2D mode.
Since Canvas is two-dimensional, 2D mode is the most convenient way to edit. 2D mode will restrict elements to move only on the X and Y axes. To exit 2D mode, click the 2D button again.
Choose an aspect ratio
What is aspect ratio?
We now actually know the outline of the screen (Canvas), and then we set the shape of the screen, or aspect ratio.
The aspect ratio describes the relationship between the width and height of the screen. For example, older televisions use a 4:3 aspect ratio, meaning the screen is 4 units wide and 3 units high. Widescreen TVs use a 16:9 aspect ratio, which means the same thing.
Lock the aspect ratio of the project
Unity allows us to choose the aspect ratio used by the Canvas.
1. In the Game View, use the Screen Resolution drop-down menu and select Free Aspect.
Free Aspect means that the screen can freely change the aspect ratio. When Free Aspect is enabled, the Canvas changes its shape and size when we change the game view window. Using Free Aspect is very helpful if we want to ensure that the scene looks ok on screens of different shapes.
2. Move the borders of the game view window to make it wider or narrower. We will notice that the Canvas in the scene view will adapt to the size and shape of the game view window.
We can also see the text jump off the screen during window changes, which shows how difficult it is for the UI to respond correctly to different screens. For simplicity, we set the aspect ratio to a fixed value.
3. In the Game View, use the Screen Resolution drop-down menu to select a 16:9 or 16:10 aspect ratio.
16:9 is the standard widescreen ratio, so it's the safest option. Designing the UI for a predictable aspect ratio makes the job a lot easier. Using a fixed aspect ratio, we will notice that changing the game view window does not affect the aspect ratio of the Canvas in the scene view.
Add a settings button to a corner of the screen
1. In the Hierarchy, right-click and select UI > Button - TextMeshPro. A button will appear on the Canvas, which is a child of the Canvas game object.
2. In the Hierarchy, rename "Button" to "Settings Button".
3. Expand the Settings Button game object and select the Text(TMP) child game object. This is a TextMeshPro element, the same UI element used for the title text earlier. Change its text to "Settings", edit the style and size of the text, etc.
4. Use the move tool to place the button in a corner of the Canvas, leaving a certain space between the button and the screen border. Choose which place to choose according to your own scene and preferences.
What is Anchor?
Why do we need anchors?
We have now placed the settings button somewhere in the corner of the screen.
Everything looks great, but if we move the game view window boundaries, increase or decrease the screen size, the buttons will float to positions we don't want.
If the screen is too small, the button will float off the screen.
If the screen is too large, the buttons will be closer to the center.
Canvas' anchor point system controls this movement. Each UI element on the Canvas is anchored to a specific position on its parent object, and it moves relative to this position when the screen size changes.
Anchor Visualization
In the scene view toolbar, select the Rect tool (or press the T key on your keyboard while in the scene view), then select the Settings button GameObject.
When the Rect tool is selected, we can snap to the four corners of the button's Rect Transform, which are represented by blue dots. We can also see that the anchor point is in the center of the screen and consists of four small triangles pointing inward.
Note: In order to demonstrate the anchor point in the above picture, the TextMeshPro object and sky box of the title are turned off.
The button will always maintain the distance from the anchor point, no matter how big or small the screen is. We can verify this by modifying the size of the game view window.
The picture below shows when the game view window is very small, set the position of the button relative to the center of the screen, and the button will go outside the screen.
The figure below shows the position of the setting button relative to the center of the screen when the game view window is in normal size, and the button is in the upper right corner.
The picture below is when the game view window is very large, set the position of the button relative to the center of the screen, and the button is close to the center of the screen.
The small blue dots at the four corners of each button correspond to the four small triangles at the anchor point.
We could individually control the four corners of the anchor point, but we don't need to do that for now.
Set the anchor point for the button
It's probably fine to put the title's anchor in the center of the screen, since the title should stay close to the center of the screen. But for the settings button it should be in the corner of the screen. So it should be anchored to the corner of the screen.
1. Keep the Settings button selected, select the center position of the anchor point with the mouse, and then move it to the corner position closest to the button. Be careful not to only click on a single small triangle of the anchor point, but click it directly in the center of the anchor point to move it as a whole.
2. Try resizing the game view window. The button should now stay in the same position as one of the corners of the screen.
In order to save our time and energy, there are some preset anchor point settings in Unity for us to use.
3. Keep the Set button object selected, and in the Rect Transform component, select the Anchor Preset icon.
This will open the preset anchors panel:
4. Try to choose a different preset anchor point position, and pay attention to the position change of the anchor point in the scene view. You can modify the size of the game view window to see the actual effect, and finally choose the one that suits you best.
What is a pivot point?
At the top of the Anchor Presets menu, we will see a Shift:Aslo set pivot.
When holding down the Shift key while setting a preset anchor point, we will change the pivot point of the object at the same time.
The hollow circle in the figure below is the fulcrum of the object, and the position movement, rotation and scaling of the object will all use this fulcrum as a reference. Pivots are also a point we need to focus on when our UI elements don't behave as expected.
For more details about pivots and anchors, please refer to Unity official documentation:
Basic Layout | Unity UI | 1.0.0 https://docs.unity3d.com/Packages/[email protected]/manual/UIBasicLayout. html
Explore: Experimenting with Canvas Scaling
When designing the UI, we may notice that when we scale the resolution of the game view window to become larger or smaller, the proportion of the UI elements occupying the screen will be different.
At higher resolutions, the UI looks smaller; at lower resolutions, the UI looks larger.
This has something to do with Canvas Scaler, which is a component that controls the scaling and resolution of UI elements in different screen sizes.
1. Select the Canvas game object and locate the Canvas Sclaer component. Note that the UI Scale Mode property is set to Constant Pixel Size by default.
When using constant pixel size, UI elements always use the same number of pixels regardless of the total size of the screen. This can be useful in some cases, such as when we want our text to be readable even on very low-resolution devices.
2. Set UI Scale Mode to Scale with Screen Size. This mode scales UI elements proportionally to the screen resolution. UI elements will occupy the same proportions.
By default, the Canvas Scaler will match the width of the screen, using 800x600 as the reference resolution.
3. Increasing or decreasing the X(width) of the reference resolution will make our UI elements fit to the optimal relative size of the screen we are using.
Each UI Scale pattern has its advantages:
Scale with Screen Size will ensure that all UI elements can be placed in the same relative position regardless of the screen size.
Constant Pixel Size will ensure that UI elements always have the same number of pixels.
Constant Physical Size will make UI elements occupy the same physical size, because it also considers the DPI (dots per inch) of the device.
4. Select one of Constant Pixel Size or Scale with Screen Size as the UI Scale Mode of your project.