Manual construction of Unity3d-ugui

Understanding how the Ugui components are built helps to build our own UI interface. text literal

　　Text is the basic control in Ugui, create an empty object in the Hierarchyi panel-Add a text component to the empty object to achieve the same function as the text space.

Image Images

　　　Image is the basic control in Ugui, creating an empty object in the Hierarchyi panel-Adding an image component to the empty object enables the same functionality as the image control.

RAW Image RAW Image

Raw image and image are basically the same,

Feature on RAW image less than image Image Type feature, Raw image can add all types of pictures and image can only add Spritie (Sprite) type of picture;

Performance because RAW image has less functionality than image, RAW image performs better than image performance, and raw image is primarily used to do images that do not need to be changed in the game, such as background images.

button Buttons

component in button: Image component, button component, text component (not required).

Construction Method:

1. Create an empty object under the canvas (renamed button)

2. Add an image component and a button component to the button

3. Create an empty object as a sub-object of button (renamed to Text)

4. Add a text component to text, which completes the construction of the control button.

Toggle Switch

components in Toggle: Toggle components, two image components, text components

Construction Method:

1. Create an empty object in canvas (renamed toggle)

2. Add a toggle component to toggle

3. Add an image control as a sub-object of the toggle for the background of the switch (renaming the control to background)

4. Add an image control as a sub-object of the background for the foreground of the switch (rename the space to checkmark)   

5. Create an empty object as a sub-object of the toggle (renamed to label)

6. Add an image component to the label or add a text component (note: The image component, text component, Raw image component cannot exist on an object at the same time)

7. Click on the object toggle, locate the toggle component above it, drag the background onto the Targetgraphic property, and drag the checkmark to the graphic property

8. Finally, each object is adjusted to the appropriate size, which completes the construction of the control toggle.

Slider Slider

Components in Slider: Slider component, three image components

Construction Method:

1. Create an empty object in the Hierarchy panel (renamed Slider)

2. Add a slider component to the slider

3. Add three Imge controls as sub-objects of slider (renamed background, Fill, Handle, respectively)

4. Add a picture to each sub-object and adjust it to the appropriate size

5. Click on the Object slider, locate the slider component on it, drag the background to the target graphic property as the handle area, and drag fill to the Fill Tect property as the handle passing area. Drag the Handel to the Handel Reck property as the drag point.

6. Adjust the size of each object to complete the creation of the slider.

Attention:

The value of the slider component when adjusting the picture needs to be 1,handle to the right of slider.

If the image position is abnormal when the function is implemented, the position of background and fill may be reversed.

Scrollbar Scrolling Tooldropdowm drop-down menuInput Field entry box

components in input fild: input Fild component, image component, two text component

Construction Method:

1. Create an empty object under the canvas (renamed Inputfield)

2. Add a Inputfield component and an image component to Inputfield

3. Add two text controls as sub-objects of Inputfield (renamed text, Placeholder, respectively)

4. Click on the object Inputfield, locate the Inputfield component, Target graphic will add itself by default, drag text to text component to display the user input text, Drag the placeholder to the placeholder location to display the prompt message (what prompts the user for input).

5. Adjust the object to the appropriate size to complete the setup of input Dield

Canvas CanvasesPanel PanelsScroll View scrolling viewsEvent System Events

It's a good idea to create a Ugui-provided control when you build your UI interface, and then delete the controls to keep the canvas and EventSystem

Manual construction of Unity3d-ugui