当前位置：网站首页>Day 5 script and UI System

Day 5 script and UI System

2022-06-25 08:28:00 【Code Knight】

What is the GUI？

One 、 Use script to operate common UI Control

1、 Create game interface

Create a new one 3D engineering , By default Scene New China UI Control . The control is actually a game object , stay Hierarchy Right click in the blank area of the window to open the menu , Select in menu UI, There are many controls to choose from .

（1）Canvas And EventSystem brief introduction

（2） Interface scale problem

（3） build UI Test scenarios

Tip：

-01-02

-03

-04

-05

such , A simple UI The interface is set up .

Tip：

The canvas size we have built in the scene may be different from the game ruler , So we want the canvas size to change with the screen size , The following modifications are required ：

2、 Rectangular transformation （Rect Transform） Components

3、 picture （Image） Components

Code ：

using UnityEngine;
using UnityEngine.UI;//UI The script should contain secondary namespaces 

public class NewBehaviourScript : MonoBehaviour
{
    Image image;
    // You can specify another picture in the compiler 
    public Sprite otherSprite;

    float fillAmount = 0;

    void Start()
    {
        image = GetComponent<Image>();
        // Change the picture directly to another picture 
        if (otherSprite!=null)
        {
            image.sprite = otherSprite;
        }
        // Change the picture type to Filled,360° fill , Easy to rotate animation 
        image.type = Image.Type.Filled;
        image.fillMethod = Image.FillMethod.Radial360;
    }
    void Update()
    {
        // Make an animated effect of rotating the display , The straight line effect is similar 
        // Value 0~1
        image.fillAmount = fillAmount;
        fillAmount += 0.01f;
        if (fillAmount > 10)
        {
            fillAmount = 0;
        }
    }
}

Demonstration effect ：

Tip：

4、 Text （Text） Components

 This is a paragraph. <color=#ff0000ff> rich <b> writing </b><size=50> Ben </size></color>

5、 Button （Button） Components

Button is Unity The control commonly used in ：

（1） Button appearance switching method

（2） Buttons are combined controls

（3）OnClick（ Click on ） event

using UnityEngine;

public class ButtoTest : MonoBehaviour
{
    public void TestButtonClick(int param)
    {
        Debug.Log("clicked it");
        Debug.Log(" The event parameters are ：" + param);
    }
}

Tip：

6、 Radio buttons （Toggle） Components

using UnityEngine;
using UnityEngine.UI;

public class ToggleTest : MonoBehaviour
{
    Toggle toggle;
    void Start()
    {
        toggle = GetComponent<Toggle>();
        // Initial unchecked 
        toggle.isOn = false;
    }
    public void TestToggleChange(bool b)
    {
        if(b)
        {
            Debug.Log(" Check the radio box ");
        }
        else
        {
            Debug.Log(" Uncheck the radio box ");
        }
    }
}

7、 Slider bar （Slider） Components

using UnityEngine;
using UnityEngine.UI;

public class SliderTest : MonoBehaviour
{
    // Controlled pictures 
    public Image image;
    // Slide bar component 
    Slider slider;
    void Start()
    {
        slider = GetComponent<Slider>();
        slider.minValue = 0;
        slider.maxValue = 1;
        // Change the picture type to Filled,360 fill 
        image.type = Image.Type.Filled;
        image.fillMethod = Image.FillMethod.Radial360;
    }
    void Update()
    {
        // For each frame, the value of the slider determines the fill size of the picture 
        image.fillAmount = slider.value;
    }
}

8、 Input box （Input Field） Components

9、 Scroll area （Scroll Rect） Components

Tip：

public void OnScrollChange(Vector2 pos)
{
    Debug.Log(" Scroll position ："+pos)
}

Two 、 Scripts and event systems

Tip：

1、 Common input events

2、 Common input event parameters

3、 Dynamically add event response methods

using UnityEngine;
using UnityEngine.UI;

public class NewBehaviourScript : MonoBehaviour
{
    void Start()
    {
        Button btn;
        // Get three sub buttons , Add respectively OnClick event 
        btn = transform.GetChild(0).GetComponent<Button>();
        btn.onClick.AddListener(Btn1);
        // use lambda The same goes for expressions 
        btn = transform.GetChild(1).GetComponent<Button>();
        btn.onClick.AddListener(() => { Debug.Log(" Button 2"); });

        btn = transform.GetChild(2).GetComponent<Button>();
        btn.onClick.AddListener(Btn3);
    }

    void Btn1()
    {
        Debug.Log(" Button 1");
    }

    void Btn3()
    {
        Debug.Log(" Button 3");
        Debug.Log(" Delete button 3 Response function of ");
        Button btn = transform.GetChild(2).GetComponent<Button>();
        btn.onClick.RemoveAllListeners();
    }
}