Unity中UI基础控件

• Canvas 画布
• Rect Transform 矩形变换
• Text 文本
• Image 图片
• Raw Image 原始图片
• Button 按钮
• # Toggle 开关
• Slider 滑动条
• Scrollbar 滚动条
• Dropdown 下拉框
• InputField 输入框
• Panel 面板
• Scroll View 滑动视图

Canvas 画布

• 画布，绘制UI元素的载体，所有元素必须在Canvas之下。
• UI元素的绘制顺序依赖于Hierarchy (层级面板)中的顺序。

• 参考https://docs.unity3d.com/cn/current/Manual/class-Canvas.html

UI元素渲染顺序

• 在同一个Canvas下的UI对象会根据在Hierarchy窗口中从上到下的顺序进行渲染

• 以Hierarchy参考
  1. 下方物体在上方物体前显示
  2. 子物体在父物体前显示
  3. 下方物体永远在前显示，无论上方的层次结构

Render Mode 渲染方式(三种)

• Screen Space-Overlay 覆盖模式
• Screen Space-Camera 摄像机模式
• World Space 世界空间模式

属性：	功能：
Sort Order	渲染顺序：在多个Canvas中，值越大越渲染到最上层。
Receives Events	此画布是否处理 UI 事件？

Screen Space-Overlay 覆盖模式

• Screen Space-Overlay 覆盖模式：UI元素将绘制在其他元素之前，且绘制过程独立于场景元素和摄像机设置，画布尺寸由屏幕大小和分辨率决定。
• Pixel Perfect 完美像素：若勾选，则会锐化屏幕显示效果。
• Sort Order 渲染顺序：在多个Canvas中，值越大越渲染到最上层。

属性：	功能：
Pixel Perfect	（仅限 Screen Space 模式）是否应该无锯齿精确渲染 UI？

Screen Space-Camera 摄像机模式

• Screen Space-Camera 摄像机模式：提供UICamera， Canvas对象被绘制在一个与摄像机固定距离的平面上，且绘制效果受摄像机参数的影响。
• Render Camera 渲染摄像机。
• Plane Distance 平面与摄像机的距离。
• Sorting Layer 排序层：通过Edit--Project Settings— Tags and Layers调整Canvas渲染顺序。

属性：	功能：
Render Camera	（仅限 Screen Space - Camera 模式）应该将 UI 渲染到的摄像机
Plane Distance	（仅限 Screen Space - Camera 模式）UI 平面在摄像机前方的距离。

实例

1. 修改Canvas下Canvas组件Render Mode属性：Screen Space-Camera 摄像机模式
2. 将相机拖给Canvas下Canvas组件Render Camera属性
3. 将Cube位置调整到Canvas前
4. 调整Canvas中Plane Distance，控制Canvas到渲染相机的距离
   
5. Plane Distance：Canvas到相机的距离
   当SortingLayer和Order In Layer相同时，距离相机越近，显示越靠前（满足相机渲染关系）
6. Sorting Layer：排序层（多层Canvas中间加粒子）
   建立排序层
   
   建立顺序
   
   修改Sorting Layer
   特效的调整（粒子）
   粒子中，Render选项，调整Sorting Layer值为粒子层次值
7. Order in layer
   先通过Sorting Layer，再根据排序层，调整顺序（越大越靠前）
8. 排序关系
   排序层一致时，Order in layer越大越靠前
   Sorting Layer：配置的排序层顺序，越靠下，显示越靠前
9. 双相机叠加
   1. 建立Camera
   2. 将UI相机拖给Canvas
   3. 将UI的相机设置为使用深度值填充，UI相机的深度要高于主相机
   4. 将主相机不渲染UI元素，将UI相机只渲染UI元素（Culling Mask）

World Space 世界空间模式

• World Space 世界空间模式：画布渲染于世界空间，与场 景中其他3D物体性质相同。

Canvas Scaler(Canvas缩放)

参考https://docs.unity3d.com/cn/current/Manual/script-CanvasScaler.html

属性

