Unity 基础—— UGUI 游戏界面开发：从基础到高级

企业开发 2025-04-08 09:53:08 阅读次数: 0

一.引言

在 Unity 开发中，UGUI（Unity GUI）是构建游戏界面的核心工具。无论是简单的按钮、文本，还是复杂的布局和动画，UGUI 都提供了强大的支持。本文将基于 《Unity3D游戏开发》（宣雨松第3版） 的内容，结合 Unity 2023 的最新特性，详细解析 UGUI 的使用方法，帮助你掌握游戏界面开发的技能。

二.UGUI 基础

1. UGUI 概述

UGUI 是 Unity 官方提供的 UI 系统，具有以下特点：

易用性：通过可视化编辑器快速创建 UI 元素。
灵活性：支持自定义组件和动画。
性能优化：内置批处理和合批功能，提升渲染效率。

2. 创建 UI 元素

(1) 创建 Canvas

Canvas 是 UGUI 的根容器，所有 UI 元素都必须放在 Canvas 下。

在 Hierarchy 窗口中右键，选择 UI → Canvas。
Canvas 会自动创建一个 EventSystem，用于处理 UI 事件。

(2) 创建基本 UI 元素

Text：显示文本。

扫描二维码关注公众号，回复： 17556873 查看本文章
Image：显示图片。
Button：可点击的按钮。
Slider：滑动条。
InputField：输入框。

3. Canvas 的设置

(1) Render Mode

Screen Space - Overlay：UI 渲染在场景之上，不受摄像机影响。
Screen Space - Camera：UI 渲染在指定摄像机的视口中。
World Space：UI 作为 3D 对象渲染在场景中。

(2) Canvas Scaler

Constant Pixel Size：UI 元素的大小固定，不随屏幕分辨率变化。
Scale With Screen Size：UI 元素根据屏幕分辨率缩放。
Constant Physical Size：UI 元素根据物理尺寸（如英寸）缩放。

三.UGUI 组件详解

1. Text

Text 组件用于显示文本。

(1) 基本属性

Text：显示的文本内容。
Font：字体。
Font Size：字体大小。
Color：文本颜色。

(2) 示例

using UnityEngine;
using UnityEngine.UI;

public class TextExample : MonoBehaviour {
    public Text text;

    void Start() {
        text.text = "Hello, UGUI!";
        text.color = Color.red;
    }
}

2. Image

Image 组件用于显示图片。

(1) 基本属性

Source Image：图片资源。
Color：图片颜色。
Image Type：图片类型（Simple、Sliced、Tiled、Filled）。

(2) 示例

using UnityEngine;
using UnityEngine.UI;

public class ImageExample : MonoBehaviour {
    public Image image;

    void Start() {
        image.color = new Color(1, 0, 0, 0.5f); // 半透明红色
    }
}

3. Button

Button 组件用于创建可点击的按钮。

(1) 基本属性

OnClick：点击按钮时触发的事件。

(2) 示例

using UnityEngine;
using UnityEngine.UI;

public class ButtonExample : MonoBehaviour {
    public Button button;
    public Text text;

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

    void OnButtonClick() {
        text.text = "按钮被点击了！";
    }
}

4. Slider

Slider 组件用于创建滑动条。

(1) 基本属性

Min Value：最小值。
Max Value：最大值。
Value：当前值。

(2) 示例

using UnityEngine;
using UnityEngine.UI;

public class SliderExample : MonoBehaviour {
    public Slider slider;
    public Text text;

    void Start() {
        slider.onValueChanged.AddListener(OnSliderValueChanged);
    }

    void OnSliderValueChanged(float value) {
        text.text = $"当前值: {value}";
    }
}

5. InputField

InputField 组件用于创建输入框。

(1) 基本属性

Text：输入的文本内容。
Placeholder：提示文本。

(2) 示例

using UnityEngine;
using UnityEngine.UI;

