Unity3D_UGUI入门

什么是UI

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

---

什么是UGUI

UGUI 是Unity 官方推出的最新UI系统。它从 Unity 4.6 开始，被集成到 Unity 的编辑器中。相较于旧的 UI 系统，它绝对属于一个巨大的飞跃！因为只要有过旧 UI 系统使用体验的开发者，大部分都对它没有任何好感，以至于在过去的很长一段时间里，大家都在使用资源商店（Asset Store）里，由第三方开发者开发的付费插件 NGUI，实现游戏中与 UI 相关的功能部分。

---

UGUI的优点

新的 UI 系统，有以下三个优点： 
灵活 
快速 
可视化

这对于开发者而言，带来的好处是： 
运行效率高， 
执行效果好易于使用， 
方便扩展（新 UI 系统代码开源）与 Unity 的兼容性高

---

UGUI基础

• 画布Canvas 
  Canvas就类似我们的作画的画布，而在Canvas上的控件，则类似画布上的图画，画布是画的载体，同时我们也可以Canvas也是控件的载体 
  所有的UI都应该放在Canvas里面(子层)。Canvas是一个带有Canvas组件的Game Object。 
  所有的UI都应该是Canvas的孩子(子层;子节点)

• 设置自适应

• UI控件的绘制顺序 
  UI元素绘制顺序和在Hierarchy(层级视图)中的顺序。后面的将在更早的上面绘制。改变元素的层级关系(绘制顺序，上下关系),可以通过拖拽，进行简单的排序。也可以通过脚本:使用使用Transform组件上的方法:SetAsFirstSibing,SetAsLastSibing和SetSiblingIndex。

• 绘制模式 
  1.在screen空间中渲染 
  2.在world空间中渲染

  Screen Space-Overlay 
  在这个渲染模式中，UI元素将在场景的上面。如果场景改变大小或改变分辨率，Canvas将自动改变大小去适配。

  Screen Space-Camera 
  这和Screen Space-Overlay类似，但是在这个模式中，这个Canvas放置在了给定距离的摄像机的前面。这些UI元素都是通过摄像机绘制的。这意味着摄像机影响UI的外观。如果摄像机设置为Perspective(透视视角)，UI元素将会通过透明视角渲染，通过摄像机可视区域控制。 
  如果屏幕改变大小或改变分辨率，或摄像机frustrum改变，Canvas将自动改变大小去适配。

  World Space 
  在这个绘制模式中，Canvas将和场景中的其他对象一样显示。Scene可以通过手动设置Rect Transform 来控制大小。在场景中，UI元素将绘制在其他基于3D放置的对象的钱前面或后面。对于UI作为世界的一部分是有用的。也被称为”diegetic interface”。

• UI控件的布局 
  在“画布”上“绘制”的 UI 控件，除了要考虑上一节介绍到的 绘制顺序以外，还需要考虑它们的布局问题，以及当布局不符合开发者预期时的处理方法。接下来我们介绍一个工具Rect Tool，让开发者有了直接操作 UI 控件的能力。另外还要介绍一个组件——RectTransform，让 UI 控件有了“自适应”的本事！

• Rect Tool小工具 
  Rect Tool是新版本 Unity 编辑器（Unity 4.6）在工具栏上添加的一个新按钮，位于界面左上角，如图 
   
  提示： 
  Rect Tool 不单单专用于操作 UI 控件，实际上它可以被用于操作任何游戏对象。只不过这个工具是在 UI 系统加入的时候一并被添加进来的。Rect Tool 可以对 UI 控件展开下列操作： 
  改变位置：将鼠标置于 UI 控件矩形框的内部，按下鼠标左键任意拖动，即可改变UI 控件的位置，如图所示。 
   
  改变大小：将鼠标置于 UI 控件矩形框上，待鼠标变成双向的箭头，按下鼠标左键拖动，即可改变 UI 控件的大小 
  旋转：将鼠标移动到 UI 控件矩形框靠近 4 个角的外部，待鼠标出现一个旋转的标志，按下鼠标左键拖动，即可令 UI 控件旋转 
  
