Unity study notes UI

Three UI systems:

OnGUI: The earliest UI system, implemented in pure code, written similarly to Update
Advantages: It appears very early and can be controlled by pure code
Disadvantages: only program development
NGUI: Unity’s famous plug-in, which can realize 2D and 3D interfaces, appears in old projects
Advantages: Complete functions, integrated dynamic effects
Disadvantages: Weak performance, interactive implementation using physics engine, requires payment
UGUI: Officially produced UI system, developed by NGUI authors
Advantages: Excellent performance, relatively complete functions

Resolution ratios of common devices:

4:3: iPad, Android Pad
- 16:9: Non-full-screen mobile phones, PC monitors
  - 18:9: full screen
    - Special-shaped screen: closer to standard resolution

Canvas component

Simple understanding: UI is drawn on Canvas, which can be understood as paper for drawing;

Canvas will cover the entire screen in two modes (Overlay and Camera). When displaying the on-screen UI, you only need to handle the display in Canvas;

All UI elements must be built under Canvas, otherwise there will be problems with not displaying;

Three rendering modes:

Overlay:Canvas is attached to the camera lens, and all UI elements are displayed in front of the scene objects

Pixel Perpect: High pixel definition rendering

Sort Order: When there are multiple Canvas, control the display order of Canvas. The larger the Canvas, the larger they are displayed in the front.

Camera:Show the display deviceCanvas

Modify the Render Mode property of the Canvas component under Canvas: Camera

Drag the camera to the Canvas component Render Camera property under Canvas

Adjust the Cube position to the front of the Canvas

Adjusted in Canvas Plane Distance, and controlled the distance from Canvas to the rendering camera

Plane distance : The distance from Canvas to the camera, when SortingLayer and Order in Layer are the same, the closer the camera, the more advanced (satisfying the camera rendering relationship)

Sorting Layer: Sorting layer (particles are added in the middle of multi-layer Canvas)

Order in Layer: Order in the same layer

Establish a sorting layer and create a sequence:

can be sorted according to the order within the layer, and the sorting relationship: the configured order of the sorting layer, the lower it is, the higher it is displayed; when the sorting layers are consistent, the larger the Order in layer, the higher it is;

Sometimes dual camera overlay is used, one rendering the scene and the other rendering the UI:

Create Camera;
Drag the UI camera to Canvas;
Set the UI camera to be filled with depth values. The depth of the UI camera is higher than the main camera;
The main camera does not render UI elements, and the UI camera only renders UI elements (Culling Mask);

World Space:Canvas is displayed in the scene in the form of 3D objects

Adjust Canvas mode to World Space

Put Canvas in the field of visibility of the camera

Canvas zoom

This component will stretch all child elements under the Canvas

UI Scale Mode: Stretch type

1. Constant Pixel Size static mode

2. cale With Screen Size pixel calculation mode

Reference resolution: Based on the reference image pixel size provided by the UI designer

Adaptation method:

not not not have not been had been been made.
1. Fully adaptive (automatically calculates the width and height changes as the zoom factor)
  1. How many UI pixels does one meter correspond to in world mode?

3. Constant Physical Size physical calculation mode

Conduct stretch calculations in inches.

In the project, it will be stretched according to the screen size:

Design resolution, fill in the pixel value of the art effect image (covering the entire screen)

Select Expand: Automatically calculate height-adaptive stretch or height-adaptive stretch

Calculation of a background image that covers the entire screen

For example, get a 1280x720 background image

Calculation method:

18: 9 below: missing both sides, (design resolution height / 9)* 18
- 16:9: Art generally produces pictures in 16:9
  - 4:3: Missing top and bottom, (design resolution width / 4) * 3

RectTransform component

Appearance position: Appears in all Canvas child elements, all UI elements should have RectTransform components

Pos (XYZ): position (X, Y, Z), unit (pixel), Position is the distance from the axis point to the anchor point

