Detailed UGUI of Unity

UGUI

Overview of the six basic components

Attached to the Canvas object:

Canvas

Canvas components are mainly used to render UI controls.

Canvas Scaler

The canvas resolution adaptive component is mainly used for resolution adaptation.

Graphic Raycaster

The ray event interaction component is mainly used to control the ray response correlation.

RectTransform

The UI object position anchor control component is mainly used to control the position and alignment of UI objects.

Attached to the EventSystem object:

EventSystem

The Basics of UI Event Response

Standalone Input Module

The player input event response system and independent input module components are mainly used to monitor player operations.

Canvas canvas component

The Canvas component is the basis for all UI elements in UGUI to be displayed. It is primarily responsible for rendering all of its own UI subobjects. If the UI control object is not a child object of Canvas, the space will not be rendered. We can modify the rendering mode by modifying the parameters on the Canvas component.

It is worth noting that multiple Canvas objects are allowed in the Unity scene, and parameters such as the rendering mode of different canvases, the resolution adaptation method, etc. can be managed separately. If there is no special requirement, a Canvas is usually enough.

The most important thing in the Canvas component is the render mode (rendering mode). All other properties on the Canvas component will change according to the rendering mode.

Screen Space overlay

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-amwgMW6t-1623203782686)(img\image-20210531102733612.png)]

Screen coordinate system override mode. The UI in this mode is always in front of all objects in the same camera, unless we use two different cameras to manage UI and game object rendering separately.

Pixel Perfect: Whether to enable the perfect pixel, enabling this will make the effect of the UI map better, but it will consume more performance.

Sort Order: Canvas sorting value, a Canvas with a larger value will overwrite a Canvas with a smaller value.

Target Display: The target output display, the default is Display1.

Screen Space Camera

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-Fzxvfyzq-1623203782689)(img\image-20210531102846153.png)]

Screen coordinate system camera mode. GameObjects may be in front of the UI in the same camera. However, using this mode, we generally use two different cameras to manage UI and game object rendering separately.

Pixel Perfect: Same as above, pixel perfect.

Render Camera: Renders camera items. Just drag and drop the camera object responsible for rendering the UI. If this item is not bound, Unity will render in overlay mode.

Plane Distance: The z-axis distance from the UI plane to the UI camera. Under the same camera, we can change the sequence of game objects and UI objects by adjusting this value.

Sorting Layer: Canvas sorting layer.

Order in Layer: The sort value in the Canvas layer.

World Space

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-FaFR9nLI-1623203782691)(img\image-20210531102857880.png)]

World coordinate system mode. In this mode, the UI will be viewed as a 3D game object, which is suitable for VR and AR UI.

Event Camera: Click the event camera. If it is not bound, the UI in this mode cannot be interacted with.

Sorting Layer: Canvas sorting layer.

Order in Layer: The sort value in the Canvas layer.

CanvasScaler canvas scaling controller component

Pre-school preparation:

1. View the current device resolution: You can view it in the Game window in editor mode.
   1. 
   2. [External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-HBIcMp2M-1623203782693)(img\image-20210531102942589.png)]
2. Reference resolution: The resolution that appears in one of the modes, which will participate in the calculation of resolution adaptation.
   1. 
   2. [External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-NLpOZKvw-1623203782694)(img\image-20210531103025909.png)]
3. Canvas width and height and zoom factor: parameters that can be changed by resolution adaptation, where the current screen resolution is equal to Canvas width and height * zoom factor.
   1. 
   2. [External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-PfKtxUZV-1623203782696)(img\image-20210531103058656.png)]
4. Resolution size self-adaptation: Resolution self-adaptation is a scaling factor obtained by calculating the screen resolution and reference resolution through a certain algorithm, and this scaling factor will affect the size of all UI controls.

Constant Pixel Size constant pixel mode

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-6ITdHj7O-1623203782697)(img\image-20210531150558307.png)]

The constant pixel mode means that the UI control in this mode will not be self-adaptive, but will always maintain the UI pixel size. The final effect we see is also affected by the parameter Scale Factor, but this parameter does not affect The size of the UI pixel itself, but affects the Canvas canvas.

Scale Factor: scaling factor, all UI elements in the canvas are scaled by this factor, which is equivalent to the Scale property in the RectTransform of the control canvas.

Reference Pixels Per Unit: unit reference pixel, which means how many pixels correspond to a unit in Unity (the default unit is 100 pixels), and the Pixels Per Unit parameter setting in the image settings will participate in the calculation together with this parameter.

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-jEDSkUOp-1623203782699)(img\image-20210531151133515.png)]

The calculation formula of the UI original pixel size in Constant Pixel Size mode: UI original size = picture pixels / (Pixels Per Unit / Reference Pixels Per Unit). The original size of the UI here refers to the size of the ui after we press the set Native size in the Image component. Will be affected by scale Factor.

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-mdG6Al6S-1623203782701)(img\image-20210531152008549.png)]

It should be noted that Scale Factor only controls the size of the UI we see macroscopically, and does not participate in the calculation of the original pixels of the UI.

Scale With Screen Size scaling mode

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-GqjjoQNb-1623203782702)(img\image-20210531152347623.png)]

Scaling mode is the most commonly used mode when we are developing games. In this mode, the UI size will be scaled according to the screen size, and the UI will be scaled as the screen size changes.

Reference Resolution: Reference resolution, the resolution is the original resolution of the picture. It is the standard resolution for artist output. All matching modes in scaling mode will be adaptively calculated based on the reference resolution.

Screen Match Mode: Screen matching mode, when the aspect ratio of the current screen resolution does not adapt to the reference resolution, the matching mode for resolution size adaptation.

