UI components: provide user interaction, information display, user navigation and other functions
1. Button: used to respond to the user's click event
1.Interactable (interactive): This attribute controls whether the button can interact with the user, and if disabled, the button cannot be clicked. This property can be dynamically modified by script.
2.Transition (transition effect): This attribute defines the transition effect when the button state is switched. Common transition effects include
(1) Color Tint (color tinting):
Target Graphic (target graphics): This attribute specifies the rendering graphics of the button, usually an Image component, which can set the background image or other display effects of the button.
Normal Color: The default color of the button
Highlighted Color: the color when the mouse is covered
Pressed Color: the color after the mouse is pressed
Selected Color: the color after the mouse click
Disabled Color: The color when the button is not interactive, that is, uncheck Interactable
Color Multiplier: Color multiplier, increasing the value can highlight the color effect
Fade Duration: Increasing the value can realize the fade in and fade out of different state colors of the button, indicating the time interval of color switching
(2) Sprite Swap (picture replacement): All pictures need to be sprites (picture Texture Type property is: Sprite (2D and UI))
Target Graphic (target graphics): This attribute specifies the rendering graphics of the button, usually an Image component, which can set the background image or other display effects of the button. The button is displayed with this graphic by default
Highlighted Sprite: The picture when the mouse covers it
Pressed Sprite: the picture after the mouse is pressed
Selected Sprite: the picture after the mouse click
Disabled Sprite: The picture when the button is not interactive, that is, uncheck Interactable
(3) Animation (Animation): You need to click Auto Generate Animation to create the animation controller Animator, and then see the animation states of Normal, Highlighted, Pressed, Selected, Disabled, etc. in the Animator window. You only need to make animations for different states (selected button press Ctrl+6 to pop up the animation window)
Normal Color: The animation displayed by default for the button
Highlighted Color: animation when mouse overlay
Pressed Color: animation after the mouse is pressed
Selected Color: Animation after mouse click
Disabled Color: The animation when the button is not interactive, that is, uncheck Interactable
3.Navigation (Navigation): This attribute is used to define the behavior of the button when navigating through the keyboard or gamepad. You can set the navigation target of the button in different directions to realize the focus transfer during keyboard/gamepad navigation.
4.Visualize: After opening, the focus sequence between each UI control will be displayed in the Scene
5. On Click (click event): Through this property, the function or method that needs to be executed can be bound to the click event of the button. When the button is clicked, the bound function will be called.
reference
Detailed explanation of the use of the Button button in the Unity technical manual Develop Paper
2. Image: used to display 2D images or Sprites (the displayed pictures must be sprites)
1. Source Image (Spirit): Used to specify the Sprite to be displayed on the Image. You can choose a Sprite from the project resources, or convert the Texture2D to a Sprite and assign it to the Sprite property.
2.Color (color): By setting the Color property, you can change the color of the Image. This can be used to change the appearance of the image, such as adjusting transparency, modifying color saturation, etc. (It will be invalid after setting Material).
3.Material (material): This is an optional attribute that allows you to specify a custom material for the Image. Materials can achieve some special effects, such as adding shader effects, transforming appearance, and so on.
4.Raycast Target (ray detection target): By enabling the Raycast Target property, you can control whether the image receives mouse or touch ray detection. If this property is disabled, the image will not be the target of interactions and mouse or touch events will pass through the image. (No for LineRenderer and camera rays)
5.RayCast Padding: A margin setting to prevent the ray from hitting the Image component in the blank area (transparent area) near the edge of the Image
6. Maskable: When the Maskable property is set to true, the Image component will be affected by the mask, which will limit the display range of the image so that it is only visible within the mask area. This is usually used to achieve clipping or masking effects (note: only valid when the Mask component is used)
7.Image Type (type): used to determine how to render the image. Common types include: Simple (simple), Sliced (nine-square grid), Tiled (tiling), Filled (filling), etc. Each type has different rendering methods and functions. (This attribute will only appear when the Source Image is set)
(1) Simple (simple mode)
Use Sprite Mesh: Controls whether to use a sprite mesh when rendering an image. The sprite mesh allows the image to be distorted or 9-slice scaled to accommodate areas of different sizes
Preserve Aspect: Controls whether the image retains its original aspect ratio. When this property is enabled, the image will be automatically resized according to the aspect ratio to ensure that the image is not stretched or compressed
Set Native Size: Used to set the size of the Image component to match the native size of its associated image material. After clicking the Set Native Size button, the Image will automatically resize to fit the actual size of the image, ignoring any layout components or parent container constraints
(2) Sliced (slicing mode)
Pixels Per Unit Multiplier (pixel density multiple): It can highlight the pixel density of the image, thus affecting the drawing and display effect of the image
(3) Tiled (tile mode)
Pixels Per Unit Multiplier：同Sliced
(4) Filled (fill mode)
Fill Method: You can choose different filling methods, such as horizontal, vertical, radial, etc. The padding method determines how the image is filled in the Image area.
Fill Origin: It is used to specify the starting point of the filling effect, which can determine whether the filling effect starts from the bottom, top, left, right or center
Fill Amount: Control the amount of filling, the range of filling amount is between 0 and 1
Clockwise (a property only available for radial filling): Control the forward and reverse direction of radial filling, check it, fill it clockwise, uncheck it, fill it counterclockwise
3. RawImage: directly display the pixel data of the original image. 2D texture (Texture2D) or RenderTexture can be displayed on the UI interface. Directly display pictures imported from resources, and can also display dynamic textures generated at runtime
Note: For other attributes, please refer to the Image component
1. Texture (texture): You can directly use the original picture (png, jpg, etc.), or you can use the RenderTexture created by right-clicking in the Project, and assign the RenderTexture to the Target Texture property of the Camera to realize the observation and rendering of the Camera Scene information is displayed separately on RawImage
2. UV Rect: Used to specify the position and size of the image in the texture (the following is the effect achieved after modifying the UV Rect parameters)
reference
4. Text: Static or dynamic text content can be displayed in the UI interface
1. Text: Text content for display. Text can be entered directly in the Inspector panel, or dynamically modified through scripts.
2.Character
(1) Font: Used to change the font of the text. You can choose Unity's built-in fonts, or you can import custom fonts. By choosing different fonts, you can change the style of the text.
(2) Font Style: used to change the style of the text, such as Bold (bold font), ltalic (tilted font), Bold And ltalic (bold and tilted font)
(3) Font Size: The font size of the text. You can change the size of the text by adjusting this property.
(4) Line Spacing: Increase or decrease the spacing between lines of text. By adjusting this property, the line spacing can be changed to suit different layout requirements.
(5) Rich Text: Indicates whether to enable rich text tags. If this attribute is checked, you can use rich text tags (such as color, font style, link, etc.) in the text to achieve advanced text rendering effects.
Reference: https://blog.csdn.net/falsedewuxin/article/details/129904042?spm=1001.2014.3001.5501
3.Paragraph
(1) Alignment: text alignment. You can set the horizontal alignment (left, center, right) and vertical alignment (top, middle, bottom) of the text
(2) Align By Geometry: Make the alignment of text in the text box more precise and accurate (that is, more precise alignment in the form of mathematical geometry)
(3) Horizontal Overflow: Horizontal overflow processing. You can choose to adapt to different needs, such as word wrapping, truncation, etc. (Wrap means automatic line break after horizontal overflow, Overflow means direct horizontal overflow, and text will also be displayed)
(4) Vertical Overflow: vertical overflow processing. You can choose to adapt to different needs, such as word wrapping, truncation, etc. (Truncate means truncated after overflowing in the vertical direction, Overflow means directly overflowing in the vertical direction, and the text will also be displayed)
(5) Best Fit: Indicates whether to enable best fit. If this property is checked, the text content will automatically adjust the font size according to the size of the Text component to fit the given container size.
Note: Other attributes can refer to Image
5. Slider: Used to set a value within a range, the user can adjust the value by dragging. For example, to make a progress bar
1. For other attributes, please refer to the Button component
2.Fill Rect: The attribute defines the fill area of the current value on the slider. By setting the Fill Rect property, you can control the style, position, and size of the filled area. You can specify a RectTransform object that defines the location and size of the filled area. You can also use pictures or materials to render the filled area, and control the style of the filled area by setting the stretching method of the picture or the texture coordinates of the material.
3.Handle Rect: The attribute defines the rectangular area of the slider. A slider is an interactive element that the user uses to drag the slider and change the value. Similar to Fill Rect, you can specify the position and size of the slider by setting the Handle Rect property. You can also use pictures or materials to render the slider, and control the style of the slider by setting the stretching method of the picture or the texture coordinates of the material
6. Input Field component: It is an editable text box that allows users to enter and edit text in the game
1. Interactable, Transition, and Navigation attributes can refer to the Button component
2. Text Component: A Text component that needs to be assigned an object (so that the following attributes can be edited). The content entered from the input box will appear in the Text property of the Text component, and also in the Text property of the Input Field component itself.
3. Text: This is the text content displayed in the Input Field. This property can be accessed and modified through code, or by setting the initial text in the editor through the Inspector window. (Inputting content in the non-running state will prompt an error report. You can ignore the problem of error reporting. After running Unity, the Input Field will still display the input content in the non-running state, and the input content in the running state will also be displayed here)
4 .Character Limit: Limit the number of characters entered by the user. It can be set to a non-zero positive integer to limit the length of text entered by the user. (A value of 0 indicates an unlimited number of characters)
5.Content Type: Determine the type of text that the Input Field can accept. For example, you can limit its input to integers, decimals, passwords, etc. Different types have different validation and input rules.
(1) Standard: Indicates that any form of character can be input
(2) Autocorrected: Indicates that it will automatically correct the input word for you
Note: When the Content Type property is set to Autocorrected, the automatic correction function is disabled by default. This is because Unity does not support autocorrection in Autocorrected mode by default. If you want to enable autocorrection in Autocorrected mode, you need to write a custom script to process the input text, such as listening to the Input Field through the OnValueChanged event. The text of the changes, so write your own autocorrection logic in the event callback
(3) lnteger Number: Indicates that only integers can be entered
(4) Decimal Number: Indicates that only integers and decimals can be entered
(5) Alphanumeric: Indicates that only letters and numbers can be entered
(6) Name: the first name of each word will be automatically One letter is capitalized, you can enter letters and Chinese characters, but you cannot enter numbers and special characters (you can avoid the capitalization rules by continuing to enter the non-first letter of the word after deleting the capital letters through Backspace and Delete) (7) Email Address
: Numbers, letters and special characters can be entered, but Chinese cannot be entered
(8) Password: Numbers, letters, Chinese and special characters can be entered, but all input content will be displayed with *
(9) Pin: only numbers can be entered, and all It is displayed with *
(10) Custom: You can customize the input rules. It will provide more Input Type (input type), Keyboard Type (the virtual keyboard type that pops up on the mobile device when specifying the input content), and Character Validation (character verification) to implement the input rules you want to define (10-2
) Keyboard Type
Default: Default keyboard, suitable for general text input.
ASCII Capable: A keyboard that accepts only ASCII characters, excluding special characters and symbols.
Numbers and Punctuation: A keyboard that includes numbers and punctuation.
URL: Suitable for keyboards that include common URL suffixes such as .com when entering URLs.
Number Pad: A numeric keypad that contains only numbers and basic arithmetic symbols.
Phone Pad: A phone keypad that contains numeric keys and phone-related symbols.
Name Phone Pad: A keypad suitable for entering names and phone numbers, consisting of alphanumeric keys.
Email Address: Keyboard for entering email addresses.
6.Line Type: Determine how the text is arranged. You can choose Single Line or Multi Line. When the input box needs to be too large and the font is too small, multiple lines can be used to display the input content
7. Placeholder: The placeholder text or picture displayed when the Input Field does not get the focus and there is no input content. (You can assign an object's Image component or Text)
8. Caret Blink Rate: Set the rate at which the cursor blinks.
9. Caret Width: Set the width of the cursor.
10.Custom Caret Color: After checking, you can customize the color of the cursor.
11.Selection Color: The bottom highlight color when the text is selected.
12.Hide Mobile Input: Properties for mobile devices. When set to true, the virtual keyboard will not pop up automatically when the Input Field is clicked on the mobile device.
13.Read Only: This attribute is used to specify whether the input box is read-only. If set to true, users will not be able to edit text in this input box.
14.Should Active On Select: When the user selects (focuses) the input box, this attribute specifies whether the input box automatically becomes active. When set to true, when the user clicks on the input box, the input box will automatically get the focus and be ready to receive text input. When set to false, the user needs to take an additional action (such as clicking a button) to make the input field active
15. OnValueChange (string): This is a Unity event that is triggered when the text content of the input box changes. You can set it through the Inspector window, or subscribe to listen to the event in the code to execute custom logic when the text changes. The parameter of the event callback function is the new text of the input box
16. OnEndEdit (string): This is also a Unity event, which is triggered after the user finishes editing and submits the text. It can be used to handle actions after the user completes input, such as pressing the Enter key or switching focus. Similar to OnValueChange, you can set it through the Inspector window or code, and write a callback function to handle the input end event. The parameter of the event callback function is the final text of the input box
7. Toggle component: used to create a control that can toggle the switch state, usually used to represent switch options, check boxes, etc.
1. Interactable, Transition, and Navigation properties can refer to the Button component
2.Is On (checked state): Indicates to display or hide the picture component (Image or RawImage) specified in the Graphic property below
3.Toggle Transition (transition effect): There are two A value of None and Fade, indicating whether there is a gradient effect in the process of displaying and hiding the specified picture component (Image or RawImage) in the Graphic property
4.Graphic (image component): an Image or RawImage component, used to display the Toggle is checked The picture that appears. It can be selected by dragging or dynamically set in the code.
5. Group: A Toggle Group component needs to be assigned, allowing multiple Toggles to be placed in the same group to achieve a mutually exclusive check effect, that is, only one Toggle can be selected at a time. It can also achieve the effect of multiple selection or none selection, the key is to see the property setting of Toggle Group
6. On Value Changed (check state change event): a UnityEvent, you can add a callback method, which is triggered when the check state of Toggle changes . The behavior of Toggle can be controlled by script.
Refer to
https://juejin.cn/post/7149164569221398536
8. Toggle Group component: used to control the single-selection effect, multi-selection effect, and none-selection effect of multiple Toggles
1.Allow Switch Off: Do not check, realize the single selection effect of multiple Toggles; check it, realize the effect of multiple selection or no selection
9. Mask component: used to limit the visible area of sub-objects. Clipping regions can be created in the UI, leaving only the content inside the clipping region visible, while the content outside the clipping region is obscured. Common application scenarios include creating circular avatars, borders or other irregularly shaped UI elements (usage form: add a Mask component to an Image object, and add an Image sub-object to this Image object)
1.Show Mask Graphic: Whether to display the masked graphics. When this property is checked, the shape of the mask will be displayed in the form of a graph, which is convenient for debugging and visualization in edit mode.
Refer to
https://blog.csdn.net/alianhome/article/details/131642327
10. Scroll Rect component: A component used to implement a scrollable UI layout. A large amount of content can be displayed in a limited area, and the invisible part can be viewed by scrolling.
1.Content: Set the scrollable or draggable content in the Scroll Rect, usually a panel element containing UI objects or components, such as Image, Text.
2.Horizontal: Set whether to allow horizontal dragging. This is to control whether the object in the Content property can be dragged left or right, not to control whether the horizontal scroll bar can scroll
3.Vertical: Set whether to allow vertical dragging. Control whether the object in the Content property can be dragged up and down, not control whether the vertical scroll bar can scroll,
4.Movement Type (movement type): Set the drag type of the object in the Content property on Horizontal and Vertical.
(1) Unrestricted (unrestricted): It can be dragged freely without boundary restrictions.
(2) Elastic: After dragging beyond the boundary, an elastic effect will be produced.
Elasticity: Adjust the value of Elasticity to make the "stretch bounce" effect appear when scrolling to the boundary, so that the content will automatically bounce back after a certain distance beyond the boundary. The larger the value, the slower the rebound.
(3) Clamped (limited): Drag will be limited by the boundary, the content will not exceed the boundary.
5. Inertia (inertia): When enabled, scrolling will have an inertial effect, as if a certain force is applied to the content, scrolling will automatically slow down to a stop.
6.Deceleration Rate: Control the deceleration rate of inertial scrolling
7.Scroll Sensitivity (scroll sensitivity): Control the sensitivity of scrolling. Larger values indicate faster scrolling, and smaller values indicate slower scrolling. (Not much effect)
8.Viewport: The rectangular area used to define the visible content of the Scroll Rect is used to display and crop the content of the Scroll Rect. Usually an object containing an Image component and a Mask component
9.Horizontal Scrollbar (horizontal scrollbar): A Scrollbar component needs to be set. If enabled, Unity will automatically create a horizontal scroll bar for the Scroll Rect component and display it on the right or below the Scroll Rect (depending on the scrolling direction) (1)
Visibility (visibility): This property determines how the horizontal scroll bar visible from time to time. It has three options:
Permanent: The horizontal scroll bar is always visible.
Auto Hide: The horizontal scroll bar is hidden when the content does not exceed the size of the Scroll Rect (Viewport).
Auto Hide And Expand Viewport: The horizontal scroll bar is displayed when the content exceeds the size of the Scroll Rect, and automatically adjusts the width of the viewport to fit the content.
(2) Spacing (spacing): This property determines the spacing between the horizontal scroll bar and the Scroll Rect (Viewport). You can use positive or negative numbers to adjust the size of the spacing. A positive number will increase the spacing, and a negative number will decrease the spacing
10.Vertical Scrollbar (vertical scrollbar): Set a Scrollbar component as a vertical scrollbar
(1) Visibility: Same as above
(2) Spacing: Same as above
11.OnValueChanged (Vector2): is a Event that fires when the scroll view's value changes. Specifically, when the content (Viewport) of the Scroll Rect component is scrolled horizontally or vertically, this event will be called.
Reference
https://blog.csdn.net/alianhome/article/details/131637403
11. ScrollBar component: It is usually used together with the Scroll Rect component to control the scroll position of the scroll view.
1. Interactable, Transition, and Navigation properties can refer to the Button component
2. Handle Rect (slider rectangle): This property determines the slider rectangle of the scroll bar, that is, the shape of the slider. A RectTransform component can be specified as the rectangular area of the slider for the user to drag the slider to change the value of the scroll bar. The position and size of the slider rectangle determines how the slider appears on the scrollbar.
3.Direction (direction): This attribute determines the direction of the scroll bar. You can choose Vertical or Horizontal.
4.Value (value): This attribute determines the current value of the scroll bar. It represents the offset of the slider's position relative to the start point of the scroll bar. 0 means the slider is at the leftmost or top (rightmost or bottom) of the scrollbar, 1 means the slider is at the rightmost or bottom (leftmost or top) of the scrollbar. This depends on the setting of the Direction property
5.Size (size): This property determines the size of the slider of the scroll bar. It represents the proportion of the slider in the total scrollbar length. For example, 0.5 means that the length of the slider is half the length of the scroll bar.
6.Number Of Steps (number of steps): This attribute determines the number of steps that the slider of the scroll bar slides. When the number of steps is set, the value of the scroll bar will be discretized into a series of fixed step values. For example, if the number of steps is set to 5, the value of the scroll bar (Value) will only be able to choose between 0, 0.25, 0.5, 0.75 and 1. This is very useful for scenarios that require precise control of the scroll position
7. OnValueChanged (Single): is an event that is triggered when the value (Value) of the scroll bar changes. You can add a responder function to handle value change events. The parameter of this event is a single-precision floating-point number, representing the current value of the scroll bar (Value).
12. Dropdown component: making a drop-down menu
1. Interactable, Transition, and Navigation properties can refer to the Button component
2.Template: Rect Transform component is required to represent the template area of the drop-down list
3.Caption Text: Text component is required to set the text of the currently selected option
4.Caption Image (title image ): This attribute determines the image display of the main button of the drop-down menu. You can specify an Image component as the header image to customize the button appearance of the drop-down menu. Through this attribute, you can add custom images such as background images, icons, arrows, etc. to the drop-down menu button (tried but useless)
5. Item Text (option text): This attribute is a Text component used to display the drop-down menu The text for each option. You can use this attribute to customize the text style of the option
6. Item Image (option image): This attribute is an Image component used to display the image of each option in the drop-down menu. You can assign a Sprite or Texture to this property to add an image to the option (tried but useless)
7.Value: This property determines the index of the currently selected item. Indexes start at 0, meaning the first option, and so on. You can use scripts to get or set this property to dynamically control the selected item of the drop-down menu
8. Alpha Fade Speed (transparency fade in and out speed): This property determines the speed of the transparency of the drop-down menu when it fades in and out. You can control the gradient effect speed of the drop-down menu by adjusting the value of this attribute
9. Options (option): This attribute is a list of strings used to define the options in the drop-down menu. Options can be added in the Unity editor, or dynamically via scripting
10.OnValueChange (Int32): It is an event that is triggered when the selected item of the drop-down menu changes. You can add a response function that takes an integer as a parameter to handle value change events. The parameter will be the index of the selected option, and you can write custom logic to respond to the value change as needed.
Dropdown - TextMeshPro component: Dropdown component is rendered using Unity's UGUI, while Dropdown - TextMeshPro uses TextMeshPro for text rendering. Dropdown - The TextMeshPro component is suitable for scenarios that require more advanced text rendering features, such as rich text, hyperlinks, word wrap, etc.
13. Effects: Make some modifications to other UI components
1. Outline component: used to draw outlines on the edges of objects to highlight objects
(1) Effect Color: Set the color of the contour line
(2) Effect Distance: Set the thickness of the left and right and upper and lower contour lines
(3) Use Graphic Alpha: Whether to associate the transparency of the UI element with the transparency of the contour line, that is, set the UI element When the opacity of is 0, the opacity of the outline will change accordingly
2.Position As UV1 component: An auxiliary component provided to solve the problem of UV overlap. The purpose of this component is to use the object's world coordinates to generate UV coordinates and store them in the UV1 channel for use in materials. It has no adjustable properties, just add it to the object's renderer component.
3.Shadow component: used to add shadow effects on 2D or UI elements. It can be added on any graphic element in Canvas.
(1) Effect Color: Set the color of the shadow
(2) Effect Distance: Determine the offset of the shadow and set the position of the shadow
(3) Use Graphic Alpha: Whether to associate the transparency of the UI element with the transparency of the shadow, that is, set the UI When the opacity of the element is 0, the opacity of the shadow will change accordingly
Fourteen, Rect Mask 2D component: Rect Mask 2D and Mask components are two different components used to limit the visibility of UI elements in Unity. The Rect Mask 2D component only supports rectangular shaped masks. The Mask component can limit the display of UI elements with masks of various shapes.
1.Padding: It can control the display of UI elements in the visible area
2.Softness: It is used to control the softening degree of the edge of the mask. It allows to create a smooth transition on the edges of the mask to make the mask shape less rigid
15. Selectable component: a component used for UI element interaction and selected state management. The Selectable component and the Button component are two different components used in Unity to interact with UI elements. (Attributes refer to Button)
(1) The Selectable component provides basic interactive control, while the Button component is a subclass of Selectable, which focuses on creating clickable buttons and provides additional button interaction functions and event support.
(2) Selectable components can be used to create various types of interactive UI elements, such as check boxes, sliders and text input boxes, etc.