属性：	功能：
UI Scale Mode	确定画布中的 UI 元素的缩放方式。
- Constant Pixel Size	无论屏幕大小如何，UI 元素都保持相同的像素大小。
- Scale With Screen Size	屏幕越大，UI 元素越大。
- Constant Physical Size	无论屏幕大小和分辨率如何，UI 元素都保持相同的物理大小。

Ui Scale Mode应用场景

• Ui Scale Mode：UI 缩放模式/拉伸类型
• Constant Pixel Size：像素大小始终不变，即一个100100的图片在任何的分辨率下都占用100100的像素。
  一般PC上会使用这种方式，因为PC端分辨率差异并不大。

属性：	功能：
Scale Factor	按此系数缩放画布中的所有 UI 元素。
Reference Pixels Per Unit	如果精灵具有此“Pixels Per Unit”设置，则精灵中的每个像素将覆盖 UI 中的一个单位。

• Scale With Screen Size：不关心图片的实际像素大小，而只关心Width及Height值，这个值如果是1000，那么100高度的图片在任何分辨率下都只占用屏幕1/10的尺寸。
  一般移动端会使用这种方式，因为移动端分辨率差异较大。

*属性：*	*功能：*
Reference Resolution	UI 布局设计的目标分辨率。如果屏幕分辨率较大，则 UI 会放大，如果较小，则 UI 会缩小。
Screen Match Mode	在当前分辨率的宽高比不适应参考分辨率时，用于缩放画布区域的模式。
- Match Width or Height	以宽度、高度或二者的某种平均值作为参考来缩放画布区域。
- Expand	水平或垂直扩展画布区域，使画布不会小于参考。
- Shrink	水平或垂直裁剪画布区域，使画布不会大于参考。
Match	确定是否以宽度、高度或二者的某种平均值作为参考进行缩放。
Reference Pixels Per Unit	如果精灵具有此“Pixels Per Unit”设置，则精灵中的每个像素将覆盖 UI 中的一个单位。

• Constant Physical Size：根据物理单位来进行缩放。根据英寸进行拉伸计算。

*属性：*	*功能：*
Physical Unit	用于指定位置和大小的物理单位。
Fallback Screen DPI	在屏幕 DPI 未知时采用的 DPI。
Default Sprite DPI	用于精灵的每英寸像素，使其“Pixels Per Unit”设置与“Reference Pixels Per Unit”设置匹配。
Reference Pixels Per Unit	如果精灵具有此“Pixels Per Unit”设置，则其 DPI 将与“Default Sprite DPI”设置匹配。

Graphic Raycaster

• 场景中的射线调整，用于交互事件的配置。

EventSystem

• 事件检测系统，如果要发生点击事件，必须在层级试图添加该对象

Rect Transform 矩形变换

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

  参考https://docs.unity3d.com/cn/current/Manual/class-RectTransform.html

属性

属性：	功能：
Pos (X, Y, Z)	矩形轴心点相对于锚点的位置。轴心点是矩形旋转所围绕的位置。
Width/Height	矩形的宽度和高度。
Left, Top, Right, Bottom	矩形边缘相对于锚点的位置。可视为由锚点定义的矩形内的填充。当锚点分离时（见下文）将取代 Pos 和 Width/Height 显示。要访问这些选项，请单击 RectTransform 组件左上方的 Anchor Presets 方框。
Anchors	矩形左下角和右上角的锚点。
- Min	矩形左下角的锚点，定义为父矩形大小的一个比例。0,0 相当于锚定到父项的左下角，而 1,1 相当于锚定到父项的右上角。
- Max	矩形右上角的锚点，定义为父矩形大小的一个比例。0,0 相当于锚定到父项的左下角，而 1,1 相当于锚定到父项的右上角。
Pivot	矩形旋转围绕的轴心点的位置，定义为矩形本身大小的一个比例。0,0 相当于左下角，而 1,1 相当于右上角。
Rotation	对象围绕其轴心点沿 X、Y 和 Z 轴的旋转角度（以度为单位）。
Scale	在 X、Y 和 Z 维度中应用于对象的缩放因子。
Blueprint Mode	编辑 RectTransform，就好像它们没有旋转和缩放一样。这也会启用贴靠。
Raw Edit Mode	启用此属性后，编辑轴心和锚点值不会反向调整矩形的位置和大小来使矩形保持在同一个位置。