Refercene Pixels Pre Unit: Unit reference pixels.

The screen matching mode is divided into three modes:

Expand

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-emTPUQSR-1623203782704)(img\image-20210531161826763.png)]

In the expansion mode, Unity will expand the canvas area horizontally or vertically , and zoom in and out of the canvas according to the change of aspect ratio, and there may be black borders.

Note here: In the expansion mode, unity will expand the width and height of the Canvas to make it higher than the reference resolution.

Calculation formula:

Zoom factor = Mathf.Min(screen width/reference resolution width, screen height/reference resolution height);

Canvas size = screen size / zoom factor.

Performance effect:

Minimize the UI elements to the greatest extent, retain all the details of the UI controls, and may leave black borders.

Shrink

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-Y47gjLDr-1623203782706)(img\image-20210531161842385.png)]

In cropping mode (shrinking mode), Unity will crop the canvas area horizontally or vertically , enlarge or reduce the canvas according to the change of aspect ratio, and the UI may be cropped.

Note here: In cropping mode, untiy will crop the width and height of the Canvas to make it lower than the reference resolution.

Calculation formula:

Zoom factor = Mathf.Max(screen width/reference resolution width, screen height/reference resolution height);

Canvas size = screen size / zoom factor.

Performance effect:

Enlarge the UI elements to the maximum extent so that they can fill the screen, and the UI may be cropped.

Match width or Height

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-guAsknX5-1623203782707)(img\image-20210531161854103.png)]

Scale the canvas area with the width and height or the average of the two as a reference .

This mode will be the most common screen matching mode we use in game development. Mainly used for games that only have landscape mode or portrait mode.

Calculation formula: The calculation formula here involves the concept of logarithm.

Performance effect:

Vertical screen game: we will set Match value = 0

Set the canvas width to the reference value resolution width, and keep the ratio unchanged. The higher the screen, the black border may appear. Smaller ones may be clipped.

Horizontal screen game: we will match the value = 1

Set the height of the canvas to the height of the reference resolution, and keep the ratio unchanged. The higher the screen, the black border may appear. Smaller ones may be clipped.

Constant Phsical Size constant physical mode

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-G3K0tI5y-1623203782708)(img\image-20210531165701876.png)]

UI elements always maintain the same physical size, regardless of screen size and resolution.

DPI (Dots Per Inch): The number of pixels per inch of the image.

Physical Unit: physical unit, the type of physical unit to be used.

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-NZX0jchH-1623203782709)(img\image-20210531171952760.png)]

Their conversion relationship is:

Unit type	and 1 inch (Inch) relationship
Centimeters	2.54
Millimeters	25.4
Inches	1
Points	72
Pizzas	6

Fallback Screen DPI: fallback DPI, use this value when no device DPI can be found.

Default Sprite DPI: The default image DPI.

Refercene Pixels Pre Unit: Unit reference pixels.

Calculation formula:

New unit reference pixel = unit reference pixel * Phsical Unit / Default Sprite DPI

Original size of UI picture = picture pixel size / (Pixels Per Unit / new unit reference pixel)

The difference between constant physical mode and constant pixel mode:

When the screen sizes of the two devices are different but the DPI is the same, the constant physical mode can ensure that the size of the ui image seen by the two screens is the same, but the UI image in the constant pixel mode will be larger and smaller.

World3D mode

This mode cannot be called up manually. When we set the rendering mode of Canvas to World Space, CanvasScaler will force the adaptive mode to change.

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-197d2RZl-1623203782711)(img\image-20210531173505275.png)]

Dynamic Pixels Per Unit: The pixel density in the dynamically created bitmap in the UI, the higher the value, the clearer the UI.

Refercene Pixels Pre Unit: Unit reference pixels.

We rarely use this mode.

GraphicRaycaster graphics ray caster

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-on9MTaAa-1623203782712)(img\image-20210601100908396.png)]

Graphic Raycaster means a graphic raycaster, which is suitable for ray emitters that detect UI input events. Its main responsibility is to detect the interaction between the player and UI elements through rays, and determine whether the UI elements are clicked.

Unlike NGUI, UGUI's UI event detection does not depend on colliders.

Ignore Reversed Graphic: whether to ignore reversed graphics.

Blocking Objects: Rays are blocked by those types of colliders. Note: This item is invalid in overlay rendering mode.

Blocking Mask: Rays are blocked by colliders at those levels. Note: This item is invalid in overlay rendering mode.

EventSystem和Standalone Input Module

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-qgPiudOT-1623203782713)(img\image-20210601104604515.png)]

EventSystem

Event System means the event system, which is used to manage the player's input events and distribute them to the UI controls. All UI events are detected through the polling query in the EventSystem component and executed accordingly. It is similar to a transfer station. Work together with many modules. Without it, all clicks, drags, etc. will not be responded to.

First Selected: The first selected UI object by default, this item is often used together with UI navigation events.

Send Navigation Events: Whether to allow navigation events (move/press/cancel), the navigation system will explain in detail when explaining components.

Drag Threshold: The threshold of the drag operation (how many pixels are moved, the system will judge that it is dragging now)

Standalone Input Module

Standalone Input Module is an independent input module of Unity. It is mainly aimed at processing mouse/keyboard/controller/touch screen input. The input events are distributed through EventSystem. It depends on the EventSystem component. Both of them are indispensable. We rarely change things in the standalone import module.

Horizontal Axis: The hotkey name corresponding to the horizontal axis button (the name corresponds to InputManager)

Vertical Axis: The hotkey name corresponding to the vertical axis button (the name corresponds to InputManager)

