unity3D UI

1. Canvas

1. Introduction to canvas

(1) Canvas belongs to Unity's UGUI. UGUI provides powerful visual editing, which greatly improves the development efficiency of GUI.
(2) Canvas is the parent object of all UI components, that is to say, each UI component must be under Canvas as a child object of Canvas. When you create a UI control, if there is no Canvas component under Hierarchy, Unity will Help you automatically create a Canvas and place your UI controls under the Canvas, Unity will also automatically create EventSystem, this object is used to determine events such as mouse input, which is also crucial for UI components, such as buttons, Sprite pictures, pictures and more

2. Create a canvas

(1) Right-click the "Hierarchy" page, select UI->Canvas, that is, canvas

(2) In the "Inspector", you can adjust the canvas size, size, position, etc.

Two, RawImage and Image

1. image introduction

Image component is a common basic component in UGUI components, mainly used to display image effects.

Some other components will use the Image component, such as the Button component, Scrollbar component, Dropdown component, InputField component, Panel component, ScrollRect component, and the Image component will also be used in the sub-objects of other components.

2. Introduction to RawImage

(1) The RawImage component is a component used to display textures. It is often used in combination with Render Texture to map the camera's screen. Or use it for screenshot display etc.
(2) The difference from Image is that Image can only display Sprite images, while RawImage can display any texture map.
(3) Select "Create→UI→Raw Image" in Unity's Hierarchy view to create a new Raw Image component.

3. create

(1) First create a pannel. Right click on the "Hierarchy" panel -> UI -> Panel. Doing everything on the canvas is done on the pannel, so you need to create a pannel

(2) Create an image and rawImage under the pannel
(3) Import the image into the rawimage as the background

(3) There is a UV Rect here

(4) If you change W to If it is 10, it will appear like this

(5) Change H again and the width will change

(6) Adjust W and H to 1, and then click the Rect Tool (shortcut key T) in the picture below to make the picture full
(7) Import the Image picture , you need to add Sprite (elf picture) here. First, you need to select the image, select the texture type in the Inspector inspection tool, select sprite (2DandUI) in the drop-down option, and then add it to the Image

(8) Download the picture of the button on the Internet, preferably with a transparent background

(9) Then convert it into a sprite picture
(10) After the conversion, the picture will display a small triangle, indicating that the conversion is successful

(11) If There are multiple buttons in the picture, you need to click Sprite Edit in the Inspector (you need to download it in the windows of the menu bar first)

(12) After opening the resource manager, find 2D Sprite in Packages and click Install, you can use Sprite Edit

and edit the picture to crop

Three, text text

1. text introduction

(1) Text text is to display non-interactive text information to users.

2. Attributes

(1) Text used to display the text
(2) Font the font of the text
(3) Font Style the style of the text (normal, bold, oblique)
(4) Font Size the size of the font
(5) Line Spacing between lines of text (6) Whether
Rich Text supports rich text, rich text is text with markup labels, which enhances the display effect of the text
(7) Alignment The horizontal and vertical alignment of the text
(8) Whether Align By Geometry is currently displayed The maximum length and width obtained in the text (instead of the height and width of the font) are aligned.
(9) Horizontal Overflow Text horizontal overflow processing method, you can choose Warp hidden or Overflow overflow
(10) Vertical Overflow Text vertical overflow processing method, you can choose Truncate truncation or Overflow overflow
(11) Best Fit ignores the text size set by Font Size, Adaptively change the size of the text to fit the size of the text box
(12) Color The color of the text
(13) Material The material used to render the text, you can set the material to make the text have a more cool effect.
(14) Whether the Raycast Target can be detected by rays, usually it can be turned off, because the text is best only used for display.

3. create

(1) Right-click on the layer and create text under the panel to select UI->Text

(2) It should be noted that the default text font does not support Chinese display and needs to be imported in the control panel. Control Panel –> Appearance and Personalization –> Font, and then select a Chinese font, here I choose the black body, and then drag it directly into the assets of unity.

(3) Then enter the font that is dragged in by the right key of unity

(4) just enter

Four, button

1. button introduction

(1) Button is an interactive UI component in UGUI.
It is also a component that is often encountered in development.
Click to complete a series of operations: perform certain events, actions, switch states, etc.

2. create

(1) Click "Create→UI→Button" in Unity's Hierarchy view to create a Button component:
(2) Enter "Switch Mode" in the button sub-item text and set the font

(3) The focus is On Click

(4) Single Click the plus sign
(5) drag the text here


(6) select string text for the function on the right

(7) enter "login success"

5. Scene switching

1. add script

(1) Add login and exit scene switching (the onclick under the property panel, the corresponding function when specifying the button)
①Code:

①代码：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class Demo : MonoBehaviour
{
    
    
    public void Login()
    {
    
    
        SceneManager.LoadScene("1.FristClasses");
    }

    public void ExitGame()
        {
    
    
            Application.Quit();
        }

    }

(2) Button code sets the click event (realize click to make the RawImage disappear)
①Code:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class FunctionDisappear : MonoBehaviour
{
    
    
    private GameObject GetRawImage;
    
    void Start()
    {
    
    
        GetRawImage = GameObject.Find("RawImage");
    }

    // Update is called once per frame
    void Update()
    {
    
    
        
    }
    void AddListenerToButtun()
    {
    
    
        GetComponent<Button>().onClick.AddListener(DisableRawImage);
    }

    void DisableRawImage()
    {
    
    
        GetRawImage.SetActive(false); 
    }
}

2. demo

(1) The scene is as follows

(2) Randomly play a chess piece.

(3) Now it is single-player mode, click to switch mode to switch to double-player mode