资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

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

创作时间:

作者:

@小白创作中心

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

引用

CSDN

https://blog.csdn.net/MY_future_/article/details/145952698

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：显示文本。
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);
    }
}