Submit Button: The hotkey name corresponding to the submit button (the name corresponds to InputManager)

Cancel Button: Cancel the hotkey name corresponding to the button (the name corresponds to InputManager)

Input Actions Per Second: The number of keyboard/controller inputs allowed per second

Repeat Delay: The delay time before the repetition rate of input operations per second takes effect

ForceModule Active: Whether to force the module to be active

If you want UGUI's UI to respond to events, Graphic Raycaster, EventSystem, and Standalone Input Module are indispensable.

RectTransform**

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-KDMeyER1-1623203782715)(img\image-20210601154902980.png)]

CanvasScaler controls the resolution adaptation of the UI, and the position and size of the UI controlled by RectTransform is adaptive.

Inherited from Transform, RectTransform is a component specially used to deal with the position and size of UI elements. Traditional Transform components only deal with position, angle, and scaling. On this basis, RectTransform adds rectangle correlation, treats UI elements as a rectangle, and adds attributes such as center point, anchor point, length and width, etc. The purpose is to more conveniently control its size and position in resolution adaptation adapt.

Pivots and Anchors

Pivot: Pivot point, value range 0~1, scale value.

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-IIn4ztjB-1623203782716)(img\image-20210601155946706.png)]

Anchors: Anchor points, the anchor point attribute itself belongs to the currently selected UI object, but the representation range of the anchor point is based on the parent object of the current object.

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-IKYYJkD8-1623203782718)(img\image-20210601160656355.png)]

In the properties of Anchors, there are two parameters that control the size of the anchor point, namely Min and Max. Here, Min and Max are not so much two coordinates, but four lines here. We're pulling the anchors apart here.

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-FwRev5Ed-1623203782719)(img\image-20210601161223935.png)]

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-0AD9XT9n-1623203782720)(img\image-20210601161257781.png)]

When we set it up as shown in the figure, we found that the anchor points were scattered to the four corners of the relative parent object. Here we draw four auxiliary lines to make everything clear.

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-ReamHRHN-1623203782722)(img\image-20210601162053274.png)]

These four lines determine the position and size of the anchor point. In order not to confuse the concept, here we call this diffused anchor point an anchor frame. Of course, in addition to this completely dispersed anchor point, there is also a line anchor point. Here we refer to this anchor point as a single line anchor line.

UI location settings

When Anchors are anchor points:

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-iU4WIqLV-1623203782723)(img\image-20210601164524256.png)]

The displayed content is Pos (x, y, z), width and height respectively.

The Pos of the current UI object is the pivot point Pivot of the current UI object relative to the Anchors.

We drag and drop UI objects in the View view (note that the UI is operated in the View view, 2D view is strongly recommended):

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-U5glbHB0-1623203782724)(img\image-20210601165215335.png)]

About some small settings when the View view operates the UI (here is replaced by dragging because of the screenshot):

The dark background here is because I turned off skybox rendering.

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-1eKO4F5R-1623203782725)(img\image-20210601165423643.png)]

The Inspector panel at this time:

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-h1woUqAP-1623203782726)(img\image-20210601165519034.png)]

When Anchors are anchor boxes:

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-yEcdKaR6-1623203782727)(img\image-20210601165704736.png)]

The displayed content becomes Left, Top, Right, Bottom. What do these mean? Remember that we said that the Min and Max properties of UGUIAnchors actually represent four straight lines, and the Left, Top, Right, and Bottom here represent the distance between the four sides of the UI object and the four straight lines of Anchors.

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-eJE9UGdi-1623203782728)(img\image-20210601170044802.png)]

The Inspector panel at this time:

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-lnnTvzg1-1623203782729)(img\image-20210601170100978.png)]

When Anchors are anchor lines:

When Anchors are anchor lines, it is actually a combination of the above two situations. For example, when our Anchors are set as shown in the figure:

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-XGReWfgX-1623203782730)(img\image-20210601170315886.png)]

In the View view at this time, we can see:

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-flqWk10D-1623203782731)(img\image-20210601170459817.png)]

RectTransform at this time:

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-VcAOnM2O-1623203782732)(img\image-20210601170520738.png)]

The situation of other anchor lines will not be introduced here.

Pivot point anchor point quick setting

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-bjiY0SlX-1623203782733)(img\image-20210601170959051.png)]

There will be all the anchor points we commonly use here. We can press the shift key while setting the anchor point and set the pivot point at the same time, and we can also press the alt key at the same time to set the position of the current UI object.

Image of the three basic controls of UGUI

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-FfMxk3MU-1623203782734)(img\image-20210602095236793.png)]

Image is the image component of UGUI. It is the key component for UGUI to display sprite images. Except for large images such as background images, Image is generally used to display image elements in the UI.

Import pictures and set Sprite format:

1. First select the picture to be changed in the Project panel:
   1. 
   2. [External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-JolOK1VT-1623203782734)(img\image-20210602095922139.png)]
2. Set it like this in the inspector panel:
   1. 
   2. [External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-ctS8vyz9-1623203782735)(img\image-20210602095946367.png)]

Only Sprites can be dragged into the Image component.

parameter:

Source Image: Image source, the image type must be a sprite type.

Color: The color of the picture, this color will be superimposed with the color of the picture itself.

Material: Image material, generally not modified.

Raycast Target: Whether it is the target of ray detection, if it is not checked, it will not respond to ray detection.

Maskable: whether it can be masked

Image Type: Image type, the four image types will be similarly explained below.

Use Sprite Mesh: Use the sprite grid. If checked, Unity will help us generate a picture grid.

Preserve Aspect: Ensures that images always maintain their original dimensions.

