UGUI

半夜微笑狗
22 阅读7分钟

一、六大基础组件

1、六大基础组件概述

如何使用UGUI

在层级窗口中右键-选择UI中的控件-并在场景中开启2D模式

六大组件在哪里？

在新创建的UI控件时，同时创建出来的对象身上。

image.png

组件作用：

image.png

2、Canvas组件

作用

Canvas译为画布，用于负责渲染Canvas下子对象。

Canvas三种渲染方式

image.png

第二种模式关联的摄像机最好是新建的摄像机（该摄像机只渲染UI层），并且需要改为只渲染自己层而不是天空盒。想要3D物体显示在UI前面一般是在Canvas中创建物体。

第三种模式一般直接关联主摄像机

3、Canvas Scaler组件

作用

Canvas Scaler译为画布缩放器，主要负责UI分辨率自适应。

分辨率计算公式

Rect中宽高 * Rect中缩放大小 = 屏幕分辨率

image.png

image.png

恒定像素模式

重要参数：

缩放系数：按此系数缩放画布中所有UI

每单位参考像素：多少像素对应一个Unity中单位，会和图片设置中的Pixels Per Unit一起参与计算。

计算公式：

image.png

缩放模式（常用）

image.png

三种匹配模式

image.png

拓展模式计算公式

image.png

收缩模式计算公式

image.png

匹配宽高

image.png

恒定像素模式

image.png

单位换算：

image.png

计算公式：

image.png

4、Graphic RayCaster组件

image.png

5、EventSystem组件和Standalone Input Module

image.png

6、RectTransform组件

作用：处理UI的位置、大小

重要参数

特殊说明：当Anchors（相对于父对象锚点）设置为一个点时，可以调整位置和大小；设置为一个矩形时，子x，y和宽高将消失，并变换为Left和Right、Top、Bottom来调整其距离锚点距离并会影响大小。

image.png

二、控件

1、Image图片控件

重要参数

image.png

注意：想更改两张图片显示顺序可以在Canvas下调整其排序。

2、Text文本控件

重要参数

image.png

富文本介绍

可以支持只处理部分字

image.png

如何添加边缘线和阴影

边缘线：Unity中添加OutLine组件

阴影：Unity中添加Shadow

3、Rawimage大图控件

是什么

image.png

4、Button按钮控件

Button是什么

是用户常用交互对象，通常由两部分组成：1、父对象：上面挂载Button组件和Image组件用于显示背景图。2、子对象：按钮文本。

参数

Interactable：是否可交互

Transition：响应用户输入的过渡效果

Navigation：导航模式，设置UI可以使用键盘控制

OnClick：单击触发函数

点击触发函数添加

拖脚本是指定一个按钮，拖入一个脚本并选择一个方法。

image.png

5、Toggle单选多选框控件

是什么

是一个单选和多选框。默认多选，可结合ToggleGroup制作单选框。

创建出的对象由4部分组成：父对象-Toggle组件依附，子对象-背景图、选中图、说明文字（可选）。

参数

image.png

制作单选框的关键是一组选择框关联同一个ToggleGroup

代码控制

image.png

6、InputField输入框控件

是什么

用于处理文本输入相关，默认由3个对象组成：父对象-挂载有InputField组件、Image组件；子对象-两个文本显示组件，有一个是默认文本显示，一个是接收玩家输入。

特殊参数

image.png

注意：Character Limit：填写0可以支持无限个。

时间监听

分为两种监听，改变内容触发和结束输入触发。

7、Slider滑动条控件

是什么

控制滑动条相关交互，默认由4部分组成：父对象-Slider组件依附，子对象-背景图、进度条、滑动块三组对象。

参数

image.png

8、ScrollBar滚动条控件

是什么

是管理滚动鼠标中键时的滚动条，默认由2部分组成：父对象-ScrollBar组件依附，子对象-滚动块对象。一般都是和ScrollView滚动视图配合使用。

参数

image.png

9、ScrollView滚动视图控件

参数