Text 文本

https://docs.unity3d.com/cn/current/Manual/script-Text.html

富文本语法

Unity中富文本语法

<b>粗体</b>
<i>斜体</i>
<size=14>字号</size>
<color=green>颜色</color>

属性

属性：	功能：
Character	字符
Font	用于显示文本的字体。
Font Style	应用于文本的样式。选项包括 Normal、Bold、Italic 和 Bold And Italic。
Font Size*	显示的文本的大小。
Line Spacing*	文本行之间的垂直间距。
Rich Text	文本中的标记元素是否应解释为富文本样式？
Paragraph	段落
Alignment	文本的水平和垂直对齐方式。
Align by Geometry	使用字形几何形状的范围（而不是字形指标）执行水平对齐。
Horizontal Overflow	用于处理文本太宽而无法放入矩形内的情况的方法。提供的选项为 Wrap 和 Overflow。
Vertical Overflow	用于处理换行文本太高而无法放入矩形内的情况的方法。提供的选项为 Truncate 和 Overflow。
Best Fit*	Unity 应该忽略大小属性并尝试直接将文本放入控件的矩形？
Color	用于渲染文本的颜色。
Material	用于渲染文本的材质。

Image 图片

https://docs.unity3d.com/cn/current/Manual/script-Image.html

属性

属性：	功能：
Source Image	表示要显示的图像的纹理（必须作为精灵导入）。
Color	要应用于图像的颜色。
Material	用于渲染图像的材质。
Raycast Target	如果希望 Unity 将图像视为射线投射的目标，请启用 Raycast Target。
Preserve Aspect	确保图像保持其现有尺寸。
Set Native Size	将图像框的尺寸设置为纹理的原始像素大小。

属性：	功能：
Image Type	贴图类型
Simple	简单
- Preserve Aspect	保持贴图原始比例
- Set Native Size	将贴图设置为原始尺寸
Sliced	切割
- Fill Center	填充中部区域，如果取消中部区域为透明
Tiled	平铺
	保持图片原始尺寸，从左下角重复多次填充空白

Raw Image 原始图片

https://docs.unity3d.com/cn/current/Manual/script-RawImage.html

属性

属性：	功能：
UV Rectangle	图像在控件矩形内的偏移和大小，以标准化坐标（范围 0.0 到 1.0）表示。图像边缘将进行拉伸来填充 UV 矩形周围的空间。

• P.S. 使图片的一部分显示在Raw Image组件里。X和Y属性指定图片左下角的位置，w和h属性指定图片右上角的位置

属性：	功能：
UV Rectangle	图像在控件矩形内的偏移和大小，以标准化坐标（范围 0.0 到 1.0）表示。图像边缘将进行拉伸来填充 UV 矩形周围的空间。

实例-使用Raw Image制作小地图

使用Raw Image制作小地图

• 添加Mask 遮罩组件

  属性：	功能：
  Mask	遮罩
  Show Mask Graphic	是否显示父级图片

1. 制作一个小地图
2. 将相机放置在地图的正上方，可以设置Culling Mask（遮挡剔除）
3. 创建一张Render Texture，将Target Texture属性指向这张纹理
4. 创建UI面板，创建Raw Iamge，将Raw Image下的Texture属性指向小地图纹理即可
5. 如果要制作圆形的小地图，可以为Raw Image添加Iamge为父物体，为Image添加Mask（遮罩），然后为Image选择图片就可以实现

Button 按钮

https://docs.unity3d.com/cn/current/Manual/script-Button.html

属性

*属性：*	*功能：*
Interactable	如果想要此按钮接受输入，请启用 Interactable。请参阅关于 Interactable 的 API 文档以了解更多详细信息。
Transition	确定控件以何种方式对用户操作进行可视化响应的属性。请参阅过渡选项。
Navigation	确定控件顺序的属性。请参阅导航选项。

Transition

