Unity UGUI (2) core components

Unity Canvas related knowledge learning

---

---

1. Canvas：

Container of UI elements, minimum unit of batching, 2D mode, 3D mode.

1.1 Render Mode

The way the UI is rendered on the screen or as a 3D space object.

1) Screen Space - Overlay : In this mode, the canvas is scaled to fit the screen and then rendered directly without reference to the scene or camera (the UI will be rendered even if there is no camera in the scene at all). If you change the size or resolution of the screen, the UI will automatically rescale to adapt. The UI will be drawn on top of all other graphics (such as camera views).

• Canvas is always drawn last after other objects are drawn, so Canvas will cover all objects.
• The size and position of the Canvas cannot be set manually. The size can only be consistent with the screen size, and the position is always in the middle of the screen.
• According to the settings of the CanvasScaler component, the size of the Canvas is finally determined. If there is no CanvasScaler, one pixel of the Canvas is equal to one Units.
• 3D objects under the Canvas node in this mode will not be displayed.

2) Screen Space - Camera : In this mode, the UI canvas will be fixed in front of the rendering camera. Change the distance between the canvas and the camera by adjusting Plane Distance. At this point the canvas is always rescaled to accurately fit the camera frustum. If you change the size or resolution of the screen or change the camera frustum, the UI will automatically rescale to adapt. All 3D objects in the scene that are closer to the camera than the UI plane will be rendered in front of the UI, while objects behind the plane will be occluded.

3) World Space : This mode renders the UI as a flat object in the scene. However, unlike Screen Space - Camera mode, the plane does not need to face the camera and can be oriented arbitrarily. The size of the canvas can be set using a rectangle transform, but the size of the canvas on the screen will depend on the camera's perspective and distance. Other scene objects can be behind the canvas, penetrate the canvas, or be in front of the canvas.

1.2 Display order of multiple Canvas

• The rendering mode is Screen Space - Overlay is always on top.
• The larger the SortingLayer, the higher it is displayed.
• The SortingLayer is the same. The larger the SortOrder, the higher it is displayed.
• SortingLayer and SortOrder are the same. The smaller the Z coordinate (the closer to the camera), the closer it is to the front.
• The Z coordinate, SortingLayer and SortOrder are all the same. Affected by the hierarchical relationship in the Hierarchy window, the lower the hierarchy, the higher it is displayed.

2.Canvas Scaler: Screen resolution adaptation

Used to control the overall scaling and pixel density of UI elements in the Canvas canvas. This scaling affects everything under the canvas.

2.1 UI Scale Mode

Determines how UI elements in the canvas are scaled.

1) Constant Pixel Size in Screen Space mode : UI elements maintain the same pixel size regardless of the screen size.
Scale Factor: Scale all UI elements in the canvas by this factor.
Reference Pixels Per Unit: The number of pixels corresponding to each unit in the canvas, usually 100 pixels corresponds to one unit in Unity.

Scale With Screen Size : Scale the canvas proportionally according to a certain scaling factor, and the UI elements under the Canvas will also be affected.
Reference Resolution: The design resolution of the UI layout. If the screen resolution (actual device resolution) is larger, the UI will be scaled up, if it is smaller, the UI will be scaled down.
Screen Match Mode: Screen adaptation mode

1. Match Width or Height: Scale the canvas area using width, height, or a linear interpolation of the two as a reference.
2. Expand: Expand mode, select a smaller scaling factor in the aspect ratio for scaling. The entire UI can be displayed, and the extra blank pixels in the canvas are filled with a fixed color.
3. Shrink: Cropping mode, select a larger scaling factor in the aspect ratio for scaling. Some UI will be cropped.

Match: Scale using the width ratio, height ratio, or a linear interpolation of the two as a reference.
Reference Pixels Per Unit: Number of pixels per unit.

Constant Physical Size : UI elements maintain the same physical size regardless of screen size and resolution.
Used to solve the problem of different sizes of the same UI on different devices (different DPI).

Physical Unit: The physical unit used to specify location and size.

Fallback Screen DPI: The DPI used when the screen DPI is unknown.
Default Sprite DPI: The pixels per inch used for the sprite so that its "Pixels Per Unit" setting matches the "Reference Pixels Per Unit" setting.
Reference Pixels Per Unit: If a sprite has this "Pixels Per Unit" setting, its DPI will match the "Default Sprite DPI" setting.

2) Dynamic Pixels Per Unit in World Space mode
: The amount of pixels per unit used for dynamically created bitmaps (such as text) in the UI.
Reference Pixels Per Unit: Number of pixels per unit.

3. EventSystem

• Responsible for the entire Tick event system.
• Responsible for managing all input events and dispatching them to the correct GameObject.
• There can only be one EventSystem component in a scene. If there is no EventSystem when creating the UI, one will be automatically created.

In the Inspector window of the EventSystem object in the Editor, you can view: the currently selected object (Selected), and the input information of the left and right mouse buttons (Pointer -1 and Pointer -2) and other information.

4. Standalone Input Module

• Inherits BaseInputModule.
• Managed and driven by EventSystem.
• Handle different types of input (such as mouse, touch screen, etc.) and generate corresponding events.

InputModule mainly handles user input events in the Process() function.
Take touch as an example: The main job of Process is to maintain the data of PointerEventData (click position, current position, click time, delta value of the previous frame, etc.), and at the same time issue events (Click, Drag) based on PointerEventData.

5. Graphic Raycaster: Graphic ray caster

• If the UI needs to accept click events, you need to add the GraphicRaycaster component to the Canvas where the UI is located.
• All interactive UI elements inherit from UIBehaviour and check Raycast Target to be able to receive and process corresponding types of input events.
• Obtain all objects hit by the current ray during detection, sort them uniformly, and select the first object after sorting as the result of ray detection.
• Rely on the rectangular frame of RectTranform for ray detection, no camera is required.
• Sort according to the level of the Canvas and the depth of the UI.

// EventSystem.cs
public void RaycastAll(PointerEventData eventData, List<RaycastResult> raycastResults)

// s_RaycastComparer 排序方法
private static int RaycastComparer(RaycastResult lhs, RaycastResult rhs)

// GraphicRaycaster.cs  
public override void Raycast(PointerEventData eventData, List<RaycastResult> resultAppendList)

Principle of UGUI event system:

Process: Event input -> Raycasting -> Event distribution

InputModule obtains the user's operation data, Raycaster finds the target object and notifies the EventSystem, and finally the EventSystem sends the event to the target object to respond and handle the corresponding event.

Unity provides a series of event handling interfaces, which inherit from IEventSystemHandler. Each time an event is distributed,
all components that implement the IEventSystemHandler interface on the target object are queried, and then messages are distributed to these components.

Events supported by UGUI: https://docs.unity.cn/cn/current/Manual/SupportedEvents.html

Core source code: ExecuteEvents.cs