Unity入门操作_ UGUI_ 基础组件_024

UI即User Interface（用户界面）的简称
好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

画布Canvas
Canvas是Unity新UI系统里的游戏对象，可以译为“画布”。UI 系统中所有的 UI 控件都应该被“绘制”在它的上面，也就是说所有的 UI 控件都应该是它的子对象。
注意：若是开发者在未创建 Canvas 的时候，就先创建了其它的 UI 控件（例如 Image），那么 Unity 会自动为其创建 Canvas，并将新创建的 UI 控件置于 Canvas 下，成为后者的子对象，如图所示。

在 Unity 中，单击 GameObject|UI|Canvas 命令，即可在 Hierarchy 视图里创建名为 Canvas的游戏对象。游戏对象 Canvas 上，还有一个同名的组件，如图

看Canvas Scaler。UGUI在处理自适应。

UI Scale Mode :Scale With Screen Size 表示以宽度为标准缩放

Canvas Scaler 选择
Scale With Screen Size,
Screen Match Mode 选择 Match Width Or Height，比例设为1，即只和高度进行适配；

Canvas Scaler：
这是一个理解起来相当繁琐复杂的一个组件，但又是一个至关重要的组件，不彻底了解它，可以说对UGUI的布局和所谓的“自适应”就没有一个完整的认识。

Canvas Scale指的是UI Canvas整体的缩放比例，
这个值在Canvas 的Render Mode为 Screen Space – Overlay 的情况下默认为1，在 Canvas 的 Render Mode 为 Screen Space – Camera 的情况下则不一定为1，会受到渲染UI的摄像机 参数影响（如果为Perspective 相机，会受到 Field Of View影响，如果是 Orthographic相机，会受到 Size影响）。

Canvas Scaler存在的意义：为了适应不同的分辨率，我们可能会允许适当的UI整体性缩放，外加一些尽可能少的布局微调。 这样就能达到一个比较理想的效果。如果没有这个组件，Canvas的Scale默认情况下永远固定不变，那么分辨率变化时，只能单纯依靠锚点信息去调整UI，会对整体布局产生较大的影响，不能够达到“自适应”的目的。

PixelPerfect(完美像素)指的是一个UI素材本身的像素对应屏幕上一个像素的情况，这种情况下UI素材映射到屏幕上时没有任何拉伸和压缩，这种情况下UI显示效果非常清晰完美。

Ui Scale Mode–Scale With Screen Size根据屏幕尺寸来调整UI的缩放值
Reference Resolution:参考分辨率，即一开始制作时选定的屏幕分辨率，后面的选项参数都是根据它来计算的。

Screen Match Mode—Match Width Or Height
Match是一个滑条，拉在最左时是Width ，最右时是Height，中间则是按比例混合。

当处于最左边时，屏幕高度对于UI大小完全没有任何影响，只有宽度会对UI大小产生影响。假设实际分辨率宽度为Reference Resolution宽度的x倍，则UI整体缩放为Reference Resolution状态下的x倍。也就是说只有宽度等于Reference Resolution宽度时，才能做到pixel perfect，否则像素就会有拉伸。
当处于最右边时，与上述情况正好相反，决定整体缩放值的是高度，而宽度则没有任何影响。

处于中间某处时，对上述两者的影响进行权重加成。
Screen Match Mode：Expand
当屏幕分辨率大于参考分辨率时，选择变化较小的一个方向（横向还是纵向），作为放大Canvas Scale的标准，另一方向上的变化则是在整体缩放以后再进行补偿性的变化。此举旨在减少扩大分辨率时由于非等比扩大而对UI整体布局造成影响。适合制作较小标准尺寸，扩充到较大屏幕。

例如：Reference Resolution为800*600，（假设此时Canvas Scale为(1,1,1)）。如果实际分辨率为800*800,那么Canvas Scale还保持为(1,1,1)因为宽度没有发生变化，只是单纯的高度增加了200。所以势必对布局造成一定得影响。1000*600的情况也是一样，Canvas Scale没有变化，只是单纯宽度增加了200。但如果实际分辨率变为1000*800,那么Canvas Scale就变成(1.25,1.25,1.25)。因为宽度是参考分辨率宽度的1.25倍，高度是1.33倍，那么取较小的1.25。 这个1.25倍的意义是：整体Canvas渲染放大1.25倍，横向或纵向的变化超过了1.25倍，则靠拉伸Canvas来变化，此时因为这部分变化，可能会对布局产生一些相对较小的影响，例如相对位置、某些元素的长宽比。

