Unity UI——UGUI

包名：com.unity.ugui

Canvas:

  容纳所有UI元素的区域。

  一种带有画布组件的游戏对象。

  使用EventSystem对象来协助消息系统。

绘制顺序：

按照在 Hierarchy 中显示的顺序绘制，由上到下。

如果两个 UI 元素重叠，则后一个元素将显示在前一个元素之上

渲染模式：(Render Mode)

Screen Space-Overlay:此渲染模式将 UI 元素放置于在场景之上渲染的屏幕上。如果调整屏幕大小或更改分辨率，则画布将自动更改大小来适应此情况。

Screen Space-Camera:UI 元素由此摄像机渲染，这意味着摄像机设置会影响 UI 的外观。如果调整屏幕大小、更改分辨率或摄像机视锥体发生改变，则画布也将自动更改大小来适应此情况。

World Space:画布大小可用矩形变换进行手动设置，而 UI 元素将基于 3D 位置在场景中的其他对象前面或后面渲染。此模式对于要成为世界一部分的 UI 非常有用。这种界面也称为“叙事界面”。

基本布局：锚点

矩形的不同角可以锚定到父矩形中的不同点。

锚点的位置以父矩形宽度和高度的分数（或百分比）定义。

如果在拖动锚点时按住 Shift 键，矩形的相应角将与锚点一起移动。

左下角锚点位置百分比为(0,0)

Anchor Min:左下角的锚点手柄

Anchor Max:右上角的锚点手柄 锚点在一起：产生固定的宽高，显示的字段为 Pos X、Pos Y、Width 和 Height。Pos X 和 Pos Y 值指示枢轴相对于锚点的位置。 锚点分开：和父矩形一起拉伸,字段可以部分或全部更改为“左”、“右”、“上”和“下”。这些字段定义由锚点定义的矩形内的填充。如果锚点水平分离，则使用“左”和“右”字段，如果垂直分离，则使用“顶部”和“底部”字段。

Image: (图像) Type:

• Simple:均匀缩放整个精灵

• Sliced:使用3*3分区，拉伸中心部分

• Tiled:类似Slided,平铺中心部分

• Filled:与Simple相同的显示方式，可以规定显示方式、开始方向、显示百分比来控制精灵填充显示

Sprite Editor能够将图像分成9个区域。

Toggle Group:(开关组) 创建：为已创建的Toggle创建一个Empty Parent，为其添加Toggle Group组件。 Allow Switch Off:是否允许选择的开关关闭

动画集成:可以使用Unity的动画系统完全的动画化控件不同状态之间的过渡。

使用：

1. Transition属性 ->Animation

2. 将动画器组件附加到控制器元素 单击“Auto Generate Animation”，会生成一个动画控制器

3. 自定义动画 Window>Animation打开编辑

   1. 点击录制按钮

   2. 添加关键帧

   3. 退出录制

ps:任何数量的属性都可以在这一个关键帧中设置其参数。

自动布局:布局元素 + 布局控制器

布局元素：具有矩形变换以及其他可选组件的游戏对象

  布局元素不直接设置自身的大小，而是可由用作布局控制器的其他组件使用布局元素提供的信息来计算布局元素要使用的大小。

属性：

• 最小大小(Min Width、Min Height),常规单位

• 偏好大小(Preferred Width、Preferred Height),常规单位

• 灵活大小(Flexible Width、Flexibe Height),相对单位（同级填充的可用空间比例）

ps:

• 完全分配所有偏好大小之后，才分配灵活大小。

• 指定了灵活大小但未指定偏好大小的布局元素将保持其最小大小，直到其他布局元素已扩展到完整偏好大小为止，仅在此后才基于额外的可用空间开始扩展。

布局控制器:可以控制自己的布局元素（其本身所在的同一游戏对象），或者也可控制子布局元素。

用作布局控制器的组件本身也可以同时用作布局元素。

Aspect Ratio Fitter:(宽高比适配器) Aspect Mode:

• None:不适应宽高比

• Width Controls Height:根据宽度自动调整高度

• Height Controls Width:根据高度调整宽度

• Fit In Parent:使矩形适应父项的矩形，同时保持宽高比。父矩形中可能有一些空间不会由此矩形覆盖。（contain ）

• Envelope Parent:自动调整宽度、高度、位置和锚点，使矩形覆盖父项的整个区域，同时保持宽高比。此矩形可能比父矩形延伸更广。（cover）

布局组：水平布局组、垂直布局组、网格布局组

富文本:类似HTML

We are <b>absolutely <i>definitely</i> not</b> amused

