UGUI

6 阅读3分钟

一、六大基础组件

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滚动视图控件

是什么