Screen Match Mode：Shrink
和Expand类似，但是更适合于缩小的情形。它会在屏幕尺寸缩小时，通过缩小CanvasScale尽量减少由于非等比缩小对布局产生的影响。按照影响较小的一个方向缩小的比例去缩小CanvasScale，然后再通过变形调整另外一个方向。

Ui Scale Mode：Constant Pixel Size
固定的UI缩放值。

Scale Factor
直接设定UI的Canvas Scale，例如，设定为2，则Canvas Scale为标准状态下的2倍

Canvas 下的 UI 控件在游戏视图中的绘制顺序，是与它们在 Hierarchy 视图里的排列顺序一致的。也就是说 Canvas 的第一个子对象最先被绘制，接着绘制下一个子对象，依此类推，
注意：如果两个 UI 控件发生了重叠，那么先被绘制的 UI 控件，会被后绘制的 UI 控件覆盖。为了修改各 UI 控件的绘制顺序，开发者可以采用以下两种方法：
拖动 Hierarchy 视图里的各 UI 控件对象，改变它们在 Canvas 下的排列顺序在脚本代码中使用类 Transform 的 3 个方法：SetAsFirstSibling()、SetAsLastSibling()和 SetSiblingIndex()，各方法的使用说明

Canvas 组件上有一个名为 Render Mode（即“绘制模式”）的属性
1.Screen Space - Overlay 在此种绘制模式下，Canvas 下的 UI 控件会被绘制在游戏场景的最上层，而且在游戏视图的分辨率发生变化的时候，Canvas 的大小会随之一同发生改变

2.Screen Space – Camera 在此种绘制模式下，Canvas 下的 UI 控件同样会被绘制在游戏场景的最上层，而且在游戏视图的分辨率发生变化的时候，Canvas 的大小会随之一同发生改变。但是此种模式还有更多的规则：Canvas 所在的平面，必须与一个指定的 Camera 保持固定的距离；而 Canvas下的所有 UI 控件，也将由此 Camera 负责绘制（同时也意味着对此 Camera 的设置，会影响到 UI 控件的绘制效果)
注意：当 Camera 处于 Perspective 的投影下，截头椎体（frustum）大小的改变，会影响到 Canvas 及其子对象 UI 控件大小的改变

3.World Space 在此种绘制模式下，Canvas 会位于游戏场景中所有游戏对象的最后面。而 Canvas 下的UI 控件，在游戏场景中的位置可以任意设置，如图 所示。

读者可以理解为 UI 控件被绘制在了游戏场景中。注意：此时 Canvas 及其子对象 UI 控件的大小，将不会再随着游戏视图分辨率的大小而改变了。Canvas 的大小只能有开发者自己手动去设置。设置方法是在 Inspector 视图里，设置 Canvas 对象 Rect Transform 组件的值，如图所示。

Rect Tool是新版本 Unity 编辑器（Unity 4.6）在工具栏上添加的一个新按钮，位于界面左上角，如图
提示：
Rect Tool 不单单专用于操作 UI 控件，实际上它可以被用于操作任何游戏对象。只不过这个工具是在 UI 系统加入的时候一并被添加进来的。Rect Tool 可以对 UI 控件展开下列操作：
改变位置：将鼠标置于 UI 控件矩形框的内部，按下鼠标左键任意拖动，即可改变UI 控件的位置，如图所示。
改变大小：将鼠标置于 UI 控件矩形框上，待鼠标变成双向的箭头，按下鼠标左键拖动，即可改变 UI 控件的大小
旋转：将鼠标移动到 UI 控件矩形框靠近 4 个角的外部，待鼠标出现一个旋转的标志，按下鼠标左键拖动，即可令 UI 控件旋转

Rect Transform组件是新版Unity为UI控件提供的新组件。它只在UI控件上取代Transform组件，而后者是其它任何游戏对象所必须的组件。如图所示，对比了Transform和 Rect Transform 组件。
Rect Transform 组件除了拥有 Transform 组件的位置（Position）、朝向（Rotation）和缩放（Scale）属性外，还纳入了更多的属性： Width、 Height、 Anchors、 Pivot 和 Anchor Presets。
Width 和 Height 用于表示 UI 控件的长和宽
Pivot 用于表示 UI 控件的轴心点，在 Scene 视图中用蓝色的空心小圆圈表示；当开发者对 UI 控件做旋转处理的时候， UI 控件旋转时所围绕的点就是轴心点。