public class InputFieldExample : MonoBehaviour {
    public InputField inputField;
    public Text text;

    void Start() {
        inputField.onValueChanged.AddListener(OnInputValueChanged);
    }

    void OnInputValueChanged(string value) {
        text.text = $"输入内容: {value}";
    }
}

四.UGUI 布局

1. 布局组件

(1) Horizontal Layout Group

将子元素水平排列。

(2) Vertical Layout Group

将子元素垂直排列。

(3) Grid Layout Group

将子元素按网格排列。

2. 布局示例

using UnityEngine;
using UnityEngine.UI;

public class LayoutExample : MonoBehaviour {
    public GameObject panel;

    void Start() {
        // 添加 Horizontal Layout Group
        HorizontalLayoutGroup hLayout = panel.AddComponent<HorizontalLayoutGroup>();
        hLayout.spacing = 10;

        // 创建子元素
        for (int i = 0; i < 5; i++) {
            GameObject button = new GameObject("Button");
            button.transform.SetParent(panel.transform);
            button.AddComponent<Image>();
            button.AddComponent<Button>();
        }
    }
}

五.UGUI 动画

1. 使用 Animator 控制 UI 动画

创建 Animator Controller，添加动画状态和过渡。
在脚本中控制动画播放。

using UnityEngine;

public class UIAnimationExample : MonoBehaviour {
    public Animator animator;

    void Start() {
        animator.Play("FadeIn");
    }
}

2. 使用 Tween 库

使用 DoTween 或 LeanTween 实现复杂的 UI 动画。

using DG.Tweening;

public class TweenExample : MonoBehaviour {
    public RectTransform panel;

    void Start() {
        panel.DOAnchorPos(new Vector2(0, 0), 1f);
    }
}

六.UGUI 性能优化

1. 合批（Batching）

将多个 UI 元素合并为一个 Draw Call，减少渲染开销。
使用相同的材质和纹理。

2. 减少 Overdraw

避免 UI 元素重叠过多。
使用 Mask 组件限制渲染区域。

3. 使用对象池

对频繁创建和销毁的 UI 元素使用对象池。

using UnityEngine;
using UnityEngine.UI;

public class ObjectPoolExample : MonoBehaviour {
    public GameObject prefab;
    public Transform parent;

    private ObjectPool<GameObject> pool;

    void Start() {
        pool = new ObjectPool<GameObject>(() => Instantiate(prefab, parent), obj => obj.SetActive(true), obj => obj.SetActive(false));
    }

    public void SpawnUI() {
        GameObject obj = pool.Get();
        obj.transform.SetParent(parent);
    }
}

七.实际应用案例

案例1：动态创建 UI 元素

using UnityEngine;
using UnityEngine.UI;

public class DynamicUIExample : MonoBehaviour {
    public GameObject buttonPrefab;
    public Transform parent;

    void Start() {
        for (int i = 0; i < 5; i++) {
            GameObject button = Instantiate(buttonPrefab, parent);
            button.GetComponentInChildren<Text>().text = $"按钮 {i + 1}";
        }
    }
}

案例2：实现 UI 动画

using UnityEngine;
using DG.Tweening;

public class UIAnimationExample : MonoBehaviour {
    public RectTransform panel;

    void Start() {
        panel.DOAnchorPos(new Vector2(0, 0), 1f).SetEase(Ease.OutBounce);
    }
}

案例3：使用对象池优化 UI

using UnityEngine;
using UnityEngine.UI;

public class ObjectPoolExample : MonoBehaviour {
    public GameObject prefab;
    public Transform parent;

    private ObjectPool<GameObject> pool;

    void Start() {
        pool = new ObjectPool<GameObject>(() => Instantiate(prefab, parent), obj => obj.SetActive(true), obj => obj.SetActive(false));
    }

    public void SpawnUI() {
        GameObject obj = pool.Get();
        obj.transform.SetParent(parent);
    }
}
总结