ps:标签参数不能包含空格。

Unity支持的所有标签

标签	描述	示例	注意事项
b	以粗体显示文本。	We are <b>not</b> amused.
i	以斜体显示文本。	We are <i>usually</i> not amused.
size	根据参数值设置文本的大小（以像素为单位）。	We are <size=50>largely</size> unaffected.	尽管此标签可用于 Debug.Log，但如果大小设置得太大，您会发现窗口栏和控制台中的行间距看起来很奇怪。
color	根据参数值设置文本的颜色。可使用传统的 HTML 格式指定颜色。#rrggbbaa …其中的字母对应于十六进制数字对，表示颜色的红、绿、蓝和 Alpha（透明度）值。例如，完全不透明的青色将指定为 color=#00ffffff… 可通过大写或小写形式指定十六进制值；#FF0000 等效于 #ff0000。	We are <color=#ff0000ff>colorfully</color> amused	另一种选择是使用颜色的名称。这种方法更容易理解，但当然，颜色范围受限，并始终假设颜色完全不透明。<color=cyan>some text</color> 下表中列出了可用的颜色名称。
material	这仅对文本网格有用，使用参数指定的材质渲染文本部分。值为 Inspector 显示的文本网格材质数组的索引。	We are <material=2>texturally</material> amused
quad	这仅对文本网格有用，渲染与文本内联的图像。采用指定图像材质的参数、图像高度参数（以像素为单位）以及另外四个表示待显示图像的矩形区域的参数。与其他标签不同，quad 不会包裹一段文本，因此没有结束标签；斜杠字符放在初始标签的末尾，表示“自动关闭”。	<quad material=1 size=20 x=0.1 y=0.1 width=0.5 height=0.5>	这将选择渲染器材质数组中位置的材质，并将图像的高度设置为 20 像素。图像的矩形区域由 x、y、宽度和高度值决定，这些值全部表示为纹理的未缩放宽度和高度的一定比例

支持的颜色

下表列出了可以在 <color> 富文本标签中使用名称而不是十六进制值的颜色。

颜色名称	十六进制值
aqua（等同于 cyan）	#00ffffff
black	#000000ff
blue	#0000ffff
brown	#a52a2aff
cyan（等同于 aqua）	#00ffffff
darkblue	#0000a0ff
fuchsia（等同于 magenta）	#ff00ffff
green	#008000ff
grey	#808080ff
lightblue	#add8e6ff
lime	#00ff00ff
magenta（等同于 fuchsia）	#ff00ffff
maroon	#800000ff
navy	#000080ff
olive	#808000ff
orange	#ffa500ff
purple	#800080ff
red	#ff0000ff
silver	#c0c0c0ff
teal	#008080ff
white	#ffffffff
yellow	#ffff00ff

事件系统:事件系统模块之间通信的管理器和协调器

主要作用：

• 管理视为选中状态的游戏对象

• 管理正在使用的输入模块

• 管理射线投射（如果需要）

• 根据需要更新所有输入模块

消息系统：https://docs.unity.cn/cn/2022.3/Manual/MessagingSystem.html

输入模块：

• 独立输入模块(Standalone Input Module)

• 触摸输入模块 (TouchInputModule) ：已弃用

支持的事件：

• IPointerEnterHandler - OnPointerEnter - 当指针进入对象时调用

• IPointerExitHandler - OnPointerExit - 当指针退出对象时调用

• IPointerDownHandler - OnPointerDown - 在对象上按下指针时调用

• IPointerUpHandler - OnPointerUp - 松开指针时调用（在指针正在点击的游戏对象上调用）

• IPointerClickHandler - OnPointerClick - 在同一对象上按下再松开指针时调用

• IInitializePotentialDragHandler - OnInitializePotentialDrag - 在找到拖动目标时调用，可用于初始化值

• IBeginDragHandler - OnBeginDrag - 即将开始拖动时在拖动对象上调用

• IDragHandler - OnDrag - 发生拖动时在拖动对象上调用

• IEndDragHandler - OnEndDrag - 拖动完成时在拖动对象上调用

• IDropHandler - OnDrop - 在拖动目标对象上调用

• IScrollHandler - OnScroll - 当鼠标滚轮滚动时调用

• IUpdateSelectedHandler - OnUpdateSelected - 每次勾选时在选定对象上调用

• ISelectHandler - OnSelect - 当对象成为选定对象时调用

• IDeselectHandler - OnDeselect - 取消选择选定对象时调用

• IMoveHandler - OnMove - 发生移动事件（上、下、左、右等）时调用

