Unity学习日志_UGUI组件简介
1. Canvas画布:
简介:
画布,绘制UI元素的载体,所有元素必须在Canvas之下。
渲染顺序:
当在同一Canvas中时:
渲染顺序取决于图片在Hierarchy的顺序。
当在不同Canvas中时:
渲染顺序取决于Sorting Layer和Order In Layer或者Sort Order数值的设置。其中同一Layer看Order,不同Layer看Sorting Layer。
属性:
render mode:
- overlay(canvas画布独立渲染,与相机无关)
-
Pixel perfect:强制画布中的元素按像素对齐。仅在 renderMode 为屏幕空间时适用。
-
Sort Order:画布之间的排列顺序。
-
Target Display:目标屏幕。
-
Additional Shader Channels:获取或设置要在创建 Canvas 网格时使用的附加着色器通道的遮罩。
- camera(canvas画布将随着camera一起移动)
-
Render Camera:渲染相机,此处通常放入UI相机。
-
Plane Distance:Canvas与UI相机之间的距离。
-
Sorting Layer:层排序数。
-
Order In Layer:层内排序数。
- worldspace(UI将可以和游戏物体配合)
-
Event Camera:渲染相机。
UI渲染模式的应用:
- World Space模式下的UI应用在世界坐标系中,可以将Event Camera的位置添加主相机且主相机不剔除任何视层,这样就可以在主视角中看见拥有UI标记的游戏对象。此UI标记建议放在自定义图层中。否则可能会被UI相机重复渲染。
- Camera模式下,会在Render Camera中添加视层只有UI的UI相机。此模式下Canvas会跟随相机移动。
Canvas Scaler:
画布缩放组件,几种模式:
- Constant Pixel Size:固定的像素大小。
- Scale With Screen Size:根据屏幕大小进行缩放。
- Constant Physical Size:固定物理单位大小。
Graphic RayCaster:
图形检测组件,用于对Canvas进行射线检测。
属性:
- Ingore Reversed Graphics:是否忽略背面的图形检测。
- Blocking Objects:阻挡图形检测的对象的类型。
- Blocking Mask:阻挡图形射线检测的遮罩层。
Canvas Group:
使用CanvasGroup组件可以对UI元素进行分组,方便统一的管理。使用方法:将canvas拖入带有CanvasGroup组件的父物体中。
属性:
- Alpha:透明度。
- Interactable:是否接受输入控制。
- Block RayCasts:选项控制该组件是否作为碰撞器的RayCast,注:只适用于Graphic RayCaster中的RayCast方法。
- Ingore Parent Groups:用于控制是否忽略父对象上的Canvas Group设置。
2. Rect Transform:
简介:
派生自Transform,在UGUI控件上替代原有变换组件,表 示一个可容纳UI元素的矩形。
属性:
- Inspector面板中的属性:
-
Anchors(锚点/框):
- 锚点:
-
锚点其实是由两个点重合组成的,两个点分别为Min和Max,其中Min在左下角,Max在右上角。
-
作用:子轴心点到父锚点的距离是不变的。由此可以“固定“子物体的相对位置和相对大小。例如你想把一个UI固定到右上角某一位置,你就可以将父锚点放在右上角。
- 锚框:
-
当锚点分开就成了锚框。
-
作用:子轴心点到父各个锚框边的距离是恒定的。由此可以“固定“子物体的相对位置和相对大小。
- 锚点:
-
Pivot(轴心点):
-
是自身的旋转点。
-
Rotation,Scale和传统Transform一样。
- Rect Transform中的常用变量:
-
anchoredPosition:
-
offsetMax:offsetMax表示物体右上角相对AnchorMax的偏移。
-
offsetMin:offsetMin表示物体左下角相对AnchorMin的偏移。
-
sizeDelta:
- 当是锚点时:sizeDelta的值就是UI图像的宽高值。
- 当是锚框时:sizeDelta的值为offsetMax - offsetMin。
-
rect.width:UI图像的宽。
-
rect.height:UI图像的高。
-
3. Text
可以通过为UI添加子Text‘的方式来添加文字UI,其他UI组合同理。
面板:
属性:
- Font:字形
- Font Style:字体风格
- Font Size:字体大小
- Line Spacing:行间距
- Rich Text:是否为富文本,如果勾选则可以使用一些类css语句来修饰字体。
- Alignment:对齐方式
- Horizontal Overflow:水平溢出
- Wrap:文本将自动换行,当达到水平边界
- Overflow:文本可以超出水平边界,继续显示
- Vertical Overflow:垂直溢出
- Truncate:文本不显示超出垂直边界的部分
- Overflow:文本可以超出垂直边界,继续显示
- Best Fit:勾选之后,编辑器发生变化,显示Min Size和Max Size
- Min Size:最小大小
- Max Size:最大大小
- 当边框很大时,文字最大显示Max Size字体大小;当边框很小时,文字最小显示Min Size字体大小,边框显示不了MinSize字体大小就不再显示文字了。
- Color:颜色
- Material:材质
- Raycast Target:来自类Graphic,当该项为false时,消息会透传
4. Image
面板:
属性:
- Source Image:图片源
- Color:图片基色
- Material:图片材质
- Raycast Target:是否发生交互响应
- Image Type:图片类型:
- Simple:默认情况下会自适应矩形大小,如果勾选PA则会保留图像原始比例。
- Preserve Aspect:图像的原始比例的高度和宽度是否保持相同比例。
- Sliced:
- Fill Center:是否填补图像中心部分
- Tilled:图像保持原始大小并无限平铺,图像在边缘处会被截断。
- Fill Center:是否填补图像中心部分
- Filled:图像显示为Simple模式,但可以通过参数来展现图像填充过程。
- Fill Method:填充方式
- Fill Origin:填充起点
- Fill Amount:填充比例。
- Clockwise:填充方向是否为顺时针,只适用于Radial填充方式。
- Simple:默认情况下会自适应矩形大小,如果勾选PA则会保留图像原始比例。
5. Transition过渡选项:
Interactable:是否允许交互。
Color Tint:
- Target Graphic:目标图片。
- Normal color:正常颜色。
- Highlighted Color:高亮颜色,被选中时。
- Pressed Color:按压后的颜色。
- Disabled Color:不可用时的颜色。
Sprite Swap:
- Target Graphic:目标图片。
- Normal Sprite:正常图片。
- Highlighted Sprite:高亮图片,被选中时。
- Pressed Sprite:按压后的图片。
- Disabled Sprite:不可用时的图片。
Animation:
- Normal Trigger:正常动画。
- Highlighted Trigger:高亮动画,被选中时。
- Pressed Trigger:按压后的动画。
- Disabled Trigger:不可用时的动画。
6. Navigation导航选项:
之后整理EventSystem的时候整理。
7. Button:
内含有Transition和Navigation
8. Toggle:
内含有Transition和Navigation
属性:
- Is On:是否被选中。
- Toggle Transition:状态改变时是否启动过渡效果。
- Graphic:选中时的图像。
- Group:Toggle组,一个组中只能选中一个Toggle,添加在这里的对象需要有Toggle Group组件。
层级结构:
9. Slider滑动条:
内含有Transition和Navigation
属性:
- Fill Rect:填充方块。
- Handle Rect:拖动方块。
- Direction:滑动方向。
- Min Value:最小值。
- Max Value:最大值。
- Whole Numbers:是否为整数。
- Value:调整当前值。
层级结构:
10. ScrollBar滚动条:
内含有Transition和Navigation
属性:
- Handle Rect:滑动方块。
- Direction:滑动方向。
- Value:当前值
- Size:滑块大小。
- Number of steps:滑块数值数量。
层级结构:
11. Dropdown下拉菜单:
内含有Transition和Navigation
属性(大多数不需要更改):
- Caption Image:选择自身可以将Option中设定的每个选项的图片显示出来。
- Value:当前选中的选项索引。
- Option:选项,可以在此处添加新的选项。
12. InputField输入框:
内含有Transition和Navigation
属性:
- Text Component:文本组件。
- Text:文本内容
- Character Limit:字数限制。
- content Type:输入内容的类型。
- Line Type:文本的行类型。
- Placeholder:占位文本,当Text中没有输入时显示的文本。
- CaretXXX:设置插入符号的若干属性。
层级结构:
13. Panle面板:
简单来说就是一张半透明的图片
14. Scroll View滑动视图:
15. Mask遮罩:
拥有Mask组件的父物体可以限制其子物体的图像显示范围,即当子物体的图像大小大于父物体时,子物体图像最多可以显示的大小等同于父物体大小。前提是父物体也要有image组件。
属性:
- Show Mask Graphic:是否显示父物体的遮罩图像
16. Raw Image原始图像:
Raw Image与Image最大的区别就是Raw Image不强制要求必须使用Sprite。