Unity学习日志_UGUI组件简介

Unity学习日志_UGUI组件简介

1. Canvas画布：

简介：

画布，绘制UI元素的载体，所有元素必须在Canvas之下。

渲染顺序：

当在同一Canvas中时：

​ 渲染顺序取决于图片在Hierarchy的顺序。

当在不同Canvas中时：

​ 渲染顺序取决于Sorting Layer和Order In Layer或者Sort Order数值的设置。其中同一Layer看Order，不同Layer看Sorting Layer。

属性：

render mode：

1. overlay（canvas画布独立渲染，与相机无关）

   1. 

   2. Pixel perfect：强制画布中的元素按像素对齐。仅在 renderMode 为屏幕空间时适用。

   3. Sort Order：画布之间的排列顺序。

   4. Target Display：目标屏幕。

   5. Additional Shader Channels：获取或设置要在创建 Canvas 网格时使用的附加着色器通道的遮罩。

2. camera（canvas画布将随着camera一起移动）

   1. 

   2. Render Camera：渲染相机，此处通常放入UI相机。

   3. Plane Distance：Canvas与UI相机之间的距离。

   4. Sorting Layer：层排序数。

   5. Order In Layer：层内排序数。

3. worldspace（UI将可以和游戏物体配合）

   1. 

   2. Event Camera：渲染相机。

UI渲染模式的应用：

1. World Space模式下的UI应用在世界坐标系中，可以将Event Camera的位置添加主相机且主相机不剔除任何视层，这样就可以在主视角中看见拥有UI标记的游戏对象。此UI标记建议放在自定义图层中。否则可能会被UI相机重复渲染。
2. Camera模式下，会在Render Camera中添加视层只有UI的UI相机。此模式下Canvas会跟随相机移动。

Canvas Scaler:

画布缩放组件，几种模式：

1. Constant Pixel Size：固定的像素大小。
2. Scale With Screen Size：根据屏幕大小进行缩放。
3. Constant Physical Size：固定物理单位大小。

Graphic RayCaster:

图形检测组件，用于对Canvas进行射线检测。

属性：

1. Ingore Reversed Graphics：是否忽略背面的图形检测。
2. Blocking Objects：阻挡图形检测的对象的类型。
3. Blocking Mask：阻挡图形射线检测的遮罩层。

Canvas Group:

使用CanvasGroup组件可以对UI元素进行分组，方便统一的管理。使用方法：将canvas拖入带有CanvasGroup组件的父物体中。

属性：

1. Alpha：透明度。
2. Interactable：是否接受输入控制。
3. Block RayCasts：选项控制该组件是否作为碰撞器的RayCast，注：只适用于Graphic RayCaster中的RayCast方法。
4. Ingore Parent Groups：用于控制是否忽略父对象上的Canvas Group设置。

2. Rect Transform:

简介：

派生自Transform，在UGUI控件上替代原有变换组件，表 示一个可容纳UI元素的矩形。

属性：

1. Inspector面板中的属性：

   1. 

   2. Anchors（锚点/框）：

      1. 锚点：

         1. 

         2. 锚点其实是由两个点重合组成的，两个点分别为Min和Max，其中Min在左下角，Max在右上角。

         3. 作用：子轴心点到父锚点的距离是不变的。由此可以“固定“子物体的相对位置和相对大小。例如你想把一个UI固定到右上角某一位置，你就可以将父锚点放在右上角。

      2. 锚框：

         1. 

         2. 当锚点分开就成了锚框。

         3. 作用：子轴心点到父各个锚框边的距离是恒定的。由此可以“固定“子物体的相对位置和相对大小。

   3. Pivot（轴心点）：

      1. 

      2. 是自身的旋转点。

   4. Rotation，Scale和传统Transform一样。

2. Rect Transform中的常用变量：

   1. anchoredPosition：

      1. 

   2. offsetMax：offsetMax表示物体右上角相对AnchorMax的偏移。

   3. offsetMin：offsetMin表示物体左下角相对AnchorMin的偏移。

      1. 

   4. sizeDelta：

      1. 当是锚点时：sizeDelta的值就是UI图像的宽高值。
      2. 当是锚框时：sizeDelta的值为offsetMax - offsetMin。

   5. rect.width：UI图像的宽。

   6. rect.height：UI图像的高。

3. Text

可以通过为UI添加子Text‘的方式来添加文字UI，其他UI组合同理。

面板：

属性：

1. Font：字形
2. Font Style：字体风格
3. Font Size：字体大小
4. Line Spacing：行间距
5. Rich Text：是否为富文本，如果勾选则可以使用一些类css语句来修饰字体。
6. Alignment：对齐方式
7. Horizontal Overflow：水平溢出
   1. Wrap：文本将自动换行，当达到水平边界
   2. Overflow：文本可以超出水平边界，继续显示