• RectTransform组件 
  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属性 
  Rect Transform是专为UI元素准备的，它的一个重要属性就是锚点Anchors，用于指定自身相对父级的布局。对于这个UI元素，它的父级就是Canvas。锚点一共有四个，分别对应自身矩形的四个顶点。在父级元素形状发生变化时，四个锚点到四个顶点的偏移offset不变。

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

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

---

可视功能的UI组件

在介绍 UI 系统的 UI 控件之前，同学们首先应该有一个这样的认识：UI 控件之所以在游戏场景中是可见的，是因为 UI 控件上有一些特定功能的 UI 组件！ 
接下来就来介绍这些为UI控件提供了可视功能的UI 组件。

• Text控件 
  Text（Script）组件的文字显示效果，如图所示。该组件用于向玩家显示不可交互的文本信息。玩家无法修改、删除其中的文本，只能从中了解信息。 
   
  注意：Text（Script）组件只包括可见的文字，它的背景是透明的。 
   
  Text：此属性中的内容，就是 Text(Script)组件要显示的文本信息 
  Color：用于设置文字的颜色 
  Material：用于设置文字的材质。注意：游戏场景中的文字控件本身就是一个游戏对象，当前就可以设置它的材质属性了。

  Character 表示接下来的属性负责设置字符的格式： 
  Font：用于设置文本信息的字体格式； 
  Font Style：用于设置文本信息的样式，可选择的样式有：Normal（正常）、Bold（加粗）、Italic（倾斜）和 Bold And Italic（倾斜并加粗），如图所示 
   
  Line Spacing：用于设置文字的行间距 
   
  Rich Text：决定文本中的标记元素是否可用 
   
  提示：Text 属性中的< b>和< /b>就是“标记元素” 
  Paragraph 表示接下来的属性负责设置字符构成的段落的格式： 
  Alignment：用于设置段落的对齐方式 
   
  Horizontal Overflow：当段落内容的宽度大于 Text(Script)组件本身的宽度时，处理段落内容有两种可选的方式，分别为 Wrap（换行）和 Overflow（溢出）。效果如图 
   
  Horizontal Overflow:Wrap 
   
  Horizontal Overflow:Overflow 
  Vertical Overflow：当段落内容的高度大于 Text(Script)组件本身的高度时，处理段落内容有两种可选的方式，分别为 Truncate（截断）和 Overflow（溢出）。 
  

  Best Fit：是否应该忽略对文字大小的设置，让字体的大小自动改变到能让段落的内容全部显示出来的状态，效果如图 
  

• Image控件 
  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 个切片组成的，如图 1所示。而图片控件将只显示中间切片的边缘，如图 2 所示，若此时选中了 Fill Center 属性，那么将显示完整的中间切片，如下图所示。 
   
   
  Tiled：此种类型的 Sprite 一般尺寸较小，如图 1 所示。为使此 Sprite 填满整个图片控件，就会在保持 Sprite 尺寸不变的前提下不断重复，就像是在铺地板砖一样，如下图所示。 
   
  Filled：此种类型的 Sprite 与 Simple 相似，但是它可以表现出一种“从无到有”的呈现过程，如图所示。 
   
  “呈现方式”也叫“填充方式”，由 Fill Method 属性决定，可选项有 Horizontal、Vertical、Radial 90、Radial 180 和 Radial 360, Fill Origin 决定了填充操作的起点，Fill Amount 决定了填充的进度。 
   
  Set Native Size：单击此按钮，将使得图片控件的大小主动调节到与 Sprite 原始大小 一致，如图所示。 
  

• RawImage控件 
  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组件 
  拥有Mask(Script)组件的 UI 控件，可以限制其子对象的显示范围，即当子对象的显示范围明显大于父对象的显示范围时，游戏视图就只显示父对象范围内的子对象，其它部分自动隐藏。父对象是 Panel，子对象是 Image，为前者添加 Mask(Script)组件，作用效果如图 
  
  注意：添加了 Mask(Script)组件的游戏对象，要想发挥出此组件的效果，要求此对象上必须包含 Image(Script)组件。如图所示，查看 Panel 上的所有组件，可以看到它默认就有 Image(Script)组件，所以才能发挥出 Mask(Script)组件的遮罩效果。 
   
  Show Mask Graphic：此属性决定是否显示父对象上的图片，效果如图所示 
  

---