Set Native Size: Set the image to its original resource size, which will be affected by UGUI resolution adaptation.

image type

Simple: Normal mode, uniformly zooms the entire image.

Sliced: Slicing mode, 9-grid stretching, only the central cross area is stretched. If you want to use this mode, you need to use Sprite Editor to divide the picture first.

​ Pixels Per UnitMultiplier: Unit pixel multiplier.

​ Fill Center: Center filling.

The version of Unity before 2019 is equipped with Sprite Editor by default, and the 2019 version and later need to go to the package manager to import this plug-in first .

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-zqiQU6qx-1623203782736)(img\image-20210602101824362.png)]

Search for 2D Sprite after loading, and click install in the lower right corner

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-yMEwjB8p-1623203782738)(img\image-20210602101919155.png)]

At this point, go back to the inspector panel of the picture and you can use the Sprite Editor.

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-8le2jjsK-1623203782738)(img\image-20210602102027435.png)]

The picture below shows the Sprite Editor panel

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-Qyh3Chdk-1623203782739)(img\image-20210602102049793.png)]

To cut the picture, we can drag the green lines on the four sides of the picture, or manually set the Border value directly in the Sprite window in the lower right corner. Just save it.

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-heJAZRwc-1623203782740)(img\image-20210602102727636.png)]

Tiled: Tiled mode, repeating the tiled central part.

Filled: fill mode. This mode is often used to make blood bars, experience bars, skill cooling, etc.

​ Fill Method: Filling method.

​ Fill Origin: Fill the origin.

​ Fill Amount: Filling amount.

​ Clockwise: clockwise.

Text of the three basic controls of UGUI

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-UxpSSrgW-1623203782741)(img\image-20210602105222064.png)]

parameter:

Text: Text content.

Font: Font.

Font Style: font style.

Font Size: font size.

Line Spacing: line spacing.

Rich Text: rich text.

Alignment: Alignment.

Align By Geometry: Use the glyph collection shape range for horizontal alignment instead of glyph metrics. Here is the alignment algorithm is different, does not affect

Horizontal Overflow: How to deal with text that is too wide to fit within the rectangle

​ Wrap: Wrap mode, automatic line break.

​ Overflow: overflow mode: the font can overflow the rectangular box.

Vertical Overflow：

​ Truncate: Truncation mode, the font is always within the rectangular frame, and the excess part is clipped.

​ Overflow: overflow mode: the font can overflow the rectangular box.

Best fit: Best fit, regardless of the font size setting, always fully display the content in the rectangular box, and automatically adjust the font size.

​ MinSize: Minimum font size.

​ MaxSize: Maximum font size.

RawImage of the three basic controls of UGUI

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-MVN7peb8-1623203782742)(img\image-20210602110508592.png)]

parameter:

RawImage is the original image component, which is the key component used to display any texture in UGUI. The difference between it and Image is: generally RawImage is used to display large images (background images, images that do not need to be entered into the atlas, images downloaded from the Internet, etc. ).

Texture: image file.

UVRect: The offset and size of the image within the UI rectangle. After changing them, the effect is similar to the Tiled mode in Image.

Button of UGUI combined control

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-mUkeLnrE-1623203782743)(img\image-20210602152504018.png)]

Button is a button component, which is a key component in UGUI for dealing with player button-related interactions. The default created Button is composed of 2 objects. The parent object Button component is attached to the object and an Image component is mounted as the button background image at the same time. The child object is A button text (optional).

parameter:

Interactable: Whether this button accepts input.

Transition: Transition effect, divided into color transition Color Tint, sprite picture transition Sprite Swap, animation transition Animation.

Among them, there is a TargetGraphic attribute in the color transition, which indicates the picture that currently responds to the transition effect, and the Image component in the Button will be bound by default.

Color transition is to give a color to the button in different states:

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-wTGeSBHp-1623203782744)(img\image-20210602165324656.png)]

Sprite image transition is to give a button a sprite image in different states:

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-wxKRTxel-1623203782745)(img\image-20210602165336224.png)]

Animation transition is to animate buttons in different states:

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-S5yrraDZ-1623203782747)(img\image-20210602165416416.png)]

Auto Generate Animation: Automatically generate the button animation state machine. After pressing, Unity will let us save an animation state machine file. This state machine has already been configured, and we only need to associate related animations.

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-HrND7Aou-1623203782748)(img\image-20210602165556322.png)]

Color Multiplier: Color multiplication coefficient.

Fade Duration: Transition time.

Navigation: Navigation. The main function of UI navigation is to control the UI we want to select when we press the arrow keys or wasd. Before using the navigation, it is recommended to set the First selected property in the EventSystem to use together. This effect is quite common in console games.

​ Everything: Use all navigation.

​ Horizontal: Horizontal navigation, when you press ad or the left and right arrow keys, it will automatically jump to the surrounding UI components.

​ Vertical: Vertical navigation. When pressing ws or the up and down arrow keys, it will automatically jump to the surrounding UI components.

​ Automatic: Automatic navigation, including horizontal navigation and vertical navigation.

​ Explicit: Custom navigation.

Visualize: Navigation visualization.

UI events:

OnClick(); no parameters and no return value, called once when the user presses the button and releases the mouse within the range of the button

Toggle of UGUI combined control

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-Cyw37bv3-1623203782749)(img\image-20210603164615337.png)]

Toggle is a key control in UGUI for making single-selection boxes and multi-selection boxes. The default is a multi-selection box. If you want to make a single-selection box, we need to use it with the ToggleGroup component.

Hierarchy:

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-ZckGm1g5-1623203782749)(img\image-20210603165234426.png)]

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-lOMkCXEU-1623203782750)(img\image-20210603165356980.png)]