Width, Height: width and height, unit (pixel)

Anchors: anchor point (four-leaf clover),referenced to parent object

three conditions:

Single anchor point: The distance calculation is the XYZ offset from the anchor point to the axis point
Double anchor point: distance from the boundary of the element to the anchor line, the distance from the axis point to the anchor line
Four anchor points: the distance from the four borders of the element to the anchor box

Anchor point quick selection tool (cross symbol):

Alt: Move anchor point+fast stop position
Shift: Move anchor point + move pivot point + quick dock position

Pivot: pivot point (blue circle),referenced by the current object

After adjusting the pivot point, position calculation, rotation, and scaling will be affected. Generally, the pivot point is retained at the center point.

The four points around represent the boundary points of UI elements.

Element rendering order

The following picture is for reference

The lower object is displayed in front of the upper object
- The child object is displayed in front of the parent object
  - Objects below are always displayed in front, regardless of the hierarchy above.

Basic components of UGUI

The ones without TextMeshPro are the original components, and TMP is the enhanced version of the plug-in. Here we only talk about the original components.

Panel component

A complete interface, a Panel

Panel is generally located in the Canvas sub-object, with four anchor points at the four corners and zero margins, so the Panel is as big as the Canvas, and the Canvas is as big as the screen, so the Panel is as big as the screen. If the element display processing is normal in the Panel, then the screen will also normal

Text component

Text content
Font selection
Font style (standard, bold, italic, bold italic)
Font size
Line spacing
Whether to enable rich text
Bold: Text
Italics: Text
Size: <size=font size>text</size>
Modify color:<color=color name>text</color>
<color=#Color number (hexadecimal)>Text</color>
Alignment (up and down, left and right)
Geometric alignment (geometric space occupied by reference words)
Horizontal overflow (wrap, overflow [out of the right border])
Vertical overflow (truncated and not displayed, overflow [out of the bottom border])
Font size adaptive: If it is turned off, the original font size will be used, and if it is turned on, the font size will automatically adjust between the minimum and maximum values.

shadow

contour

Image component

Color: used for color mixing. Art sometimes provides white pictures and color numbers. Programmers process the pictures and dye them into the desired color, which can reduce the size of the package.

Four types

1. Normal mode (icon)

Preserve Aspect: Maintain the aspect ratio of the picture, and adapt the height or width

Set Native Size: You can quickly restore the original pixel size of the picture provided by the art

2. Cropping mode (nine-square grid, three-square grid)

Divide the picture into a nine-square grid or a three-square grid

1) Find picture resources

2) Select the Elf Editor

3) Jiugongge cut diagram

Areas 1,3,7,9 are not stretched, areas 2,8 are stretched transversely, and areas 4,6 are stretched longitudinally

3. Tile mode (seamless texture)

4. Fill mode (progress bar)

Fill Method: Filling method (360 degrees, horizontal and vertical)
Fill Origin: Fill starting point
Fill Amount: fill percentage
Clockwise: clockwise or counterclockwise
Preserve Aspect: Maintain the aspect ratio of the picture, and adapt the height or width
Set Native Size: You can quickly restore the original pixel size of the picture provided by the art

Raw Image component

Original picture component: can display sprites or textures

It has fewer functions than Image, so its performance is better

You can control the UV offset to display part of the sprite

DrawCall

Screen display process

CPU->Load data->Memory->Video memory->Graphics card->Monitor

Batchs are the number of draw calls required to currently render all content on the screen.

Each independent UI picture will generate a DrawCall

Optimize DrawCall (UI slicing):

Slice multiple UI slices into a UI diagram, and the UI interface only loads one UI picture display

Open the settings in Edit-Project Setting-Editor/SpritePacker and set it to Always Enabled

Right click in the project to create Sprite Atla

UI event interaction

First add the Graphic Raycaster component to Canvas, which is a ray emitter used to detect UI input.