image.png

10、DropDown下拉控件

是什么

image.png

参数

image.png

代码控制

image.png

代码添加触发事件

image.png

11、图集制作

为什么要打图集

image.png

在Unity中打开自带的打图集功能

image.png

代码控制

image.png

三、UGUI进阶

1、UI事件监听接口

作用：让控件能添加更多的事件监听来处理对应的逻辑。

常用接口

image.png

不常用接口

image.png

使用事件接口

image.png

函数参数使用

image.png

2、事件触发器

是什么？

是一个集合了UI事件监听接口的EventTrigger组件。

如何使用事件触发器

1、在需要触发的UI上添加EventTrigger组件，新建触发类型并拖入挂载有对应函数的游戏对象。

2、代码添加

image.png

3、屏幕转UI相对坐标

RectTransformUtility类

image.png

参数及方法

image.png

4、MasK遮罩

是什么

遮罩：不改变图片，只显示一部分

如何使用遮罩

在父对象添加Mask组件，子对象勾选Maskable。只会显示和父对象重叠的部分。

5、模型和粒子显示在UI前

模型显示在UI前

image.png

粒子特效显示在UI前

image.png

6、异型按钮

如何实现精准点击

image.png

7、自动布局组件

是什么

自动布局组件配合UI元素进行自动布局

组件

水平布局组件：

image.png

网格布局组件：

image.png

内容大小适配器：

image.png

宽高比适配器

image.png

8、画布组

image.png

实践

1、需求分析

image.png

2、准备

image.png

1、创建Canvas对象并将渲染模式设置为屏幕空间-摄像机，并关联一个只渲染UI层的新摄像机。之后将主摄像机不渲染UI层并清理标志改为Solid color颜色改为黑色。

2、将Canvas Scaler中UI缩放模式改为随屏幕大小缩放。并将参考分辨率设置为背景图片大小。

3、基类

用于作为各个面板类的基类

using System.Collections;
using System.Collections.Generic;
using Unity.VisualScripting;
using UnityEngine;
using UnityEngine.Events;

public abstract class BasePanel : MonoBehaviour
{
    CanvasGroup cg;
    int hideSpeed = 10;//淡入淡出速度
    bool isShow = false;
    UnityAction hideCallBack;

    protected virtual void Awake()
    {
        cg = this.GetComponent<CanvasGroup>();
        if (cg == null)
            cg = this.AddComponent<CanvasGroup>();
    }

    // Start is called before the first frame update
    protected virtual void Start()
    {
        Init();
    }

    public virtual void ShowUI()
    {
        isShow = true;
        cg.alpha = 1;
    }

    public virtual void HideUI(UnityAction callAction)
    {
        isShow = false;
        cg.alpha = 0;
        hideCallBack = callAction;
    }

    protected abstract void Init();

    // Update is called once per frame
    void Update()
    {
        if(isShow && cg.alpha != 1)
        {
            cg.alpha += hideSpeed * Time.deltaTime;
            if (cg.alpha > 1)
                cg.alpha = 1;
        }
        else if(isShow == false && cg.alpha != 0)
        {
            cg.alpha -= hideSpeed * Time.deltaTime;
            if(cg.alpha < 0)
            {
                cg.alpha = 0;
            }
            hideCallBack?.Invoke();
        }
    }
}

4、管理面板

用于管理面板的显隐和得到面板

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