8. Vertical Overflow：垂直溢出
   1. Truncate：文本不显示超出垂直边界的部分
   2. Overflow：文本可以超出垂直边界，继续显示
9. Best Fit：勾选之后，编辑器发生变化，显示Min Size和Max Size
   1. Min Size：最小大小
   2. Max Size：最大大小
   3. 当边框很大时，文字最大显示Max Size字体大小；当边框很小时，文字最小显示Min Size字体大小，边框显示不了MinSize字体大小就不再显示文字了。
10. Color：颜色
11. Material：材质
12. Raycast Target：来自类Graphic，当该项为false时，消息会透传

4. Image

面板：

属性：

1. Source Image：图片源
2. Color：图片基色
3. Material：图片材质
4. Raycast Target：是否发生交互响应
5. Image Type：图片类型：
   1. Simple：默认情况下会自适应矩形大小，如果勾选PA则会保留图像原始比例。
      1. Preserve Aspect：图像的原始比例的高度和宽度是否保持相同比例。
   2. Sliced：
      1. Fill Center：是否填补图像中心部分
   3. Tilled：图像保持原始大小并无限平铺，图像在边缘处会被截断。
      1. Fill Center：是否填补图像中心部分
   4. Filled：图像显示为Simple模式，但可以通过参数来展现图像填充过程。
      1. Fill Method：填充方式
      2. Fill Origin：填充起点
      3. Fill Amount：填充比例。
      4. Clockwise：填充方向是否为顺时针，只适用于Radial填充方式。

5. Transition过渡选项：

Interactable：是否允许交互。

Color Tint：

1. Target Graphic：目标图片。
2. Normal color：正常颜色。
3. Highlighted Color：高亮颜色，被选中时。
4. Pressed Color：按压后的颜色。
5. Disabled Color：不可用时的颜色。

Sprite Swap：

1. Target Graphic：目标图片。
2. Normal Sprite：正常图片。
3. Highlighted Sprite：高亮图片，被选中时。
4. Pressed Sprite：按压后的图片。
5. Disabled Sprite：不可用时的图片。

Animation：

1. Normal Trigger：正常动画。
2. Highlighted Trigger：高亮动画，被选中时。
3. Pressed Trigger：按压后的动画。
4. Disabled Trigger：不可用时的动画。

6. Navigation导航选项：

之后整理EventSystem的时候整理。

7. Button：

内含有Transition和Navigation

8. Toggle：

内含有Transition和Navigation

属性：

1. Is On：是否被选中。
2. Toggle Transition：状态改变时是否启动过渡效果。
3. Graphic：选中时的图像。
4. Group：Toggle组，一个组中只能选中一个Toggle，添加在这里的对象需要有Toggle Group组件。

层级结构：

9. Slider滑动条：

内含有Transition和Navigation

属性：

1. Fill Rect：填充方块。
2. Handle Rect：拖动方块。
3. Direction：滑动方向。
4. Min Value：最小值。
5. Max Value：最大值。
6. Whole Numbers：是否为整数。
7. Value：调整当前值。

层级结构：

10. ScrollBar滚动条：

内含有Transition和Navigation

属性：

1. Handle Rect：滑动方块。
2. Direction：滑动方向。
3. Value：当前值
4. Size：滑块大小。
5. Number of steps：滑块数值数量。

层级结构：

11. Dropdown下拉菜单：

内含有Transition和Navigation

属性（大多数不需要更改）：

1. Caption Image：选择自身可以将Option中设定的每个选项的图片显示出来。
2. Value：当前选中的选项索引。
3. Option：选项，可以在此处添加新的选项。

12. InputField输入框：

内含有Transition和Navigation

属性：

1. Text Component：文本组件。
2. Text：文本内容
3. Character Limit：字数限制。
4. content Type：输入内容的类型。
5. Line Type：文本的行类型。
6. Placeholder：占位文本，当Text中没有输入时显示的文本。
7. CaretXXX：设置插入符号的若干属性。

层级结构：

13. Panle面板：

简单来说就是一张半透明的图片

14. Scroll View滑动视图：

15. Mask遮罩：

拥有Mask组件的父物体可以限制其子物体的图像显示范围，即当子物体的图像大小大于父物体时，子物体图像最多可以显示的大小等同于父物体大小。前提是父物体也要有image组件。

属性：

1. Show Mask Graphic：是否显示父物体的遮罩图像

16. Raw Image原始图像：

Raw Image与Image最大的区别就是Raw Image不强制要求必须使用Sprite。