Whether to ignore Canvas reverse event operations
Objects that block events (2D objects [sprite sheets], 3D objects)
The rendering layer where the object blocking the event is located

Add interactive components, such as pictures:

Raycast Target: Whether to receive Canvas rays

The EventSystem object also needs to exist, which is generally created automatically when creating the Canvas.

UI's ray detection will detect all elements under object tree in sequence. If any ray detection is successful, it will be fed back to the event with an event In the corresponding component (Button), if you want to achieve ray penetration, you can turn off the ray detection of the previously displayed UI element.

Button component

Whether the button is interactive

Button-like switching effect:

UI elements affected by animation effects (Image and Text are derived from Graphic)
Pictures used for the effect
The color in normal state
Color in highlighted state (mouse in)
The color of the pressed state (button pressed)
The color of the inactive state (not interactive)
Color multiplier (RGBA component multiplied by the multiplier)
Switch animation duration

For keyboard navigation, you can select the interactive UI by pressing keys. After Visualize is turned on, you can see the navigation line. Navigation can choose horizontal movement, vertical movement, automatic matching movement, and specified up, down, left, and right movements. Mobile games can turn off navigation.

Button addition event (drag method):

Add a script and write a callback function internally (hanging under the scene object)
Find the Button, OnClick event, add (the object where the script is located, and select the callback function)
Run the project and click the button (Do something)
Trigger callback function
OnClick can add multiple callback functions

Button add event (Code method):

Toggle component

Is On: Used to determine whether the current Toggle is on.

Toggle hook switching animation effect

Toggle ticked picture

If Toggle forms a group, you need to drag ToggleGroup to Toggle, for example:

Toggle event handling

Determine whether the current switch is on

Dynamic parameter passing and static parameter passing

Dynamic parameter transfer will transfer bool data according to Toggle's IsOn, and static parameter transfer will transfer bool data according to the configuration value.

The enabled Toggle can be obtained in ToggleGroup:

Slider component

Fill Rect: Fill the background image part of the selected area of the slide bar
slider ball
The sliding direction of the slider
The numerical value of the starting position (floating point number)
The numerical value of the end position (floating point number)
The sliding value must be an integer (Boolean type)
The current value of the slider (floating point number)

InputField component

Text Component: input content, displayed text component
The current input content value
Maximum number of input characters
Type of text entered (number, real number, numeric English, name, password)
Line type (single line, carriage return to jump out, carriage return to line feed)
Original content of the input box (displayed by default)
Cursor flashing frequency
cursor width
Cursor custom color
Color of selected text
Whether to hide the keyboard on mobile devices
Whether it is read-only (the text box cannot be edited)

InputField event:

When the input content in the text box changes or the input ends, the callback function is executed respectively.

Mask component

A picture with a Mask component will display the part of the child object picture where the Alpha channel of the parent object picture is not 0.

Parameters: When no child objects can be displayed, whether to display the parent object's image

The Mask component is generally used in conjunction with the Image component to achieve irregular display, such as circular avatars.

ScrollView component

UI object that actually displays the area
Whether to enable horizontal scrolling
Whether to enable vertical scrolling
scroll type
Borderless free scrolling
There is a border with a rebound effect (rebound coefficient)
There is a borderless bullet effect
Drag inertia
Scroll wheel or touchpad movement coefficient
The visible area of ScrollView
Horizontal scroll bar
Visibility (visible area vs. actual display area)
Always show
Automatically hide
Automatically hide and support automatic expansion of the area
space
Space reserved for the intersection area of horizontal and vertical scroll bars
Vertical scroll bar
Visibility (visible area vs. actual display area)
Always show
Automatically hide
Automatically hide and support automatic expansion of the area
space
Space reserved for the intersection area of horizontal and vertical scroll bars

ScrollBar component

Handle Rect: drag bar object

Direction of movement: up and down, down and up, left and right, right and left

The value corresponding to the drag bar (0 starting position, 1 ending position)

