Unity程序开发：5.UI系统

5. UI系统

Unity 提供了一个强大的 UI 系统，用于创建和管理游戏中的用户界面。以下是 Unity UI 系统的详细介绍和示例代码，包括基本 UI 组件、UI 布局以及处理 UI 事件。

基本UI组件

Text

Text 组件用于显示文字。

示例：创建 Text 组件

using UnityEngine;
using UnityEngine.UI;

public class CreateText : MonoBehaviour
{
    void Start()
    {
        // 创建 Canvas
        GameObject canvasGO = new GameObject("Canvas");
        Canvas canvas = canvasGO.AddComponent<Canvas>();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;
        canvasGO.AddComponent<CanvasScaler>();
        canvasGO.AddComponent<GraphicRaycaster>();

        // 创建 Text
        GameObject textGO = new GameObject("Text");
        textGO.transform.parent = canvasGO.transform;
        Text text = textGO.AddComponent<Text>();
        text.text = "Hello, World!";
        text.font = Resources.GetBuiltinResource<Font>("Arial.ttf");
        text.color = Color.black;

        // 设置 Text 的位置和大小
        RectTransform rectTransform = text.GetComponent<RectTransform>();
        rectTransform.sizeDelta = new Vector2(200, 50);
        rectTransform.anchoredPosition = new Vector2(0, 0);
    }
}

Image

Image 组件用于显示图片。

示例：创建 Image 组件

using UnityEngine;
using UnityEngine.UI;

public class CreateImage : MonoBehaviour
{
    public Sprite imageSprite;

    void Start()
    {
        // 创建 Canvas
        GameObject canvasGO = new GameObject("Canvas");
        Canvas canvas = canvasGO.AddComponent<Canvas>();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;
        canvasGO.AddComponent<CanvasScaler>();
        canvasGO.AddComponent<GraphicRaycaster>();

        // 创建 Image
        GameObject imageGO = new GameObject("Image");
        imageGO.transform.parent = canvasGO.transform;
        Image image = imageGO.AddComponent<Image>();
        image.sprite = imageSprite;

        // 设置 Image 的位置和大小
        RectTransform rectTransform = image.GetComponent<RectTransform>();
        rectTransform.sizeDelta = new Vector2(100, 100);
        rectTransform.anchoredPosition = new Vector2(0, 0);
    }
}

Button

Button 组件用于创建按钮。

示例：创建 Button 组件

using UnityEngine;
using UnityEngine.UI;

public class CreateButton : MonoBehaviour
{
    void Start()
    {
        // 创建 Canvas
        GameObject canvasGO = new GameObject("Canvas");
        Canvas canvas = canvasGO.AddComponent<Canvas>();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;
        canvasGO.AddComponent<CanvasScaler>();
        canvasGO.AddComponent<GraphicRaycaster>();

        // 创建 Button
        GameObject buttonGO = new GameObject("Button");
        buttonGO.transform.parent = canvasGO.transform;
        Button button = buttonGO.AddComponent<Button>();
        button.GetComponent<RectTransform>().sizeDelta = new Vector2(160, 30);
        button.GetComponent<RectTransform>().anchoredPosition = new Vector2(0, 0);

        // 创建 Text 子对象
        GameObject textGO = new GameObject("Text");
        textGO.transform.parent = buttonGO.transform;
        Text text = textGO.AddComponent<Text>();
        text.text = "Click Me";
        text.font = Resources.GetBuiltinResource<Font>("Arial.ttf");
        text.color = Color.black;

        // 设置 Text 的位置和大小
        RectTransform textRectTransform = text.GetComponent<RectTransform>();
        textRectTransform.sizeDelta = new Vector2(160, 30);
        textRectTransform.anchoredPosition = new Vector2(0, 0);
        text.alignment = TextAnchor.MiddleCenter;
    }
}

Slider

Slider 组件用于创建滑动条。

示例：创建 Slider 组件

using UnityEngine;
using UnityEngine.UI;

public class CreateSlider : MonoBehaviour
{
    void Start()
    {
        // 创建 Canvas
        GameObject canvasGO = new GameObject("Canvas");
        Canvas canvas = canvasGO.AddComponent<Canvas>();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;
        canvasGO.AddComponent<CanvasScaler>();
        canvasGO.AddComponent<GraphicRaycaster>();

        // 创建 Slider
        GameObject sliderGO = new GameObject("Slider");
        sliderGO.transform.parent = canvasGO.transform;
        Slider slider = sliderGO.AddComponent<Slider>();

        // 设置 Slider 的位置和大小
        RectTransform rectTransform = slider.GetComponent<RectTransform>();
        rectTransform.sizeDelta = new Vector2(160, 30);
        rectTransform.anchoredPosition = new Vector2(0, 0);
    }
}

