UI of Unity

There are various functions for developing UI in Unity, such as UI toolkit, UGUI, IMGUI, etc. Here we mainly introduce UGUI.

1. Canvas

The Canvas is the area that should hold all UI elements. A Canvas is a GameObject with a Canvas component, and all UI elements must be children of this type of Canvas.

1. Create Canvas

Right-click UI->Canvas creation in the Hierarchy of the Unity editing view:

2.Render Fashion

There are three rendering modes:

（1）Screen Space - Overlay

This rendering mode places the UI on the screen rendered on top of the scene, if the screen is resized or the resolution changes, the canvas will automatically resize to accommodate this.

In this mode, the Sort Order value will appear. When there are multiple Canvas in the scene, you can set this value to control the occlusion order of each Canvas.

Target Display: Used in overlay mode, the display index of the UI canvas will be displayed. This setting instructs the canvas to render to the specified display. The maximum number of auxiliary displays (such as monitors) supported is 8.

Additional Shader Channels: Gets or sets the mask of other shader channels to use when creating the Canvas grid. When the canvas always contains the position, color and coloring UV0 channels, the canvas will also include the normal and tangent as the superimposed grid. ScreenSpace.Camera and world space canvas. These are optional additional parameters to copy.

using UnityEngine;

public class SetCanvasShaderChannels : MonoBehaviour
{
    
    
    public Canvas canvas;

    void Start()
    {
    
    
        canvas.additionalShaderChannels |= AdditionalCanvasShaderChannels.Normal;
        canvas.additionalShaderChannels |= AdditionalCanvasShaderChannels.TexCoord1;
        canvas.additionalShaderChannels |= AdditionalCanvasShaderChannels.Tangent;
    }
}

（2）Screen Space - Camera

This rendering mode is similar to Screen Space - Overlay , but in this mode the canvas is placed at a given distance in front of the specified camera. UI elements are rendered by this camera, which means that camera settings affect the appearance of the UI. If the camera is set to an orthographic view, UI elements will be rendered in perspective, and the amount of perspective distortion can be controlled by the camera field of view. If the screen is resized, the resolution changes, or the camera frustum changes, the canvas will automatically resize to accommodate.

RenderCamera: Renders the camera that displays this canvas.

Plane Distance: The distance to the rendering camera.

Sorting Layer: When there are multiple Canvas in the scene, it controls the occlusion relationship of each Canvas. When it is Default, it is determined by the order of the Canvas in the Hierarchy.

（3）World Space

In this rendering mode, the canvas behaves like all other objects in the scene. The canvas size can be set manually with a rectangular transform, and UI elements will be rendered in front or behind other objects in the scene based on their 3D positions.

3.Pixel Perfect

Only available when RenderMode is Screen type. Reset the element size and coordinates, so that the pixels of the map perfectly correspond to the pixels of the screen, so that the pixels of the UI elements correspond, and the effect is that the edges are clear and not blurred. However, if many elements are scaled or rotated, or if subtly animated positions or scales are used, it may be better to disable pixelPerfect, which results in smoother movement.

2. Basic layout

1. Rectangle Tool

For layout purposes, each UI element is represented as a rectangle. This rectangle can be manipulated in the scene view using the rectangle tool in the toolbar. The Rectangle Tool can be used both with Unity's 2D features, as well as with the UI, and in fact even 3D objects.

2. Rect Transform

A rectangle transform has a position, rotation, and scale like a regular transform, but it also has a width and height, which specify the dimensions of the rectangle.

3. Size and scaling

When using the Rectangle tool to resize an object, usually for Sprites and 3D objects in 2D systems, it changes the local proportions of the object. However, when it is used on an object with a Rect Transform, it changes the width and height, keeping the local proportions unchanged. This resizing does not affect font size, borders of sliced ​​images, etc.

4. Pivot

Rotation, size, and scaling modifications occur around a pivot, so the position of the pivot affects the result of the rotation, resizing, or scaling. When the toolbar's pivot button is set to pivot mode, you can move the pivot of the rectangle transform in the scene view.

5. Anchors

Rect Transforms include a layout concept called anchors. Anchor points appear as four small triangle handles in the scene view, and anchor point information is also displayed in the inspector.
If the Rect Transform's parent is also a Rect Transform, the child Rect Transform can be anchored to the parent Rect Transform in various ways. For example, a child can be anchored to the center of the parent, or one of the corners.
Anchoring also allows the child to stretch with the parent's width or height. Each corner of the rectangle has a fixed offset from its corresponding anchor point, i.e. the top-left corner of the rectangle has a fixed offset from the top-left anchor point, and so on. This way different corners of the rectangle can be anchored to different points. the parent rectangle.
The anchor's position is defined as a fraction (or percentage) of the parent rectangle's width and height. 0.0 (0%) corresponds to the left or bottom, 0.5 (50%) corresponds to the middle, and 1.0 (100%) corresponds to the right or top. But anchor points are not limited to sides and middle; they can be anchored to any point within the parent rectangle.
You can drag each anchor point individually, or if they are together, you can drag them together by clicking in the middle between them and dragging. If you hold down the Shift key while dragging an anchor point, the corresponding corners of the rectangle will move with the anchor point.
A useful feature of anchor point handles is that they automatically snap to the anchor points of sibling rectangles for precise positioning.
Anchor Preset:

