Unity的UI系统-UGUI

UGUI是U3D提供的一套快速且高效的创建UI系统的框架。平时U3D的学习都十分的零碎,没有系统的学习过UGUI,对UGUI的使用总是不够灵活。因此打算全面的总结一下UGUI的相关知识点和使用方法。这篇文章先介绍一下UGUI,以及一些基础的知识。

相关概念

The Rect Tool(矩形工具)

为了方便布局,每个UI元素都会被表示为一个矩形。这个矩形可以使用工具栏中的Rect Tool在场景视图中操作。Rect Tool既可用于Unity的2D功能,也可用于UI,实际上甚至可用于3D对象。
Rect Tool可以用来移动、调整和旋转UI元素。使用UI时,通常最好保留设置为Pivot和Local。

Rect Transform(矩形变换)

Rect Transform是一个新的转换组件,不同于常规的Transform组件,它用于所有UI元素。
Rect变换具有与常规变换一样的位置,旋转和缩放属性,但它也具有宽度和高度,用于指定矩形的尺寸。

Pivot(枢纽)

UI元素的旋转、尺寸、缩放都依赖于Pivot。当你在工具栏中选择了Pivot模式之后,就可以在场景视图中移动矩形的Pivot了。

Anchors(锚点)

矩形变换中有一个被称作锚点的布局概念。锚点在场景视图中显示为四个小三角形手柄,锚点信息也显示在检查器中 。锚点主要用于实现相对布局。
如果一个矩形变换有一个父矩形变换,那么子矩形变换可以通过各种方式锚点到父矩形变换。锚定还允许子矩形变换与它的父矩形变换的宽度或高度一起伸展。

Anchor Preset(锚点预设)

在Inspector中,锚点预设(Anchor Preset)按钮可以在Rect Transform组件的左上角找到 。

Canvas(画布)

Canvas是所有UI元素的根布局,所有UI元素必须放在Canvas区域内。
创建任意一个新的UI元素时,若窗口中不存在Canvas,则会自动生成一个Canvas,作为UI的根元素。

Render Moders(渲染模式)

UGUI的渲染模式有三种:

  1. Screen Space - Overlay,此渲染模式将UI元素放置在场景顶部呈现的屏幕上,不受其他任何物体遮挡,即使没有摄像机也可以看到其内容。如果调整屏幕大小或更改分辨率,Canvas将自动更改大小以匹配此大小。Overlay模式使用Sort order排序,Sort order的值越大,越靠前渲染。如果在这个模式下,加入一些非UI的物体时,会使得排序混乱。
  2. Screen Space - Camera,顾名思义,此渲染模式与摄像头相关。在此模式下,Canvas被放置在Camera前面,UI元素的渲染会依赖这个Camera,这意味着Camera的设置将会影响到UI的效果。如果Camera是透视的,那UI元素也会被渲染成透视的。Canvas的尺寸也会随着Camera的改变而自动改变。
  3. World Space,这种模式下,Canvas会被渲染成场景中的对象。Canvas的大小可以使用其Rect变换手动设置,UI元素将会和场景中的其他对象相互影响。当你希望UI元素成为场景中的一部分时,这种渲染模式非常有用,这也被称为“叙事界面”。

Canvas Scaler

Canvas Scaler用来控制UI元素在Canvas上的缩放和像素密度。有三种可选方式:

  1. Constant Pixel Size,无论屏幕大小如何,UI元素都保持相同的像素大小。
  2. Scale With Screen Size,UI元素随着屏幕尺寸缩放
  3. Constant Physical Size,无论屏幕大小和分辨率如何,UI元素都保持相同的物理大小。

Visual Components(可视化组件)

Text,也称为标签。有一个可以显示输入文本的文本区域。Text可以设置字体、字体风格、字体大小和其他一些富文本功能。
Image,由Rect Transform和Image脚本组成。可以在Image脚本中添加一个图片元素,并设置颜色和材质。
Raw Image,添加的是一个Texture,而非Image中的图片。只有在必要时才应使用原始图像,否则图像将适用于​​大多数情况。
Mask,不是可见的UI控件,而是一种修改控件子元素外观的方法。将子元素限制为父元素的形状。
Effects,视觉组件也可以应用各种简单效果,例如简单的阴影或轮廓。

Interaction Components(交互组件)

交互组件都具备一些共同点,它们都是可以被选中的,意味着都具有normal、highlighted、pressed、disabled的状态。交互组件至少拥有一个UnityEvent。
Button,拥有一个OnClick事件,当Button被点击时,会回调该事件。Button包含一个Text组件,因此拥有Text组件的功能。Button还包含了Image脚本,可以设置图片。
Toggle,有一个勾选框来指示当前的开关状态。它有一个OnValueChanged事件回调,当Toggle的勾选状态发生变化时。
Toggle Group,由多个Toogle组成,Group中的Toggle同一时间只能有一个被选中。
Slider,可以让用户通过拖动滑块来改变数值。当滑块对应的数值改变时,会回调OnValueChanged方法。
Scrollbar,滑块组件,它的取值在0到1之间,可以被设置为水平或垂直。当取值改变时,会回调OnValueChanged方法。Scrollbar通常用来实现ScrollView。
Dropdown,包含一个选项列表。每一个选项都可以添加一个文本和一张图片。更改当前选中项时,会回调OnValueChanged方法。
Input Field,包含一个Placeholder和一个Text。Placeholder用来显示提示文本,Text用来显示输入的文本。当输入的文本发生变化时,会回调OnValueChanged方法;当输入结束时(焦点离开),会回调EndEdit方法。
ScrollView,一个可滑动区域,它可以在一个较小的区域显示超过该区域的内容。