parameter:

The parameters repeated with Button will not be introduced again.

IsOn: Whether the current Toggle is checked.

Toggle Transition: The transition effect between Toggle selected and unselected.

Graphic: The picture that appears when the link is selected.

Group: associated with ToggleGroup, if multiple Toggles are associated with one ToggleGroup, then these Toggles become single-selection.

UI events:

OnValueChanged(Boolean); The bool parameter has no return value, and it is called once when the value of Toggle changes.

ToggleGroup

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-I6lSp7Qp-1623203782752)(img\image-20210603171716993.png)]

parameter:

Allow Switch Off: Whether to allow one of the radio group can not be selected.

InputField of UGUI combined control

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-qvxJ6Lzu-1623203782754)(img\image-20210603172053851.png)]

Hierarchy:

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-HSKlZs49-1623203782755)(img\image-20210603172141977.png)]

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-wzV25eF9-1623203782757)(img\image-20210603172435949.png)]

parameter:

Text Component: A text component used to associate and display input content.

Text: Enter the content of the box.

Character Limit: The maximum character length allowed to be entered. 0 means no maximum limit.

Content Type: Input character type restriction.

• Standard: standard mode, you can enter any character.
• Autocorrected: Autocorrect mode, which tracks unknown words and suggests suitable replacement candidates to the user.
• Integer Number: Integer mode, users can only enter integers.
• Decimal Number: Decimal number mode.
• Alphanumeric: Alphanumeric mode, only letters and numbers can be entered.
• Name: name mode, automatically capitalize the first letter of each word.
• Email Address: Email address mode, allowing to enter at most one grandfather and number string composed of @ symbol.
• Password: Password mode, use "*" to hide the input characters and allow symbols to be input.
• Pin: Pin mode, use "*" to hide the input characters, and only allow input of integers.
• Custom: Custom mode.

Line Type: line type

• Single Line: single line mode
• Multi Line Submit: Automatic branching in multi-line mode. Carriage return branches cannot be used.
• Multi Line Newline: Multi-line mode, you can use carriage return to branch.

PlaceHolder: Used to associate text controls that display initial content.

Caret Blink Rate: Cursor blinking frequency.

Caret Width: Cursor width.

Custom Caret Color: Customize the cursor color.

Selection Color: The background color of batch selection.

Hide Mobile Input: Hide the keyboard on the mobile device screen, only for IOS.

Read Only: Read only, cannot be modified.

UI events:

OnValueChanged(string); The string parameter has no return value, and it is called once when the Text content of the InputField box changes.

OnEndEdit(string); The string parameter has no return value and is called once when the InputField is out of focus.

Slider of UGUI combined control

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-Wc6QdTqM-1623203782758)(img\image-20210603224148680.png)]

Hierarchy:

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-wI1mhPdb-1623203782759)(img\image-20210603224757644.png)]

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-oB6GmRZf-1623203782760)(img\image-20210603224954331.png)]

parameter:

Fill Rect: A progress bar component for filling.

Handle Rect: A slider component for sliding.

Direction: Slide direction, when changing the direction, the orientation of the component will also change. This change is not made by changing the rotation.

• Left To Right: From left to right.
• Right To Left: from right to left
• Bottom To top: from bottom to top
• Top To Bottom: From top to bottom.

Min Value: The minimum value of the Slider.

Max Value: The maximum value of the Slider.

whole Numbers: Whether to constrain changes to whole numbers.

Value: The current value of the Slider.

UI events:

OnValueChanged(Single); The float parameter has no return value and is called once when the Value of the Slider component changes.

ScrollBar of UGUI combined control

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-lcupi6uJ-1623203782761)(img\image-20210603230420183.png)]

The ScrollBar component is usually not used alone, but in conjunction with ScrollView.

Hierarchy:

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-Oiow1MNs-1623203782762)(img\image-20210603230547272.png)]

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-L1JScNw0-1623203782763)(img\image-20210603230811637.png)]

parameter:

Handle Rect: A slider component for sliding.

Direction: Slide direction, when changing the direction, the orientation of the component will also change. This change is not made by changing the rotation.

• Left To Right: From left to right.
• Right To Left: From right to left.
• Bottom To top: from bottom to top.
• Top To Bottom: From top to bottom.

Value: the current value of ScrollBar

Size: the proportion of the slider in the ScrollBar

Number Of Steps: Breaks down the movement of the slider into steps.

UI events:

OnValueChanged(Single); The float parameter has no return value and is called once when the Value of the Slider component changes.

ScrollView of UGUI combined control

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-886yoEE0-1623203782765)(img\image-20210604090906831.png)]

ScrollView is composed of ScrollRect and ScrollBar, which is a key component in UGUI for handling scroll view-related interactions.

Hierarchy:

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-Wl2aocaw-1623203782765)(img\image-20210604091812428.png)]

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-l8Xcp1Qo-1623203782766)(img\image-20210604091935638.png)]

Two of the scroll bars are optional and can be deleted or used.

parameter:

Content: The parent object that controls the content displayed by the scroll view, how big it is, and how far the scroll view can be dragged.

Horizontal: Enables horizontal scrolling.

Vertical: Enables vertical scrolling.

Movement Type: The movement type of the scroll view element, as long as it controls the feedback effect when the player drags.

• Unrestricted: Unrestricted, drag freely, generally not used.
• Elastic: The rebound effect, when rolling off the edge, it will bounce back to the boundary.
  • Elasticity: rebound coefficient, the larger the value, the slower the rebound.
• Clamped: Clamped effect, always limited in range, no rebound effect.

