UGUI
UGUI is the official UI implementation of Unity. Since Unity4.6, Unity has officially launched a new version of the UGUI system. Compared with the OnGUI system, the new UGUI system is more user-friendly, and it is an open source system, which is beneficial for game developers to develop game interfaces. The UGUI system has three characteristics: flexible, fast, and visualized. For game developers, UGUI has high operating efficiency, good execution effect, easy to use, convenient expansion, and high compatibility with Unity.
All UI controls created in UGUI have a Rect Transform component unique to UI controls. The three-dimensional object we created is Transform, and the UI control is Rect Transform, which is the rectangular orientation of the UI control, where Pos X, Pos Y, and Pos Z refer to the offset of the UI control on the corresponding axis. In addition to the Rect Transform component of the UI control, each UI control also has a Canvas Renderer component, as shown in Figure 4.10. It is a canvas rendering, generally ignore it, because it cannot be clicked.
Canvas
The Canvas is the area where all UI elements are placed. All controls created in the scene will automatically become sub-objects of the Canvas game object. If there is no Canvas in the scene, the object will be automatically created when the control is created. There are two ways to create a canvas: one is to create directly through the menu; the other is to automatically create a canvas to accommodate the component when creating a UI component directly. No matter which method is used to create the canvas, the system will automatically create a game object named EnventSystem, on which several components related to event monitoring are mounted for setting.
There is a Render Mode property on the Canvas canvas, which has 3 options, as shown in Figure 4.11, corresponding to the three rendering modes of Canvas: Screen Space-Overlay, ScreenSpace-Camera and World Space.
Event System Event System
Contains three components:
- Event Handling Components: Send input-based events to objects in the application, whether keyboard, mouse, touch, custom.
- standalone input Module Independent input module for mouse, keyboard and controller. This module is configured to watch the InputManager, sending events based on what state the InputManager is.
- Touch input module is designed to be used on touch-enabled basic devices.
Panel control
The panel is actually a container on which other UI controls can be placed. When the panel is moved, the UI controls placed in it will follow the movement, so that a group of controls can be moved and processed more reasonably and conveniently. Drag the four corners or four sides of the panel control to adjust the size of the panel. A fully functional UI interface often uses multiple Panel container controls, and one panel can also be applied to other panels, as shown in Figure 4.13. When we create a panel, the panel will contain an Image (Script) component by default.
Text control
Many UI controls created in UGUI have a Text control that supports text editing. Text control, also known as a label, the Text area is used to enter the text to be displayed. It can set font, style, font size and so on.
Image control
In addition to the two public components Rect Transform and Canvas Renderer, the Image control has only one Image component by default, as shown in Figure 4.16. Among them, Source Image is the source image to be displayed. If you want to assign a picture to Image, you need to convert the picture into a sprite format , and the converted sprite picture can be dragged and dropped into the Source Image of Image. The conversion method is: select the image to be converted in the Project, and then in the Inspector property panel, click the drop-down box on the right of Texture Type (texture type), in the pop-up menu, select Sprite (2D and UI) and click the bottom Click the Apply button to convert the picture into a sprite format, and then drag and drop it into the Source Image of the Image.
Raw Image control
The Raw Image control displays a non-interactive image to the user, as shown in Figure 4.17. It can be used as decoration, icon, etc. The Raw Image control is similar to the Image control, however, the Raw Image can display any texture, and the Image can only be used to display a sprite.
Button control
In addition to the two public Rect Transform and Canvas Renderer components, the Button control also has Image and Button components by default, as shown in Figure 4.18. The properties in the component Image are the same. Button is a composite control, which also contains a Text sub-control, through which the text content, font, style, word size, color, etc. displayed on the Button can be set, which is the same as the Text control mentioned above
Toggle controls
After the Toggle switch is created, it can be found that it is also a composite control with two sub-controls, Background and Label. There is also a Checkmark sub-control in the Background control. The Background is an image control, and its sub-control Checkmark is also an image control. Its Label control is a text box. By changing the attribute values they have, you can change the appearance of Toggle, such as color, font and so on.
Slider control
In the UI interface of the game, you will see various sliders to control the volume or the sensitivity of the joystick. Slider is also a composite control, Background is the background, the default color is white; Fill Area is the filled area. Create a Slider control, the internal structure is shown in Figure 4.20.
One parameter that needs attention in the parameter list of the Slider control is Whole Numbers, which indicates whether the value of the slider can only be an integer, and the developer can set it as needed. In addition, the Slider control can also mount scripts to respond to event monitoring.
Scrollbar control
Scrollbar objects can be positioned vertically or horizontally. It is mainly used to change the target ratio by dragging the slider, as shown in Figure 4.21. Its most appropriate application is to change an overall value into its specified percentage, the maximum value is 1 (100%), and the minimum value is 0 (0%). Drag the slider to change in this range, for example , to change the display area of the scroll view.
Input Field control
Input Field is also a compound control, and it also contains two sub-controls, Placeholder and Text, on the main control, as shown in Figure 4.22. Among them, Text is a text control, and the content entered by the user when the program is running is saved in this Text; Placeholder is a placeholder, which indicates the prompt information displayed to the user when the program is running and the user has not entered the content. The Input Field input field component, like other controls, also has an Image (Script) component, and also includes a Transition property, which defaults to color transformation, as shown in Figure 4.23. In addition, it also has an important Content Type (content type), as shown in Figure 4.24. Used to limit the content type of this input field, including numbers, passwords, etc. The commonly used types are as follows.
（1）Standard（标准类型）：什么字符都能输入，只要是当前字体支持的
（2）Integer Number（整数类型）：只能输入一个整数。
（3）Decimal Number（十进制数）：能输入整数或小数。
（4）Alphanumeric（文字和数字）：能输入数字和字母。
（5）Name（姓名类型）：能输入英文及其他文字，当输入英文时自动姓名化。
（6）Password（密码类型）：输入的字符隐藏为星号。