✨ 文章概览

💡 导读提示：本文主要介绍[UGUI基本概念及基本控件]，适合[Unity初级学习者]阅读，预计阅读时间[12分钟]。

项目	详情
技术栈	Unity 2023.2 + C#
难度等级	⭐⭐☆☆☆ 初级
核心要点	[UGUI基本概念] · [UGUI基本控件]

📖一、UGUI基本概念

定义：GUI是图形用户界面的简称，图形用户界面是人和计算机软件之间交换信息的媒介，是一种图形化的信息表现形式。

UGUI的功能和设计特点：强大易用性，包括全新UI布局和事件系统

Rect Transform 能够实现UI界面布局

⚖️二、UGUI基本控件

Canvas（画布）是容纳所有UI元素的区域
画布组件构成（有四个）

Render Mode 渲染模式	释义	功能
Screen Space-Overlay 模式	屏幕空间覆盖模式	UI渲染在场景对象上
World Space模式	世界空间模式	UI被看作是一个3D游戏对象，与场景中的其他游戏对象相交，该模式适合于VR\AR项目UI的制作
Screen Space-Camera模式	屏幕空间相机模式	当场景中的3D游戏对象距离更近时，该游戏对象则会显示在UI的前方

Pos 指的是轴心和锚点的相对距离

⚡2.1 Image 控件

创建image，修改设置

修改Pos等信息

使布满视图

纹理类型修改为精灵类型

修改之后就能够把图片拖动，从而修改image的属性

⚡2.2 Text控件

在c盘中搜索fonts，点击第一个文件夹，选择需要的中文字体，拖到unity中font文件夹中

修改字体的长和宽；选中font文件夹下我们导入的中文字体，右键，create->TextMeshPro->FontAsset，

将需要的字体拖动到Fonts文件夹（导入TMP后自带的文件夹），选中字体，右击，创建一个

⚡2.3 Button控件

给Button附加一个脚本

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;
public class BtnClick : MonoBehaviour
{
    public void OnButtonClick()
    {
        Debug.Log("按钮已点击");
        SceneManager.LoadScene("LoginScene");
    }
}

点击+号，进行一个添加操作

把Button拖动至如下图位置

把No Function修改为 BtnClick ->OnButtonClick()

当圆圈圈出来的地方都准备就绪，我们可以运行一下，再点击按钮时，Console界面会弹出按钮已点击的提示

1.将SampleScene添加至BuildSettings，
2.新建一个LoginScene，保存至Scene文件夹
3.把LoginScene添加至BuildSettings

⚡2.4 Input Field 控件

创建一个Input Field （输入框）控件

在Content Type里可修改文本类型，
如：Passord类型就是密码输入，输入的文本会自动加*号

⚡2.5 Toggle控件

Toggle（开关）控件通常用作关卡难度的选择

按照自己的喜欢和游戏画面舒适度调整长和宽

修改文字和勾勾框的位置和大小

给Toogle控件添加脚本，代码如下：

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

public class toggle : MonoBehaviour
{
  public void OnToggleValueChanged()
    {
        Debug.Log("开关已点击");
    }
}

当圆圈这三个部分准备好，Toggle控件的设置就完成了

⚡2.6 Toggle Group控件

通常见到的游戏一般有多个模式，因此有多个Toogle需要添加，在这里我们用Toggle Group控件来管理这多个Toogle

1.创建ToggleGroup空物体

并把三个Toogle控件重命名，作为ToogleGroup的子物体

2.脚本的添加和实例化

给ToggleGroup空物体添加一个Toggle Group组件

这里我们就能看到：只会显示一个框框被勾选的情况

⚡2.7 Slider控件

滑动条控件

如下图，可以设置滑动条的方向

为滑动条添加脚本，使滑动条可以控制图片的显现，代码如下：

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

public class TestSlider : MonoBehaviour
{
    public Image image;
    Slider slider;
    // Start is called before the first frame update
    void Start()
    {
        slider = GetComponent<Slider>();
        slider.minValue = 0;
        slider.maxValue = 1;
        image.type = Image.Type.Filled;
        image.fillMethod = Image.FillMethod.Radial360;
    }

    // Update is called once per frame
    void Update()
    {
        image.fillAmount = slider.value;
    }
}

把脚本附加给滑动条，记得把图片image拖动到图中指定位置

⚡2.8 Scrollbar控件

滚动条控件

⚡2.9 Scroll View 控件

滚动视图控件

相关属性

⚡2.10 Dropdown 控件

下拉列表控件

---

💡 总结要点

📊UGUI基本概念
💡UGUI基本控件的基础操作

---

笔记整理于 [2025.10.29] | Unity 学习记录