Common controls for Unity operation (below)

5. Button component

Buttons are commonly used interactive UI components. The main properties of Unity’s button components are introduced as follows:

1. Intractable (interactive or not)
2. Transititon (appearance state switching), each button has 4 states: plush, highlighted, pressed, and disabled. The appearance of these four states should show differences. Unity provides several ways to define changes in appearance, which will be explained later
3.     Navigation (navigation order), when the player uses the keyboard or handle to switch between zaiUI controls, the order of key switching will become a complicated problem, and "navigation order" exists to solve this problem. The Visulaize button is also prepared for navigation. Since this function is not used in many cases, this article will not introduce it

 1. The method of button appearance state switching

Button state switching is closely related to real-world applications, and the default button state switching is Color Tint (color overlay). In fact, it is a multiplication operation on the color .

Color overlays are handy when doing simple tests. Because only one button image needs to be prepared, it is multiplied by white by default, that is, the color of the image is not changed; when it is highlighted, it is multiplied by light gray; when it is pressed, it is multiplied by dark gray, and the button is obviously darkened; when it is disabled, multiplied In translucent dark gray, the button is not only darkened but also transparent. In this way, one picture can be used to represent 4 states.

Another way with better effect is to prepare 2 to 4 pictures according to the needs, and then select the Sprite Swap (switch sprite picture) mode. In this mode, you need to specify different pictures for the normal, highlighted, pressed, and disabled states of the button. Of course, if a certain state does not appear in the game, the corresponding picture may not be specified.

2. Buttons are combined controls

Carefully observe the detailed information of the button in the Inspector window, and you will find that it not only has the Button component, but also the Image component, and also contains a Text sub-object, which shows that the button is composed of various components and parent-child objects. The Image component represents the default appearance, and the Text sub-object determines the text displayed on the button.

3. OnClick (click) event

The most common function of a button is to click, which needs to be linked with a script, usually by calling a certain method. The association of events can be operated directly in the editor.

The button OnClick event can trigger any object's method, and the method can have one parameter, one parameter, or multiple parameters.

It's even possible to trigger multiple methods when a button is pressed. Click the plus sign below the edit box to add more methods

6. Radio button (toggle) component

The radio button component is similar to the button component, except that it has two states of "checked" and "unchecked". Select UI->Toggle in the menu of creating an object to create a radio button

The actions it provides in the editor are very similar to those of the button component, and it also has the Transiiton option, and it also has several ways to switch the appearance state

Compared with the button component, the radio button has several options, which are described as follows:

1. Is On. Represents whether it is checked
2. Transition. Used to define appearance and transition effects, similar to button components
3. Toggle Transition. Represents the dynamic effect when the dog is checked, there are two options: "fade in and fade out" and "no effect"
4. Graphic. Represents the sub-object corresponding to the tick picture. Generally, the hook picture corresponding to the radio button is the CheckMark sub-object. If you need to replace the appearance of the small picture, you can modify the CheckMark sub-object.
5. Group. Represents a radio button group, allowing multiple radio boxes to form a multi-choice structure
6. When checking or canceling the radio button, it will trigger the message of O you V ah slightly C Han Ge, with a Bool parameter

To make it more vivid, here is an example, the steps are as follows:

1. Create three Toggle objects, place them in appropriate positions, and modify the text on the object Lable for easy viewing
2. Create an empty object in the UI and give it a name, such as Group1
3. In the scene list, drag the three radio buttons onto the empty object
4. Add the component Toggle Group to this parent object
5. The Group option for each radio button is designated as this empty object (in this step, these three radio buttons can be selected at the same time, the same operation is more convenient)

Once done, you can run the game to test it. Check any one option, and the other two options will be automatically unchecked. If all three are checked in the prompt state, you can change the original state by modifying the Is On option. Note that in this example, "parent and child" objects are used for the convenience of management. In fact, this method does not have to be used, as long as the grouping is made.

7. Slider component

The Slider component is usually used to display and edit data within a certain range. Generally, the left side is the minimum value and the right side is the maximum value. In addition, there are also slider components for vertical layout and special-shaped layout. For example, health bars in many games have special shapes, but they can still be made with slider controls.

The slider control consists of multiple objects, one is the Backgroud (background object), the other is the Fill Rect (filled area), and the third is the Handle Rect (handle area) of the slider.

The attributes of Slider are as follows:

