Author's Note: The version of Unity used is 2021.3LTS, which may have similarities and differences with other versions. Please use it as a reference only
I. Introduction.
This article is a note from the industry, education and research of the author in the process of learning to use the Unity engine. Based on the official document Unity User Manual 2021.3 (LTS)/Create user interfaces (UI)/Unity UI/UI operation method/UI related parts designed for multiple resolutions combined with my own experience, there are deficiencies, but also Please correct me.
Second, the guide.
1. Modern games usually need to support various screen resolutions to adapt to electronic devices of different sizes. Therefore, when designing the UI system, the official provides various tools. Combining these tools can achieve the purpose of multi-resolution adaptation.
2. Screen (Screen)
3. Canvas (Canvas)
4. Rect Transform (Rect Transform)
3. Screen (Screen).
1. This static class provides developers with access to display information. It can provide a list of screen resolutions supported by the current device, switch the current resolution, show/hide the system mouse point and other functions.
2.Screen static property.
[autorotateToLandscapeLeft]: Automatically rotate to landscape, the screen is on the left of the Home button (that is, the Home button is on the right).
[autorotateToLandscapeRight]: Automatically rotate to landscape, the screen is on the right of the Home button (that is, the Home button is on the left).
[autorotateToPortrait]: Automatically rotate to portrait.
[autorotateToPortraitUpsideDown]: Automatically rotate to portrait, flip up and down. [brightness]: Current screen brightness.
[currentResolution]: current screen resolution (read-only). [cutouts]: Returns a list of cutouts (eg camera) on the screen (Android).
[dpi]: Returns the current DPI of the screen (read-only), DPI (Dots Per Inch) pixels per inch, in general, the larger the DPI, the better the screen.
[fullScreen]: Whether to set to full screen.
[fullScreenMode]: Which of the following modes is set for full screen: (ExclusiveFullScreen/FullScreenWindow/MaximizedWindow/Windowed)
[height]: The current height of the screen window.
[mainWindowDisplayInfo] : Main window display information.
[mainWindowPosition]: The position of the upper left corner of the main window compared to the upper left corner of the screen.
[orientation]: Specifies the logical orientation of the screen.
[resolutions]: Returns all full-screen resolutions supported by the monitor.
[safeArea]: The safe area of the screen.
[sleepTimeout]: Sleep after a period of time without user interaction.
[width]: The current width of the screen window.
3. Screen static method.
[GetDisplayLayout]: retrieve the layout information of the current display. Such as name, resolution, refresh rate, etc.
[MoveMainWindowTo]: Move the main window to a position relative to the upper left corner of the screen. Asynchronous operation.
[SetResolution]: Switch resolution.
The above is the static class of Screen, which can be used to obtain and set relevant information in the code.
4. Canvas
1. The Canvas component is an abstract space for UI layout. All UI elements must be children of the game object to which the canvas component is attached. When creating a UI element object, if there is no canvas (Canvas) object in the scene, it will be created automatically.
2. There can be multiple canvases at the same time, and canvas nesting can be used.
3. The property panel of the canvas component.
[Render Mode]: Canvas rendering mode, including Screen Space - Overlay, Screen Space - Camera and World Space. Different modes have different parameter configurations, suitable for different application scenarios.
4. Canvas Scaler (Canvas Scaler)
This component can control the size and pixel density of the canvas.
5. Canvas Group (Canvas Group)
can centrally control certain aspects of UI elements as a whole, such as opacity, whether to accept input, whether to block ray casting, and whether to ignore the influence of the parent canvas group.
6. The Canvas Renderer
is used to render the graphical UI objects contained in the canvas.
The above are the components and functions related to the canvas, and the usage strategy can be adjusted for different situations
5. Rect Transform
1. This component is used to replace the Transform component by the node objects on all UIs.
2. In addition to the position, rotation, and scaling of conventional transformations. Also has width and height, which specify the dimensions of the rectangle.
3. Pivot is a unique concept of Unity, which is somewhat similar to the [anchor point] in the Cocos engine. That is, all transformations (rotation, scaling, size) are around this point.
4. Anchor group (Anchors) The role of the anchor point is mainly used to anchor the node to the transformation of the parent rectangle. Used together with the Anchor Preset to set the resolution adaptation strategy of the UI node. (Anchor points are the four small triangles on the node)
The difference with the Cocos engine is that Cocos directly uses the relative position of the anchor points of the parent and child nodes to "express" the relative relationship between the two; Unity is a bit like splitting into two sets of attributes, the pivot point and the anchor point. Modifying other transformation parameters is around the pivot point, and the relationship with the parent node is anchored by the anchor point group. This point should be distinguished.
5. Anchor Preset (Anchor Preset) This component can be seen on the node's property panel (RectTransform component part).
You can choose an appropriate default option after clicking on it.
Produce fixed dimensions: anchor points together.
Node size stretches with parent node transformation: anchor points are separated.
Note: Pressing Shift at the same time will modify the axis while setting the anchor point; while pressing Alt will modify the position while setting the anchor point.
6. Other layout components.
Such as Layout layout-related components, content size adapter (ContentSizeFilter) components. All can help developers to layout more reasonably and conveniently.
6. Adaptation strategy.
With the understanding of the above parts, we will have a starting point to deal with the adaptation problem.
1. Switch resolution. If there is a need for resolution switching, this related interface can be called.
2. If it is a fixed resolution design, you can skip 1 and consider the canvas rendering mode.
Screen Space - Overlay (the UI is placed on the rendered screen above the scene)
Screen Space - Camera (the canvas is placed at a specified distance from the specified UI camera, and the camera settings will affect the appearance of the UI. Generally, the UI system is suitable for this canvas mode)
World Space (canvas behaves the same as other objects in the scene, it is very useful to do pseudo 3D, or UI interaction options on the scene. This kind of UI also has another name "narrative interface") 3. After adjusting the canvas, you can use rectangle
transformation Components are used to arrange the parent-child nodes on the UI interface. The specific usage method has been mentioned above.
The above are the steps and ideas of conventional multi-resolution adaptation
7. Special-shaped screen adaptation.
When doing resolution adaptation, it is inevitable to encounter the problem of adapting to special-shaped screens. Especially designs such as bangs and smart islands are becoming more and more popular now.
Adapting to special-shaped screens is also related to business design. The design and idea given by the author here is to add a sliding bar for special-shaped screen adaptation in the setting system, obtain the position and size of the non-safe area, and move the maximum and minimum ranges of the UI that needs to be adapted.
5. The above is the part related to Unity multi-resolution adaptation . If you want to know more, it is recommended to go to the official website documentation and find the [UI Operation Method] article directly. If you have any ideas, you can also discuss with the author.