Inertia: Moving inertia, if it is turned on, we will simulate a certain inertia effect after dragging and releasing the mouse.

• Deceleration Rate: Deceleration rate, 0~1, 0 means no inertia, 1 means will not stop.

Scroll Sensitivity: The sensitivity of the scroll wheel or touchpad.

Viewport: The associated scroll view content viewport object. The viewport object uses a mask to ensure that the content beyond the Viewport is invisible. When we want to adjust the size of the viewport, we often directly adjust the size of the ScrollView.

Horizontal Scrollbar: The associated horizontal scrollbar.

Visibility: mode to hide the scrollbar

• Permanent: Scroll bars are always displayed.
• Auto Hide: Automatically hides the scrollbar, but does not expand the scope of the Viewport, which will cause the Viewport to have boundaries when the scrollbar is hidden.
• Auto Hide And Expand Viewport: Automatically hide scroll bars and automatically expand Viewport.

Spacing: The space between the scroll bar and the viewport.

Vertical Scrollbar: The associated vertical scrollbar, the parameters are the same as the horizontal scrollbar.

UI events:

OnValueChanged(Vector2); The Vector2 parameter has no return value and is called once every time the user scrolls the view.

DropDown of UGUI combined control

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-thc0f2aO-1623203782768)(img\image-20210604094412435.png)]

DropDown is a drop-down list, which is a key component in UGUI for handling interactions related to drop-down lists.

Hierarchy:

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-FnTEJ25J-1623203782768)(img\image-20210604094812411.png)]

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-oDeOupvJ-1623203782770)(img\image-20210604094958001.png)]

parameter:

Template: Associated drop-down list object.

Caption Text: The text component associated with the current selection. Note that the components are associated here, and UGUI uses these components to load the text and pictures in Options.

Caption Image: The image component associated with the current selection. Note that components are associated here.

Item Text: The text component associated with the current drop-down list. Note that components are associated here.

Item Image: The image component associated with the current drop-down list. Note that components are associated here.

Value: The index value of the current option.

Alpha Fade Speed: The fade-in and fade-out speed of the drop-down list window.

Options: A list of options that exist.

UI events:

OnValueChanged(Int32); The int32 parameter has no return value, and it is called once when the player selects an option again, causing the index value to change.

Production of UGUI Atlas

The purpose of atlas production is to reduce DrawCall. DrawCall is the command that the CPU notifies the GPU to perform a rendering. If there are too many DrawCalls, the game may freeze. We merge the small images into a large image by drawing an atlas, and improve performance by reducing DrawCall.

To use UGUI sprite packaging, we need to set Unity to allow us to package, the default is off.

Find the Sprite Packer item through this path: Edit -> ProjectSetting -> Editor

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-SvHbdyc4-1623203782771)(img\image-20210604110927496.png)]

Disabled: The default setting, the atlas will not be packaged.

Enabled For builds (Legacy Sprite Packer): Unity only packs the atlas when building, and does not pack the atlas in edit mode.

Always Enabled (Legacy Sprite Packer): Unity packs the atlas when building, and packs the atlas before running in edit mode.

<>Legacy Sprite Packer: Compared with the following two modes, the traditional packing mode has a parameter Padding Power that sets the distance between you and the sprite. This spacing will be applied between sprites, sprites and the edge of the atlas between. The numbers here represent 2 to the nth power. The new option automatically calculates the spacing.

Enabled For Build: Unity only packages the atlas when building, and does not package the atlas in edit mode.

Always Enabled: Unity packages the atlas when building, and packages the atlas before running in edit mode.

Old version atlas production:

First we choose the option with Legacy Sprite Packer, for example, we choose Always Enabled (Legacy Sprite Packer). At this time, when we go back to the picture editing page, we will find that there is an additional Packing tag box.

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-dIYg4IbX-1623203782772)(img\image-20210604155435049.png)]

This is a very important parameter of the old version of packaging. The old version of the packager will package sprites with the same tag together.

Let's take a look at the old packer: Window -> 2D -> Sprite packer

It's empty here.

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-ndnhsd0I-1623203782773)(img\image-20210604155849715.png)]

At this time, we can go back and add tags to our sprite images. We choose four images and fill in the tag as "test".

Go back to the packer and select pack in the upper left corner to see the packing result.

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-2gexA85T-1623203782774)(img\image-20210604155922969.png)]

Production of the new version of the atlas:

The new version of packaging no longer requires a packager. We can directly create a sprite atlas in the project panel, and add the images we want to package to the list. Not very convenient when looking for pictures.

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-lKjiZwXb-1623203782776)(img\image-20210604160153603.png)]

UGUI advanced UGUI event monitoring interface

Combination controls provide their own basic event monitoring, but if we want to implement more complex UI events or we want basic controls to also have event monitoring, we need to use the event monitoring interface provided by UGUI.

Common Event Interface

interface name	interface method	interface description
IPointerEnterHandler	OnPointerEnter	Called when the mouse enters the object
IPointerExitHandler	OnPointerExit	Called when the mouse exits the object
IPointerDownHandler	OnPointerDown	Called when the pointer is pressed on the object
IPointerUpHandler	OnPointerUp	Called when the mouse is lifted over an object
IPointerClickHandler	OnPointerClick	Called when the mouse is clicked on the object
IBeginDragHandler	UnBeginDrag	Called on the object being dragged when the drag begins
IDragHandler	OnDrag	Called on the object being dragged while dragging is in progress
IEndDragHandler	OnEndDrag	Called on the object being dragged when the drag is complete

uncommon event interface