The ratio of the drag bar to the scroll bar (visible area/actual area, automatically calculated)

Drag by step (fixed number of steps to display all actual areas step by step)

Layout arrangement component

Vertical adaptive arrangement of components, parameters:
The padding of the outer frame (left, right, top and bottom)
element spacing
Alignment of child elements (nine points of the outer frame)
Whether the sorting component controls the width and height of child elements (whether to control width, whether to control height)
Forced adaptation of child elements (width [aligned with the outer frame], height [after calculation based on equal divisions of the outer frame, set the height of the child element])

Horizontal adaptive arrangement of components, parameters.

Grid arrangement component, parameters:
The padding of the outer frame (left, right, top and bottom)
The width and height (width, height) of internal elements cannot be modified freely. The width and height of sub-elements cannot be modified freely.
Child element spacing (horizontal, vertical)
The corner where the first child element is located (top left, top right, bottom left, bottom right)
The axis direction to start the arrangement (horizontal, vertical)
Alignment of child elements (nine points of the outer frame)
Fixed number of rows and columns (adaptive, set fixed columns [number of columns], set fixed rows [number of rows])

Parent element width and height adaptive component

Horizontal (not suitable, minimum value)
Vertical (unsuitable, minimum value)

Dropdown component

Template: ScrollView of drop-down menu;
The text component corresponding to the currently selected option (the text content of the selected option is displayed in this component);
The picture component corresponding to the currently selected picture option (the selected option picture is displayed in this component);
In the drop-down menu, the text component that stores the options (from Template, each option will be copied);
In the drop-down menu, the image component that stores the options (from Template, each option will be copied);
The index value of the option list currently selected in the drop-down menu;
A set of option lists (List, options can be text or pictures);
When the option changes, the callback function will obtain the index value of the corresponding option;

Custom trigger event

Three elements that trigger UI events

Canvas configure ray emitter
EventSystem component exists in the scene
The interactive component Raycast Target is turned on (Text component or Image component)

Custom click implementation:

Since Unity is a component-based development concept, custom buttons are also implemented using component Scripts.

Writing custom event steps:

Introducing a custom event namespace (UnityEngine.EventSystems)
Implement custom event Interface
User interaction triggers the callback function

Click event interface:

IPointerEnterHandler: The mouse cursor moves into the ray detection area and triggers the callback function
IPointerExitHandler: The mouse cursor moves out of the ray detection area, triggering the callback function
IPointerDownHandler: When the mouse is pressed in the ray detection area, the callback function is triggered
IPointerUpHandler (premise: the press event needs to be triggered first):
Case 1: The mouse is pressed and raised in the ray detection area (normal click)
Case 2: The mouse is pressed in the radiation detection area, moved out of the radiation detection area and then raised (cancel after clicking)
Case 3: The mouse is pressed outside the ray detection area, and then raised outside the area (the callback is not executed when pressed)
Case 4: The mouse is pressed outside the ray detection area, and then raised within the area (the callback is not executed when pressed)
IPointerClickHandler: When the mouse is pressed and raised in the ray detection area, the callback function is triggered. In case of Up 2, the Click event will not be triggered.

Button click event analysis:

Drag and drop event implementation:

Using compression for translucent gradient maps on iOS devices will cause loss of image quality, so you can slice the translucent gradient UI to create a true-color atlas separately.

Drag event group:

IBeginDragHandler: After detecting the ray, execute the callback functiononce when the dragging action starts
IDragHandler: After dragging starts, when the dragging position changes, the callback function is executed (each movement)
IEndDragHandler: When dragging is in progress, when the mouse or hand is raised, execute once callback function

How to get the position of an object:

Position: Relative quantity, requires a reference object
Screen coordinates: generated when the hand clicks on the screen
DragArea local coordinates: control the position of the joystick (DragBar)

Requirement: How to convert a point in the screen coordinate system to a point in the DragArea local coordinate system