Anchors 属性是重点，因此拿出来单独介绍。它本身在 Scene 视图中有专门的图标来表示，同时它还有自己的子属性，最后它还会影响除 Anchor 属性以外的其它属性。
Anchors 用于表示 UI 控件的锚点，在 Scene 视图中使用 4 个小三角表示。当 UI 控件的父对象也拥有 Rect Transform 组件的时候，锚点才会出现。锚点的 4 个小三角依次与 UI 控件四边形边框的四个角对应，且在父对象的大小发生改变时，锚点会令子对象自动完成自适应操作。例如，Button 的锚点位于 Canvas 的中央、两角和一边上时，那么当 Canvas 的大小发生改变的时候， Button 的自适应效果如图

锚点位于Canvas的中央，锚点的四个三角形与UI边框的四个角距离固定

Button 的锚点位于 Canvas 的两角（锚点的 4 个三角形，与 UI 控件边框的 4 个角的距离固定）

Button 的锚点位于 Canvas 的一边（锚点的 4 个三角形，与 UI 控件边框的 4 个角的距离固定)
注意：从锚点的位置所导致 UI 控件自适应的效果上来看，应该发现一个不变的真理，就是表示锚点的 4 个三角形，始终与 UI 控件边框 4 个角的距离是固定的。
单击 Rect Transform 组件里的 Anchors 属性左侧的小三角，可以展开此属性的子属性 Min 和 Max。 Min 记录的是 Anchors 左下角小三角的位置， Max 记录的是 Anchors右上角小三角的位置。
当表示 Anchors 的 4 个小三角处于同一位置的时候，Rect Transform 组件里就会出现我们前面一直在介绍的 Pos X、Pos Y、Width 和 Height 属性。Width 和 Height 我们前面介绍过了，而 Pos X 和 Pos Y 的值表示以 Anchors 为原点的 Pivot 的坐标


当表示 Anchors 的 4 个小三角不在一起的时候，这 4 个属性名就变成了 Left、 Top、Right 和 Bottom。它们分别表示 UI 控件的 4 条边，到 4 个三角形所构成矩形对应边的距离


Anchor Presets Anchor Presets 属性是一个“样子特殊的下拉列表”（九宫格），一般容易被忽略。但是如果灵活的使用它，可以为 UI 控件的布局提供大大的便利，因为它提前预置了常见的布局方式
Anchor Presets，此属性位于 Rect Transform 组件的左上角，使用鼠标单击那个正方形即可打开 Anchor Presets 属性，如图所示。此属性中预先定义了锚点的位置，开发者可以直接从预定义的锚点中选择。例如，将 Button 的锚点设置到左上角，效果如图

使用 Anchor Presets 属性也可以一并设置 UI 控件的 Pivot 和 Position 属性，只需要按下 Shift 和 Alt 键盘即可

UI 控件之所以在游戏场景中是可见的，是因为 UI 控件上有一些特定功能的 UI 组件！
Text（Script）组件的文字显示效果，如图所示。该组件用于向玩家显示不可交互的文本信息。玩家无法修改、删除其中的文本，只能从中了解信息。

注意：Text（Script）组件只包括可见的文字，它的背景是透明的。

Text：此属性中的内容，就是 Text(Script)组件要显示的文本信息
Color：用于设置文字的颜色
Material：用于设置文字的材质。注意：游戏场景中的文字控件本身就是一个游戏对象，当前就可以设置它的材质属性了。

Character 表示接下来的属性负责设置字符的格式：
Font：用于设置文本信息的字体格式；
Font Style：用于设置文本信息的样式，可选择的样式有：Normal（正常）、Bold（加粗）、Italic（倾斜）和 Bold And Italic（倾斜并加粗），
Line Spacing：用于设置文字的行间距
Rich Text：决定文本中的标记元素是否可用
提示：Text 属性中的和就是“标记元素”
Paragraph 表示接下来的属性负责设置字符构成的段落的格式：
Alignment：用于设置段落的对齐方式