interface name	interface method	interface description
IInitializePotentialDragHandler	OnInitializePotentialDrag	Called when the drag target is found, it can be used to initialize the value
DropHandler	OnDrop	Called on the drag target object
IScrollHandler	OnScroll	Called when the mouse wheel is scrolled
IUpdatSelectedHandler	OnUpdateSelected	Called on the selected object each time it is ticked
ISelectHandler	OnSelect	Called when an object becomes selected
IDeselectHandler	OnDeselect	Called when the selected object is deselected
IMoveHandler	OnMove	Navigation related, called when a navigation movement occurs
ISubmitHandler	OnSubmit	Navigation related, called when Submit is pressed
ICancelHandler	OnCancel	Navigation related, called when the Cancel button is pressed

We write scripts to implement these interfaces and hang the scripts on the objects we want to respond to.

UGUI Advanced EventTrigger

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-bbocKSP9-1623203782778)(img\image-20210606162708914.png)]

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-6b5iviqM-1623203782779)(img\image-20210606162737672.png)]

EventTrigger is the management class of the UI event interface. With EventTrigger, we can save a lot of things.

To use EventTrigger, first we need to mount the EventTrigger component on the object we want to respond to the event.

After we mount the EventTrigger component for this object, we no longer need to implement any event interfaces for the event response scripts to be mounted on this object, all event interfaces have been integrated into EventTrigger. We only need to get the EventTrigger mounted by the object.

After obtaining the EventTrigger mounted on the object, the standard way to register an event using the EventTrigger is as follows:

//获得对象挂载的EventTrigger组件
_myEventTrigger = GetComponent<EventTrigger>();
//新建一个Entry类型的对象，EventTrigger中的triggers列表都是这个类型的，所以我们单独创建一个，这里不需要死记硬背，triggers需要什么我们就创建什么。
EventTrigger.Entry entry = new EventTrigger.Entry();
//为entry对象的eventID赋值，此处为枚举类型，里面包含所有的UGUI事件，名字看一眼就知道是什么接口的。
entry.eventID = EventTriggerType.PointerDown;
//callback回调函数添加
entry.callback.AddListener(OnPointerDown);
//最后我们将entry添加进triggers列表
_myEventTrigger.triggers.Add(entry);

UGUI advanced screen coordinates to UI relative coordinates

Key class: RectTransformUtility

The RectTransformUtility public class is an auxiliary class of RectTransform. It is mainly used for some coordinate conversion and other operations.

Key method: RectTransformUtility.ScreenPointToLocalPointInRectangle();

parameter:

1. relative to the parent object.
2. screen point.
3. Camera responsible for image detection.
4. final point.

Often used in conjunction with drag and drop events.

UGUI advanced Mask mask

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-o5kG1uNO-1623203782780)(img\image-20210606164517425.png)]

Mask mask, a component Mask will be used, this component will determine the displayable range according to the visible pixel range of the image of the mounted object, and at the same time mask the rest. Applies to its children. It is often used for character avatar cutting and mini-map making.

parameter:

Show Mask Graphic: Whether to display the mask image of the parent object.

UGUI advanced models and particles are displayed before the UI

As we said before, if we want our model and particle effects to be displayed in front of the UI, we can change the rendering mode of the Canvas to the camera mode, and use a special UI camera to render the UI, and this camera also undertakes the display on the The rendering work of the model in front of the UI. For the particle effect under this method, we can set the rendering layer of the particle effect to ensure that the particle effect is always displayed in front of the UI:

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-NXKubX6p-1623203782781)(img\image-20210606165234400.png)]

For game objects, we can make the game objects render before the UI by adjusting the plane distance in camera mode.

But in addition to this method if we only want to render a game object, such as our character on the equipment panel, we have another solution: use Render Texture.

First, let's create a new Render Texture:

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-LZi7PUmV-1623203782783)(img\image-20210606165758978.png)]

Create a new camera for our scene dedicated to rendering models in the UI:

For this reason, it is recommended to add an additional Model layer, so that this camera only renders the game objects of this layer.

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-F2c4k9ha-1623203782784)(img\image-20210606170415320.png)]

In this way, when we place the object under the Model camera, we can output the picture in Render Texture.

Finally, since we output the camera's picture to a texture, we will not see the change of adding an additional camera to our current game picture. We need to finally attach this texture to the Texture and render it from the UI camera. If there is a brush-like effect when we change the position of the cube, we change the Clear Flags of the Model camera to monochrome mode or skybox mode.

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-4RH19wIP-1623203782785)(img\image-20210606171259783.png)]

The disadvantage of this mode is that it may require one camera and one object to render, which is a waste of performance. So when more than one item needs to be displayed in front of the UI, this method is not recommended.

UGUI advanced special-shaped button

The application of odd-shaped buttons is not common, but it may be used. Shaped buttons mainly refer to non-rectangular images with irregular contours as buttons. If we want it to respond accurately, we need to make them into shaped buttons.

There are two options for making special-shaped buttons:

1. Manual splicing, by adding sub-objects. Add a transparent sub-object image for the special-shaped button we want to handle, and use event delivery to achieve it.
2. Sets the transparency threshold.

To set the threshold, we need to set the image as readable and writable:

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-5ihGNbNG-1623203782787)(img\image-20210606175217499.png)]

Write the following code:

using UnityEngine;
using UnityEngine.UI;

namespace UGUITest.button
{
    
    
    public class SpecialShapedButton : MonoBehaviour
    {
    
    
        private UnityEngine.UI.Image _buttonImage;
        private Button _button;
        private void Awake()
        {
    
    
            _buttonImage = GetComponent<UnityEngine.UI.Image>();
            _button = GetComponent<Button>();
            //该参数的含义是：指定一个像素必须具有的最小alpha值，以便能够认为射线命中了图片，也就是说低于此alpha值的区域不会被射线检测。
            _buttonImage.alphaHitTestMinimumThreshold = 0.1f;
        }
        
    }
}