1. Interactable (interactive or not), non-interactive sliders can be used as blood bars, progress bars, etc.
2. Transition (appearance state switching), similar to a button
3. Fill Rect (filled area), corresponding to the filled area on the left side of the slider
4. Handle Rect (handle area), which corresponds to the handle area of ​​the slider. Define these two areas separately, the purpose is to link the Slider with the child object
5. Direction (slider direction), supports left->right, right->left, up->down, down->up the slider in four directions
6. Min Value, Max Value, specify the minimum and maximum values ​​represented by the slider
7. Whole Numbers (integer) can be simply understood as "the value after checking can only be an integer"
8. Value (value), the most important attribute in the Slider , is the number on the current slider, which must be between the maximum value and the minimum value. Modifying this directly will only cause a corresponding change in the sliding reality. This value can be modified with a script

Here is an interesting example. Let the slider control the reality of the image, the larger the value of the slider, the more image content will be displayed.

//The picture controlled

public Image image;

//slider component

Slider slider;

void Start()

{

       slider=GetComponent<Slider>();

       slider.minValue=0;

       slider.maxValue=1;

       //Change the image type to Fillde, 360-degree fill

       image.type=Image.Type.Filled;

       image.fillMethod=Image.FillMethod.Radial360;

}

void Update()

{

   // Let the value of the slider determine the padding size of the picture in each frame

   image.fillAmount=slider.value;

}

Eight, input box (Input Field) component

When users enter text, they will use Input Field, which is also composed of parent and child objects. Simply put, the Input Field on the parent object is used to define the appearance and process input, while the Text property of the child object is responsible for text display.

The specific attributes are as follows:

1. Interactable (whether it can be interacted with)
2. Transition (appearance state control)
3. Text Component (associated text component), is a reference to the child object, associating the Text of the child object with the parent object
4. Text (text content), is a string
5. Character Type (character limit) limits the maximum number of characters entered by the user
6. Content Type (content type), specify the input format, such as Standard, Password, Integer Number, Email Address, etc. The input requirements are different in various application scenarios, such as hidden characters, so this property is very necessary
7. Line Type (newline method) can specify single-line or multi-line text
8. Place Holder (placeholder), which is also a reference to the child object. The default placeholder display is a gray text.
9. Cursor-related options, including Caret Blink Rate (cursor display frequency), Caret Width (cursor width), Custom Caret Color (whether to customize the cursor color)
10. Selection Color, used to specify the background color of the text selected by the user
11. Hide Mobile Input (hide mobile device input), used to hide mobile who's virtual keyboard
12. Read Only (read-only), the content cannot be entered under the read-only status.

Input Field has two kinds of events: On Value Changed (content change) event and On End Edit (end editing) event.

9. Scroll Rect component

In practice, it is often encountered that the information display length is much larger than the display size. This is to use Scroll View (scroll view control), and the core function component is called Scrool Rect.

Create a new Scroll View in the scene, observe its child objects, and find that there are three, namely Viewport (viewport), Scrollbar Horizontal (horizontal scroll bar), Scrollbar Vertical (vertical scroll bar). The key to using Scroll View correctly is to understand the relationship between Viewport size and Content (content) size.

The Viewport area is the display subject of the control, and the user can only see part of the Content through the Viewport.

In actual production, you can borrow the default Content object, use pictures, text and other content as the sub-objects of the Content, and then calculate and set the size of the Content so that the size of the Content can just accommodate all the content, so that you can scroll through all the content. It works.

Let's introduce its properties

1. Content (content reference), pointing to the Content of the child object
2. Horizontal (whether you can slide horizontally)
3. Vertical (whether you can slide vertically)
4. Movement Type (movement method) includes Elastic (elastic), Clamped (hard limit), and Unrestricted (unrestricted). This option refers to the effect when the scroll window reaches the edge.
5. Elasticity (elasticity), when using the elastic effect, specify the size of the rebound force
6. Inertia (inertia), when scrolling fast, you can turn on the inertial effect. Deceleration Rate can be specified after inertia is turned on
7. Scroll Sensitivity (sliding sensitivity), affecting the sliding speed
8. Viewport (window) only wants child object Viewport
9. Horizontal Scrollbar (vertical scroll bar)
10. Vertical Scrollbar (horizontal scroll bar

The options are Permanent (always displayed), Auto Hide (automatically hidden), Auto Hide And Expand Viewport (automatically hide and expand).

Finally, Scroll Rect contains the On Value Changer event by default, which can call the script method when the user scrolls the scroll bar. The parameter is the current scroll position, and the type is Vector2.