If the Anchor Number field is not visible, you can click the Anchor Expander arrow to display the Anchor Number field. Anchor Min corresponds to the anchor handle in the lower left corner of the Scene View, and Anchor Max corresponds to the handle in the upper right corner.
The rectangle's position field displays differently, depending on whether the anchors are together (resulting in a fixed width and height) or apart (which causes the rectangle to stretch with the parent).
When all anchor handles are together, the displayed fields are Pos X, Pos Y, Width and Height. The Pos X and Pos Y values ​​represent the position of the pivot relative to the anchor point.
Fields can be partially or fully changed to Left, Right, Top, and Bottom when the anchors are separated. These fields define the padding within the rectangle defined by the anchor. If the anchor points are separated horizontally, use the Left and Right fields, and if they are separated vertically, use the Top and Bottom fields.

3. Visual components

1.Text

2.Image

Image Type:

Simple - Scales the entire sprite uniformly.
Sliced ​​- Uses 3x3 sprite divisions to ensure that resizing does not distort the corners, but only stretches the center.
Tiled - Similar to Sliced, but tiles (repeats) the center section instead of stretching it. For sprites with no border at all, the entire sprite is tiled.
Filled - Displays the sprite in the same way as Simple, except that the sprite is filled from the origin using the defined direction, method, and amount.

3.Raw Image

Raw image controls display non-interactive images to the user. This image can be used for things like decoration or an icon, and the image can be changed from script to reflect changes to other controls. This control is similar to the Image control, but provides more options for animating the image and accurately filling the control rectangle. However, the image control requires its texture to be a sprite, while the original image can accept any texture.

4.Mask

A mask is not a visible UI control, but a means of modifying the appearance of a control's child elements. A mask constrains (that is, "masks") a child element to the shape of the parent element. So if the child is larger than the parent, only the part of the child contained inside the parent will be visible.

5.RectMask2D

RectMask2D is a mask control similar to the Mask control. A mask constrains child elements to the rectangle of the parent element. Unlike standard mask controls, this control has some limitations, but also has many performance advantages.

6.Shadow

The Shadow component adds a simple outline effect to graphical components such as text or images. Must be on the same game object as the graphics component.

7.Outline

The Outline Component adds a simple outline effect to graphical components such as text or images. Must be on the same game object as the graphics component.

8.Position as UV1

This component adds simple UV1 position effects to text and image graphics.

4. Interactive components

1.Button

Button controls respond to user taps and are used to initiate or confirm actions.

2.Toggle

A toggle control is a check box that lets the user turn an option on or off.

3.Toggle Group

A switch group is not a visible UI control, but a way to modify the behavior of a group of switches. Switches belonging to the same group will be constrained so that only one of them can be on at a time: turning one switch on by pressing it will automatically turn off the other switches.

4.Slider

A slider control allows the user to select values ​​from a predetermined range by dragging the mouse. Note that the similar ScrollBar control is used for scrolling rather than selecting values. Familiar examples include difficulty settings in games and brightness settings in image editors.

5.Dropdown

This control displays the currently selected option. When clicked, this control opens a list of options so a new option can be selected. After selecting a new option, the list closes again and the control displays the newly selected option. If the user clicks on the control itself or anywhere else within the canvas, the list will also close.

6.InputField

An input field is a way to make the text of a Text (Text) control editable. Like other interactive controls, input fields are not visible UI elements by themselves and must be combined with one or more visible UI elements to display.

7.Scroll View

Scroll rectangles are used when content that takes up a lot of space needs to be displayed in a small area. The scroll rectangle provides functionality to scroll this content.

Typically, a scroll rectangle is combined with a mask to create a scroll view in which only the scrollable content within the scroll rectangle is visible. In addition, the scroll rectangle can be combined with one or two scrollbars (Scrollbars) that can be dragged for horizontal or vertical scrolling.

Five, automatic layout

1. Layout elements

2. Content Size Fitter

A content size adapter acts as a layout controller that can be used to control the size of its own layout elements. The size is determined by the minimum or preferred size provided by the layout element component on the game object. Such layout elements can be image or text components, layout groups, or layout element components.

3. Aspect Ratio Fitter

An aspect ratio adapter acts as a layout controller that can be used to control the size of its own layout elements. Aspect ratio adapters can adjust height to fit width or vice versa, and can also make an element fit inside its parent or wrap its parent. Aspect ratio adapters do not take into account layout information such as minimum size and preferred size.

4. Horizontal Layout

5. Vertical Layout

6. Grid Layout