Mount this script on the special-shaped button. When the game is running, we will find that there is no feedback when clicking on the transparent part of the picture.

UGUI Advanced Automatic Layout Components

Although UGUI's RectTransform is convenient enough to help us achieve quick layout, but if we want to grid layout a series of the same pictures, UGUI's RectTransform is not convenient enough, so UGUI provides us with automatic layout components.

As long as we add automatic layout components to a parent class, the subclass UI of this parent class can implement automatic layout. So how is the automatic layout of UGUI realized? Here we are going to briefly talk about layout attributes.

Auto Layout Properties

First of all, let's take a look at how to view the layout properties of a UI control. Select a UI control and select Layout Properties under the Inspector panel as shown in the figure:

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-eyYuMKf7-1623203782788)(img\image-20210606214546616.png)]

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-H9pSlPJU-1623203782789)(img\image-20210606214736842.png)]

Layout elements to participate in automatic layout must contain layout attributes. The layout attributes mainly include the following:

Minmum width: The minimum width this layout element should have.

Minmum height: The minimum height this layout element should have.

Preferred width: The width this layout element should have before allocating additional free space.

Preferred height: The height this layout element should have before allocating additional free space.

Flexible width: The relative amount of additional available width this layout element should fill relative to its siblings. The range is 0~1

Flexible height: The relative amount of additional available height this layout element should fill relative to its siblings. The range is 0~1

These values ​​are automatically calculated by Unity if we don't set them manually. The existence of these attributes enables our UGUI to achieve automatic layout.

Manually set layout properties:

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-DOTzaWU7-1623203782790)(img\image-20210606232627162.png)]

Layout Priority: layout priority.

Auto Layout Components

Horizontal/Vertical Layout Components

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-lW2rr3kG-1623203782792)(img\image-20210606225905087.png)]

Horizontal and vertical auto layout components will place children side by side or vertically together.

Here we introduce the Horizontal Layout Group, the parameters of the vertical automatic layout component are the same as those of the horizontal automatic layout component.

parameter

Padding: The offset position of the left and right upper and lower edges.

Spacing: The spacing between sub-objects.

ChildAlignment: The nine-square grid alignment of child objects.

Control Child Size: Whether to control the width and height of the child object. When we use this item, the width and height of our child objects will be controlled by the layout properties and automatically adapted. The largest is Preferred and the smallest is Minmum.

Use Child Scale: Whether to consider the scaling of sub-objects, check this option, and the scaling of sub-objects will be considered when calculating the position.

Child Force Expand: Whether to force the child object to expand to fill the extra available space, check this, UGUI will divide the range of our current parent object equally to all child objects, if there is enough space, there will be a gap, if the space is not enough, it will have little effect .

Grid Layout Components

[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-yrpApheG-1623203782793)(img\image-20210606231945147.png)]

parameter

Padding: The offset position of the left and right upper and lower edges.

Cell Size: The size of the sub-object, note that in the grid automatic layout, we cannot control the size of the sub-object individually.

Spacing: The spacing between sub-objects.

Start Corner: At what position of the parent object to start the layout.

Start Axis: The axis to fill first. This item determines whether our grid layout is horizontal or vertical.

ChildAlignment: The nine-square grid alignment of child objects.

Constraint: layout constraints

• Fiexible: Flexible mode, in this mode, the line will be automatically wrapped according to the reserved width and height of the parent object.
• Fixed Column Count: Fixed column count. In this mode, it will wrap according to the set number of columns.
• Fixed Row Count: Fixed row count. In this mode, the columns will be changed according to the set number of rows.

content adapter

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-8jIriKkb-1623203782795)(img\image-20210606233347919.png)]

The content adapter component is divided into two parameters: Horizontal Fit and Vertical Fit, and the options are the same. Here we introduce the same.

parameter

Unconstrained: Does not stretch according to layout elements.

Min Size: Stretch according to the minimum width and height of the layout element.

Preferred Size: Stretch according to the preferred width and height of the layout elements.

aspect ratio adapter

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-mXbuVvbU-1623203782796)(img\image-20210606233733410.png)]

Let the layout elements adjust their size according to a certain ratio, so that the layout elements are adapted within the parent object according to the size of the parent object.

parameter

Aspect Mode: adaptation mode

• None: Do not fit the rectangle to the aspect ratio.
• Width Controls Height: Automatically adjust the height according to the width.
• Height Controls Width: Automatically adjust the width according to the height.
• Fit In Parent: Automatically adjust the width, height, position, and anchor point, adapt the rectangle to the rectangle of the parent item, while maintaining the aspect ratio, and black borders will appear. The effect of this item is to always fully display the child object.
• Envelope Parent: Automatically adjust the width, height, position, and anchor point so that the rectangle covers the entire area of ​​the parent item while maintaining the aspect ratio, and cropping will occur. The effect of this item is to always ensure that the parent object is completely filled.

Aspect Ratio: aspect ratio, the ratio of width divided by height.

UGUI Advanced CanvasGroup

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-1EFKr4ul-1623203782797)(img\image-20210606234454214.png)]

Adding this component to the panel parent allows you to control some overall properties. This item can be added not only to Canvas, but also to UI controls.

parameter

Alpha: Overall transparency control.

Interactable: Disable settings for overall startup.

Blocks Raycasts: Overall ray detection settings.

Ignore Parent Groups: Whether to ignore the role of the parent CanvasGroup.