• ISubmitHandler - OnSubmit - 按下 Submit 按钮时调用

• ICancelHandler - OnCancel - 按下 Cancel 按钮时调用

射线投射器:(Raycaster)

• Graphic Raycaster(图形射线投射器):用于 UI 元素，位于画布上，并在画布中搜索

• Physics 2D Raycaster(2D 物理射线投射器):用于 2D 物理元素

• Physics Raycaster(物理射线投射器):用于 3D 物理元素

设计用于多种分辨率的 UI:

• 确定位置：使用锚点来适应不同的宽高比

• 大小缩放：画布缩放器 (Canvas Scaler)，随屏幕大小缩放(Scale With Screen Size)

画布缩放器

属性：

UI Scale Model：（确定画布中的 UI 元素的缩放方式）

• Constant Pixel Size:无论屏幕大小如何，UI 元素都保持相同的像素大小。

• Scale With Screen Size:屏幕越大，UI 元素越大。

• Constant Physical Size:无论屏幕大小和分辨率如何，UI 元素都保持相同的物理大小。

Scale With Screen Size：

原理：默认将宽度或当前分辨率与画布缩放器的宽度比较，将结果作为所有内容的的缩放因子.

目前横向分辨率 960 x 640 的宽度是纵向画布缩放器 640 x 960 的 1.5 倍，因此布局的比例增大到了 1.5。

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

使 UI 元素适应其内容的大小:内容大小适配器 (Content Size Fitter)

原理：文本组件充当布局元素，可提供有关最小大小和偏好大小的大小信息。在手动布局中，不会使用此信息。内容大小适配器是一种布局控制器，可监听布局元素提供的布局信息，并根据此信息控制矩形变换的大小。

适应其内容的大小的同时添加填充：水平布局组/垂直布局组 + 内容大小适配器

• 将 Horizontal Fit 和/或 Vertical Fit 设置为 Preferred 设置。

• 使用水平布局组/垂直布局组中的填充属性来添加和调整填充。

原理：

1. 布局组会监听该组内的子项提供的布局信息。布局组将确定该组必须为多大（最小大小和偏好大小）才能够包含所有子项，并充当布局元素来提供这些有关最小大小和偏好大小的信息。

2. 内容大小适配器会监听同一游戏对象上的任何布局元素提供的布局信息，此处由水平（或垂直）布局组提供。根据设置，内容大小适配器随后会基于此信息控制矩形变换的大小。

使布局组的子项适应各自的大小：禁用布局组上的 Child Force Expand 开关。如果子项本身也是布局组，可能还需要禁用这些子项上的 Child Force Expand 开关。

原理:一个游戏对象可以有多个组件，每个组件都提供有关最小大小、偏好大小和灵活大小的布局信息。优先级系统将确定哪些值优先于其他值。布局元素组件的优先级高于文本、图像和布局组组件，因此可用于覆盖它们提供的任何布局信息值。

如果希望某些子项进行扩展以便填充额外的可用空间，而其他子项不扩展，该怎么办？

向需要扩展的子项添加布局元素组件并在这些布局元素上启用 Flexible Width 或 Flexible Height 属性，即可轻松控制此行为。父布局组仍应禁用 Child Force Expand 开关，否则所有子项将灵活扩展。

原理：布局组监听子项提供的布局信息时，还会考虑覆盖的灵活大小。然后，在控制子项的大小时，布局组不会让子项的大小超过偏好大小。但是，如果布局组启用了 Child Force Expand 选项，则始终会使所有子项的灵活大小至少为 1。

通过脚本创建UI元素: https://docs.unity.cn/cn/2022.3/Manual/HOWTO-UICreateFromScripting.html

1. 创建预制体

2. 实例化：Instantiate方法，在设置实例化的 UI 元素的父项时，建议使用 Transform.SetParent 方法并将 worldPositionStays 参数设置为 false。

3. 定位：借助其矩形变换 (Rect Transform) 定位

4. 自定义：获取各种组件并更改其属性

创建屏幕过度:动画控制器 + 两个状态（Open/Closed）+ 布尔参数（Open）

管理屏幕(Scene):SceneManager

查看Scene索引：File—>Build setting

使用LoadScene加载Scene

//第二个参数AddSceneMode.Additive表示当前场景不销毁，并加载需要的场景

SceneManager.LoadScene("SceneName", LoadSceneMode.Additive);

//LoadSceneMode.Single:销毁当前场景，加载要加载的场景

SceneManager.LoadScene(Scene索引,LoadSceneMode.Single);