Horizontal Overflow：当段落内容的宽度大于 Text(Script)组件本身的宽度时，处理段落内容有两种可选的方式，分别为 Wrap（换行）和 Overflow（溢出）。
Horizontal Overflow:Wrap
Horizontal Overflow:Overflow
Vertical Overflow：当段落内容的高度大于 Text(Script)组件本身的高度时，处理段落内容有两种可选的方式，分别为 Truncate（截断）和 Overflow（溢出）。
Best Fit：是否应该忽略对文字大小的设置，让字体的大小自动改变到能让段落的内容全部显示出来的状态，效果如图

Image(Script)组件的图片显示效果，所示。它用于向玩家显示不可交互的图片信息，常作为游戏场景的装饰。


Source Image：指定 Image(Script)组件要显示的图片；
注意：Image(Script)组件显示的图片必须是 Sprite 类型的。这就要求开发者在将这个图片导入到 Unity 中的时候，设置此图片的 Texture Type 属性为 Sprite(2D and UI)。
Color：设置图片的颜色；提示：对此属性的设置会改变图片显示的主色调，就像是在用有颜色的光照射图片。
Material：设置图片控件的材质；
Image Type 用于设置图片的显示类型，可选的属性值有 Simple、 Sliced、 Tiled 和 Filled。不同的图片显示类型，导致了 Sprite“填充”图片控件的不同方式。
Simple： Sprite 将直接显示在图片控件中。默认情况下，如果图片控件的大小与 Sprite不一致时，后者将经过拉伸处理来符合前者的大小，如图所示。但如果此时复选了Preserve Aspect属性，那么图片在经过缩放处理时，长宽的比例将保持恒定。
图片的显示类型：Simple（Sprite 长宽比例固定）
图片的显示类型：Simple（Sprite 长宽比例固定）
Sliced：Sprite 将被看作是由 9 个切片组成的，如图 所示。而图片控件将只显示中间切片的边缘，若此时选中了 Fill Center 属性，那么将显示完整的中间切片，如下图所示。

Tiled：此种类型的 Sprite 一般尺寸较小。为使此 Sprite 填满整个图片控件，就会在保持 Sprite 尺寸不变的前提下不断重复，就像是在铺地板砖一样，
Filled：此种类型的 Sprite 与 Simple 相似，但是它可以表现出一种“从无到有”的呈现过程，
“呈现方式”也叫“填充方式”，由 Fill Method 属性决定，可选项有 Horizontal、Vertical、Radial 90、Radial 180 和 Radial 360, Fill Origin 决定了填充操作的起点，Fill Amount 决定了填充的进度。

Set Native Size：单击此按钮，将使得图片控件的大小主动调节到与 Sprite 原始大小 一致。

Raw Image(Script)组件与 Image(Script)组件的功能类似，如下图所示，用于向玩家显示不可交互的图片信息，常作为游戏场景的装饰。但 Raw Image(Script)组件与 Image(Script) 组件上的属性并不完全一致，Raw Image(Script)组件如图


Raw Image(Script)组件各属性作用的说明如下：
Texture：指定 Raw Image(Script)组件要显示的图片；
注意：Raw Image(Script)组件所显示的图片，可以是任何类型，而不单单只是 Sprite 类型。
Color：设置图片的颜色；
提示：对此属性的设置，会改变图片显示的主色调，就像是在用有颜色的光照射图片。
Material：设置图片控件的材质；
UV Rect：令图片中的一部分显示在 Raw Image(Script)组件里。X 和 Y 属性指定图片左下角的位置，W 和 H 属性指定图片右上角的位置，如图所示。

拥有Mask(Script)组件的 UI 控件，可以限制其子对象的显示范围，即当子对象的显示范围明显大于父对象的显示范围时，游戏视图就只显示父对象范围内的子对象，其它部分自动隐藏。父对象是 Panel，子对象是 Image，为前者添加 Mask(Script)组件，作用效果如图

注意：添加了 Mask(Script)组件的游戏对象，要想发挥出此组件的效果，要求此对象上必须包含 Image(Script)组件。查看游戏对象上的所有组件，可以看到它默认的所有组件，如果有Image(Script)才能发挥出 Mask(Script)组件的遮罩效果。
Show Mask Graphic：此属性决定是否显示父对象上的图片，效果如图所示