public class UIManager
{
    private static UIManager instance = new UIManager();
    public static UIManager Instance => (instance);
    private Dictionary<string, BasePanel> dic = new Dictionary<string, BasePanel>();
    private Transform canvasT;
    private UIManager() {
        canvasT = GameObject.Find("canvas").transform;
        GameObject.DontDestroyOnLoad(canvasT.gameObject);
    }
    //显示UI面板
    public T ShowUIPanel<T>() where T : BasePanel
    {
        string name = typeof(T).Name;//获取面板名称
        if (dic.ContainsKey(name))
            return dic[name] as T;
        GameObject panelObj = GameObject.Instantiate(Resources.Load<GameObject>("UI/" + name));//获取UI对象脚本
        panelObj.transform.SetParent(canvasT, false);//设置对象父类
        T panel = panelObj.GetComponent<T>();
        dic.Add(name, panel);//存进字典
        panel.ShowUI();
        return panel;
    }
    //隐藏面板
    public void HideUIPanel<T>(bool isShow) where T : BasePanel
    {
        string name = typeof(T).Name;
        if (dic.ContainsKey(name))
        {
            if (isShow)
            {
                dic[name].HideUI(() => {
                    dic.Remove(name);
                    GameObject.Destroy(dic[name].gameObject);
                });
            }
            else
            {
                dic.Remove(name);
                GameObject.Destroy(dic[name].gameObject);
            }
        }
    }
    //得到面板
    public T GetUIPanel<T>() where T : BasePanel
    {
        string name = typeof(T).Name;
        if (dic.ContainsKey(name))
        {
            return dic[name] as T;
        }
        return null;
    }
}

5、提示面板

需要先新建一个面板，里面有提示内容显示和确认按钮等

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

public class TipPanel : BasePanel
{
    public Button btn;
    public TextMeshProUGUI text;
    protected override void Init()
    {
        btn.onClick.AddListener (() =>
        {
            UIManager.Instance.HideUIPanel<TipPanel>(false);
        });
    }

    /// <summary>
    /// 提示内容改变
    /// </summary>
    /// <param name="info">提示内容</param>
    public void ChangeInfo(string info)
    {
        text.text = info;
    }
}

测试类：

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

public class Main : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        TipPanel tp = UIManager.Instance.ShowUIPanel<TipPanel>();
        tp.ChangeInfo("请关闭面板吧？");
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

6、登录面板

必要创建：两个输入框（用户名和密码）、两个多选框（记住密码和自动登录）、两个按钮（注册和登录）

登录数据类：

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

public class LoginData
{
    //登录相关
    public string userName;
    public string passWord;
    public bool rememberPassWord;
    public bool autoLogin;
    //服务器相关
}

数据管理

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

public class DataMgr
{
    private static DataMgr instance = new DataMgr();
    public static DataMgr Instance => instance;
    private LoginData loginData;
    public LoginData LoginData => loginData;
    private DataMgr()
    {
        loginData = JsonMgr.Instance.LoadData<LoginData>("LoginData");
    }
    public void SaveLoginData()
    {
        JsonMgr.Instance.SaveData(loginData, "LoginData");
    }
}

登录面板

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

public class LoginPanel : BasePanel
{
    public TMP_InputField userName;
    public TMP_InputField password;
    public Toggle savePW;
    public Toggle autoLogin;
    public Button regist;
    public Button login;
    protected override void Init()
    {
        savePW.onValueChanged.AddListener((isOn) => {
            if (isOn == false)
            {
                autoLogin.isOn = false;
            }
        });
        autoLogin.onValueChanged.AddListener((isOn) =>
        {
            if (isOn == true)
            {
                savePW.isOn = true;
            }
        });
        regist.onClick.AddListener(() =>
        {
            //显示注册面板
            
            //隐藏自己
            UIManager.Instance.HideUI<LoginPanel>();
        });
        login.onClick.AddListener(() =>
        {
            //验证密码，并根据保存与否决定保存密码
        });
    }

    public override void ShowMe()
    {
        base.ShowMe();
        //根据保存的账号密码显示
        LoginData data = LoginMgr.Instance.LoginData;//获取数据
        savePW.isOn = data.isSavePW;//是否保存密码
        autoLogin.isOn = data.isAutoLogin;//是否自动登录
        userName.text = data.username;//填入已保存账号
        //根据保存密码选项填入密码
        if (savePW.isOn)
        {
            password.text = data.password;
        }
        //根据自动登录选项自动验证账号密码
        if (autoLogin.isOn)
        {

        }
    }
}

7、注册面板

avatar
文章
阅读
粉丝