Input Field

Input Field 组件用于创建可输入文本的区域。

示例：创建 Input Field 组件

using UnityEngine;
using UnityEngine.UI;

public class CreateInputField : MonoBehaviour
{
    void Start()
    {
        // 创建 Canvas
        GameObject canvasGO = new GameObject("Canvas");
        Canvas canvas = canvasGO.AddComponent<Canvas>();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;
        canvasGO.AddComponent<CanvasScaler>();
        canvasGO.AddComponent<GraphicRaycaster>();

        // 创建 Input Field
        GameObject inputFieldGO = new GameObject("InputField");
        inputFieldGO.transform.parent = canvasGO.transform;
        InputField inputField = inputFieldGO.AddComponent<InputField>();

        // 设置 Input Field 的位置和大小
        RectTransform rectTransform = inputField.GetComponent<RectTransform>();
        rectTransform.sizeDelta = new Vector2(160, 30);
        rectTransform.anchoredPosition = new Vector2(0, 0);

        // 创建 Text 子对象
        GameObject textGO = new GameObject("Text");
        textGO.transform.parent = inputFieldGO.transform;
        Text text = textGO.AddComponent<Text>();
        text.font = Resources.GetBuiltinResource<Font>("Arial.ttf");
        text.color = Color.black;
        inputField.textComponent = text;

        // 设置 Text 的位置和大小
        RectTransform textRectTransform = text.GetComponent<RectTransform>();
        textRectTransform.sizeDelta = new Vector2(160, 30);
        textRectTransform.anchoredPosition = new Vector2(0, 0);
    }
}

UI布局

Canvas

Canvas 是所有 UI 元素的根对象。

示例：创建 Canvas

using UnityEngine;

public class CreateCanvas : MonoBehaviour
{
    void Start()
    {
        // 创建 Canvas
        GameObject canvasGO = new GameObject("Canvas");
        Canvas canvas = canvasGO.AddComponent<Canvas>();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;
        canvasGO.AddComponent<CanvasScaler>();
        canvasGO.AddComponent<GraphicRaycaster>();
    }
}

Panel

Panel 是一种容器，用于组织和管理多个 UI 元素。

示例：创建 Panel

using UnityEngine;
using UnityEngine.UI;

public class CreatePanel : MonoBehaviour
{
    void Start()
    {
        // 创建 Canvas
        GameObject canvasGO = new GameObject("Canvas");
        Canvas canvas = canvasGO.AddComponent<Canvas>();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;
        canvasGO.AddComponent<CanvasScaler>();
        canvasGO.AddComponent<GraphicRaycaster>();

        // 创建 Panel
        GameObject panelGO = new GameObject("Panel");
        panelGO.transform.parent = canvasGO.transform;
        Image panelImage = panelGO.AddComponent<Image>();
        panelImage.color = Color.gray;

        // 设置 Panel 的位置和大小
        RectTransform rectTransform = panelGO.GetComponent<RectTransform>();
        rectTransform.sizeDelta = new Vector2(300, 200);
        rectTransform.anchoredPosition = new Vector2(0, 0);
    }
}

布局组件（Horizontal Layout Group, Vertical Layout Group, Grid Layout Group）

这些组件用于自动布局子元素。

示例：Horizontal Layout Group

Horizontal Layout Group 用于水平排列子元素。

using UnityEngine;
using UnityEngine.UI;

public class CreateHorizontalLayoutGroup : MonoBehaviour
{
    void Start()
    {
        // 创建 Canvas
        GameObject canvasGO = new GameObject("Canvas");
        Canvas canvas = canvasGO.AddComponent<Canvas>();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;
        canvasGO.AddComponent<CanvasScaler>();
        canvasGO.AddComponent<GraphicRaycaster>();

        // 创建 Panel 并添加 Horizontal Layout Group
        GameObject panelGO = new GameObject("Panel");
        panelGO.transform.parent = canvasGO.transform;
        HorizontalLayoutGroup hlg = panelGO.AddComponent<HorizontalLayoutGroup>();
        hlg.spacing = 10;

        // 设置 Panel 的位置和大小
        RectTransform rectTransform = panelGO.GetComponent<RectTransform>();
        rectTransform.sizeDelta = new Vector2(300, 50);
        rectTransform.anchoredPosition = new Vector2(0, 0);

        // 添加子对象
        for (int i = 0; i < 3; i++)
        {
            GameObject child = new GameObject("Child" + i);
            child.transform.parent = panelGO.transform;
            Image img = child.AddComponent<Image>();
            img.color = Color.blue;

            RectTransform childRect = child.GetComponent<RectTransform>();
            childRect.sizeDelta = new Vector2(50, 50);
        }
    }
}