*过渡选项：*	*功能：*
None	此选项用于使按钮完全没有状态效果。
Color Tint	根据按钮所处的状态更改按钮的颜色。可为每个单独的状态选择颜色。还可在不同状态之间设置 Fade Duration 属性。数字越大，颜色之间的淡入淡出越慢。
Sprite Swap	允许根据按钮当前的状态显示不同的精灵，并可自定义精灵。
动画 (Animation)	允许根据按钮的状态产生动画，必须存在动画器组件才能使用动画过渡。确保禁用根运动非常重要。要创建动画控制器，请单击 Generate Animation（或自行创建），并确保已将动画控制器添加到按钮的动画器组件。

Color Tint

*属性：*	*功能：*
Target Graphic	用于交互组件的图形。
Normal Color	控件的正常颜色
Highlighted Color	控件突出显示时的颜色
Pressed Color	控件按下时的颜色
Disabled Color	控件禁用时的颜色
Color Multiplier	这会将每个过渡的着色颜色乘以其值。由此可以创建大于 1 的颜色，从而使基色小于白色（或小于完整 Alpha）的图形元素上的颜色（或 Alpha 通道）变亮。
Fade Duration	从一个状态淡入淡出到另一个状态所需的时间（以秒为单位）

Sprite Swap

*属性：*	*功能：*
Target Graphic	要使用的正常精灵
Highlighted Sprite	控件突出显示时要使用的精灵
Pressed Sprite	控件按下时要使用的精灵
Disabled Sprite	控件禁用时要使用的精灵

Animation

*属性：*	*功能：*
Normal Trigger	要使用的正常动画触发器
Highlighted Trigger	控件突出显示时要使用的触发器
Pressed Trigger	控件按下时要使用的触发器
Disabled Trigger	控件禁用时要使用的触发器

事件

*属性：*	*功能：*
On Click	用户单击按钮再松开时 Unity 调用的 UnityEvent。

制作按钮

• 使用Image或Text制作Button按钮

Toggle 开关

https://docs.unity3d.com/cn/current/Manual/script-Toggle.html
属性

  Is On                       复选框的选中状态
  Toggle Transition  状态改变时,是否启动过渡效果
  Graphic                  切换的背景图片
  Group                     单选组

Slider 滑动条

https://docs.unity3d.com/cn/current/Manual/script-Slider.html

属性

  Fill Rect                         填充矩形区域
  Handle Rect                 手柄矩形区域
  Direction                      手柄方向
  Min / Max Value          最小/最大值
  Whole Numbers          整数数值
  Value                             数值
  

Scrollbar 滚动条

https://docs.unity3d.com/cn/current/Manual/script-Slider.html

属性

Size                              手柄大小
Number of Steps         从开始滑动到末尾的步骤

Dropdown 下拉框

https://docs.unity3d.com/cn/current/Manual/script-Slider.html

属性

   Template                          模板
   Caption  Text                 标题文本
   Caption   Image            标题图片
   Item      Text                  下拉列表中的文本
   Item       Image             下拉列表中的图片
   Value                             下拉列表选项对应的值
   Options                         下拉列表中的文字和图片

InputField 输入框

https://docs.unity3d.com/cn/current/Manual/script-Slider.html

属性

Character Limit 字符数量限制
Content Type 内容类型
Standard 标准 Autocorrected 自动验证
Integer Number 数字 Decimal Number 小数
Alphanumeric 字母数字 Name 姓名
Email Address 邮件地址 Password 密码
Pin 仅输入整数，用*隐藏字符
Custom 自定义

Panel 面板

https://docs.unity3d.com/cn/current/Manual/script-Slider.html

实质就是一张透明度为100的Image

Scroll View 滑动视图

https://docs.unity3d.com/cn/current/Manual/script-Slider.html

属性

ViewPort Content         用来存放内容

ScrollBar Horizontal 水平的滚轮
ScrollBar Vertical 垂直的滚轮
Visiblity 层级显示
Spacing 间隔

- Word M3W1 - [Unity知识点详解-UI渲染排序总结](https://blog.csdn.net/huoyixian/article/details/106078159)