示例：Vertical Layout Group

Vertical Layout Group 用于垂直排列子元素。

using UnityEngine;
using UnityEngine.UI;

public class CreateVerticalLayoutGroup : MonoBehaviour
{
    void Start()
    {
        // 创建 Canvas
        GameObject canvasGO = new GameObject("Canvas");
        Canvas canvas = canvasGO.AddComponent<Canvas>();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;
        canvasGO.AddComponent<CanvasScaler>();
        canvasGO.AddComponent<GraphicRaycaster>();

        // 创建 Panel 并添加 Vertical Layout Group
        GameObject panelGO = new GameObject("Panel");
        panelGO.transform.parent = canvasGO.transform;
        VerticalLayoutGroup vlg = panelGO.AddComponent<VerticalLayoutGroup>();
        vlg.spacing = 10;

        // 设置 Panel 的位置和大小
        RectTransform rectTransform = panelGO.GetComponent<RectTransform>();
        rectTransform.sizeDelta = new Vector2(100, 300);
        rectTransform.anchoredPosition = new Vector2(0, 0);

        // 添加子对象
        for (int i = 0; i < 3; i++)
        {
            GameObject child = new GameObject("Child" + i);
            child.transform.parent = panelGO.transform;
            Image img = child.AddComponent<Image>();
            img.color = Color.red;

            RectTransform childRect = child.GetComponent<RectTransform>();
            childRect.sizeDelta = new Vector2(80, 80);
        }
    }
}

Grid Layout Group 示例

Grid Layout Group 用于将子元素排列成网格形式。

using UnityEngine;
using UnityEngine.UI;

public class CreateGridLayoutGroup : MonoBehaviour
{
    void Start()
    {
        // 创建 Canvas
        GameObject canvasGO = new GameObject("Canvas");
        Canvas canvas = canvasGO.AddComponent<Canvas>();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;
        canvasGO.AddComponent<CanvasScaler>();
        canvasGO.AddComponent<GraphicRaycaster>();

        // 创建 Panel 并添加 Grid Layout Group
        GameObject panelGO = new GameObject("Panel");
        panelGO.transform.parent = canvasGO.transform;
        GridLayoutGroup glg = panelGO.AddComponent<GridLayoutGroup>();
        glg.cellSize = new Vector2(50, 50);
        glg.spacing = new Vector2(10, 10);

        // 设置 Panel 的位置和大小
        RectTransform rectTransform = panelGO.GetComponent<RectTransform>();
        rectTransform.sizeDelta = new Vector2(200, 200);
        rectTransform.anchoredPosition = new Vector2(0, 0);

        // 添加子对象
        for (int i = 0; i < 9; i++)
        {
            GameObject child = new GameObject("Child" + i);
            child.transform.parent = panelGO.transform;
            Image img = child.AddComponent<Image>();
            img.color = Color.green;

            RectTransform childRect = child.GetComponent<RectTransform>();
            childRect.sizeDelta = new Vector2(50, 50);
        }
    }
}

处理UI事件

按钮点击事件

按钮点击事件是 UI 交互中常见的一种事件，用于响应用户点击按钮的操作。

示例：添加按钮点击事件

using UnityEngine;
using UnityEngine.UI;

public class ButtonClickEvent : MonoBehaviour
{
    public Button button;

    void Start()
    {
        button.onClick.AddListener(OnButtonClick);
    }

    void OnButtonClick()
    {
        Debug.Log("Button was clicked!");
    }
}

动态更新UI

动态更新 UI 是游戏开发中常见的需求，例如实时更新分数、生命值等。

示例：动态更新 Text 组件

using UnityEngine;
using UnityEngine.UI;

public class UpdateText : MonoBehaviour
{
    public Text scoreText;
    private int score = 0;

    void Update()
    {
        if (Input.GetKeyDown(KeyCode.Space))
        {
            score++;
            scoreText.text = "Score: " + score;
        }
    }
}