Unity3D_UGUI入门

Myth丶恋晨 2022-05-30 08:24 363阅读 0赞

## 什么是UI ##

**UI即User Interface（用户界面）的简称 **  
好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得**舒适、简单、自由、充分体现软件的定位和特点**。   
![这里写图片描述][SouthEast]   
![这里写图片描述][SouthEast 1]

--------------------

## 什么是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）在工具栏上添加的一个新按钮，位于界面左上角，如图   
    ![这里写图片描述][SouthEast 2]   
    提示：   
    Rect Tool 不单单专用于操作 UI 控件，实际上它可以被用于操作任何游戏对象。只不过这个工具是在 UI 系统加入的时候一并被添加进来的。Rect Tool 可以对 UI 控件展开下列操作：   
    改变位置：将鼠标置于 UI 控件矩形框的内部，按下鼠标左键任意拖动，即可改变UI 控件的位置，如图所示。   
    ![这里写图片描述][SouthEast 3]   
    改变大小：将鼠标置于 UI 控件矩形框上，待鼠标变成双向的箭头，按下鼠标左键拖动，即可改变 UI 控件的大小![这里写图片描述][SouthEast 4]   
    旋转：将鼠标移动到 UI 控件矩形框靠近 4 个角的外部，待鼠标出现一个旋转的标志，按下鼠标左键拖动，即可令 UI 控件旋转   
    ![这里写图片描述][SouthEast 5]
 *  RectTransform组件   
    Rect Transform组件是新版Unity为UI控件提供的新组件。它只在UI控件上取代Transform组件，而后者是其它任何游戏对象所必须的组件。如图所示，对比了Transform和 Rect Transform 组件。   
    ![这里写图片描述][SouthEast 6]   
    Rect Transform 组件除了拥有 Transform 组件的位置（Position）、朝向（Rotation）和缩放（Scale）属性外，还纳入了更多的属性： Width、 Height、 Anchors、 Pivot 和 Anchor Presets。   
    Width 和 Height 用于表示 UI 控件的长和宽   
    Pivot 用于表示 UI 控件的轴心点，在 Scene 视图中用蓝色的空心小圆圈表示；当开发者对 UI 控件做旋转处理的时候， UI 控件旋转时所围绕的点就是轴心点。   
    ![这里写图片描述][SouthEast 7]
 *  Anchors属性   
    Rect Transform是专为UI元素准备的，它的一个重要属性就是锚点Anchors，用于指定自身相对父级的布局。对于这个UI元素，它的父级就是Canvas。锚点一共有四个，分别对应自身矩形的四个顶点。在父级元素形状发生变化时，四个锚点到四个顶点的偏移offset不变。
    
    Anchors 属性是重点，因此拿出来单独介绍。它本身在 Scene 视图中有专门的图标来表示，同时它还有自己的子属性，最后它还会影响除 Anchor 属性以外的其它属性。   
    Anchors 用于表示 UI 控件的锚点，在 Scene 视图中使用 4 个小三角表示。当 UI 控件的父对象也拥有 Rect Transform 组件的时候，锚点才会出现。锚点的 4 个小三角依次与 UI 控件四边形边框的四个角对应，且在父对象的大小发生改变时，锚点会令子对象自动完成自适应操作。例如，Button 的锚点位于 Canvas 的中央、两角和一边上时，那么当 Canvas 的大小发生改变的时候， Button 的自适应效果如图   
    ![这里写图片描述][SouthEast 8]   
    锚点位于Canvas的中央，锚点的四个三角形与UI边框的四个角距离固定   
    ![这里写图片描述][SouthEast 9]   
    Button 的锚点位于 Canvas 的两角（锚点的 4 个三角形，与 UI 控件边框的 4 个角的距离固定）   
    ![这里写图片描述][SouthEast 10]   
    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 的坐标   
    ![这里写图片描述][SouthEast 11]
    
    当表示 Anchors 的 4 个小三角不在一起的时候，这 4 个属性名就变成了 Left、 Top、Right 和 Bottom。它们分别表示 UI 控件的 4 条边，到 4 个三角形所构成矩形对应边的距离   
    ![这里写图片描述][SouthEast 12]
    
    Anchor Presets 属性是一个“样子特殊的下拉列表”，一般容易被忽略。但是如果灵活的使用它，可以为 UI 控件的布局提供大大的便利，因为它提前预置了常见的布局方式   
    Anchor Presets，此属性位于 Rect Transform 组件的左上角，使用鼠标单击那个正方形即可打开 Anchor Presets 属性，如图 2-24 所示。此属性中预先定义了锚点的位置，开发者可以直接从预定义的锚点中选择。例如，将 Button 的锚点设置到左上角，效果如图   
    ![这里写图片描述][SouthEast 13]   
    ![这里写图片描述][SouthEast 14]   
    使用 Anchor Presets 属性为 Button 设置锚点
    
    使用 Anchor Presets 属性也可以一并设置 UI 控件的 Pivot 和 Position 属性，只需要按下 Shift 和 Alt 键盘即可   
    ![这里写图片描述][SouthEast 15]

--------------------

## 可视功能的UI组件 ##

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

*  Text控件   
    Text（Script）组件的文字显示效果，如图所示。该组件用于向玩家显示不可交互的文本信息。玩家无法修改、删除其中的文本，只能从中了解信息。   
    ![这里写图片描述][SouthEast 16]   
    注意：Text（Script）组件只包括可见的文字，它的背景是透明的。   
    ![这里写图片描述][SouthEast 17]   
    Text：此属性中的内容，就是 Text(Script)组件要显示的文本信息   
    Color：用于设置文字的颜色   
    Material：用于设置文字的材质。注意：游戏场景中的文字控件本身就是一个游戏对象，当前就可以设置它的材质属性了。
    
    Character 表示接下来的属性负责设置字符的格式：   
    Font：用于设置文本信息的字体格式；   
    Font Style：用于设置文本信息的样式，可选择的样式有：Normal（正常）、Bold（加粗）、Italic（倾斜）和 Bold And Italic（倾斜并加粗），如图所示   
    ![这里写图片描述][SouthEast 18]   
    Line Spacing：用于设置文字的行间距   
    ![这里写图片描述][SouthEast 19]   
    Rich Text：决定文本中的标记元素是否可用   
    ![这里写图片描述][SouthEast 20]   
    提示：Text 属性中的< b>和< /b>就是“标记元素”   
    Paragraph 表示接下来的属性负责设置字符构成的段落的格式：   
    Alignment：用于设置段落的对齐方式   
    ![这里写图片描述][SouthEast 21]   
    Horizontal Overflow：当段落内容的宽度大于 Text(Script)组件本身的宽度时，处理段落内容有两种可选的方式，分别为 Wrap（换行）和 Overflow（溢出）。效果如图   
    ![这里写图片描述][SouthEast 22]   
    Horizontal Overflow:Wrap   
    ![这里写图片描述][SouthEast 23]   
    Horizontal Overflow:Overflow   
    Vertical Overflow：当段落内容的高度大于 Text(Script)组件本身的高度时，处理段落内容有两种可选的方式，分别为 Truncate（截断）和 Overflow（溢出）。   
    ![这里写图片描述][SouthEast 24]
    
    Best Fit：是否应该忽略对文字大小的设置，让字体的大小自动改变到能让段落的内容全部显示出来的状态，效果如图   
    ![这里写图片描述][SouthEast 25]
 *  Image控件   
    Image(Script)组件的图片显示效果，所示。它用于向玩家显示不可交互的图片信息，常作为游戏场景的装饰。   
    ![这里写图片描述][SouthEast 26]   
    ![这里写图片描述][SouthEast 27]   
    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属性，那么图片在经过缩放处理时，长宽的比例将保持恒定。   
    ![这里写图片描述][SouthEast 28]   
    图片的显示类型：Simple（Sprite 长宽比例固定）   
    ![这里写图片描述][SouthEast 29]   
    图片的显示类型：Simple（Sprite 长宽比例固定）   
    Sliced：Sprite 将被看作是由 9 个切片组成的，如图 1所示。而图片控件将只显示中间切片的边缘，如图 2 所示，若此时选中了 Fill Center 属性，那么将显示完整的中间切片，如下图所示。   
    ![这里写图片描述][SouthEast 30]   
    ![这里写图片描述][SouthEast 31]   
    Tiled：此种类型的 Sprite 一般尺寸较小，如图 1 所示。为使此 Sprite 填满整个图片控件，就会在保持 Sprite 尺寸不变的前提下不断重复，就像是在铺地板砖一样，如下图所示。   
    ![这里写图片描述][SouthEast 32]   
    Filled：此种类型的 Sprite 与 Simple 相似，但是它可以表现出一种“从无到有”的呈现过程，如图所示。   
    ![这里写图片描述][SouthEast 33]   
    “呈现方式”也叫“填充方式”，由 Fill Method 属性决定，可选项有 Horizontal、Vertical、Radial 90、Radial 180 和 Radial 360, Fill Origin 决定了填充操作的起点，Fill Amount 决定了填充的进度。   
    ![这里写图片描述][SouthEast 34]   
    Set Native Size：单击此按钮，将使得图片控件的大小主动调节到与 Sprite 原始大小 一致，如图所示。   
    ![这里写图片描述][SouthEast 35]
 *  RawImage控件   
    Raw Image(Script)组件与 Image(Script)组件的功能类似，如下图所示，用于向玩家显示不可交互的图片信息，常作为游戏场景的装饰。但 Raw Image(Script)组件与 Image(Script) 组件上的属性并不完全一致，Raw Image(Script)组件如图   
    ![这里写图片描述][SouthEast 36]
    
    Raw Image(Script)组件各属性作用的说明如下：   
    Texture：指定 Raw Image(Script)组件要显示的图片；   
    注意：Raw Image(Script)组件所显示的图片，可以是任何类型，而不单单只是 Sprite 类型。   
    Color：设置图片的颜色；   
    提示：对此属性的设置，会改变图片显示的主色调，就像是在用有颜色的光照射图片。   
    Material：设置图片控件的材质；   
    UV Rect：令图片中的一部分显示在 Raw Image(Script)组件里。X 和 Y 属性指定图片左下角的位置，W 和 H 属性指定图片右上角的位置，如图所示。   
    ![这里写图片描述][SouthEast 37]
 *  Mask组件   
    拥有Mask(Script)组件的 UI 控件，可以限制其子对象的显示范围，即当子对象的显示范围明显大于父对象的显示范围时，游戏视图就只显示父对象范围内的子对象，其它部分自动隐藏。父对象是 Panel，子对象是 Image，为前者添加 Mask(Script)组件，作用效果如图   
    ![这里写图片描述][SouthEast 38]  
    注意：添加了 Mask(Script)组件的游戏对象，要想发挥出此组件的效果，要求此对象上必须包含 Image(Script)组件。如图所示，查看 Panel 上的所有组件，可以看到它默认就有 Image(Script)组件，所以才能发挥出 Mask(Script)组件的遮罩效果。   
    ![这里写图片描述][SouthEast 39]   
    Show Mask Graphic：此属性决定是否显示父对象上的图片，效果如图所示   
    ![这里写图片描述][SouthEast 40]

--------------------

[SouthEast]: /images/20220530/bd9a89e36fd34cc7be69fb58fa1bdb33.png
[SouthEast 1]: /images/20220530/de8bf7c83de845d690e5ad0f1cb6cc00.png
[SouthEast 2]: /images/20220530/e2b13c15932d4ab4b38de942b9e070bc.png
[SouthEast 3]: /images/20220530/aeebec9d1e1a4706bc6f7fe39d34321b.png
[SouthEast 4]: /images/20220530/be2fd0b5823d41a1bcea1380bd37a9e4.png
[SouthEast 5]: /images/20220530/74e6edb37d634efd934e2a02712837ac.png
[SouthEast 6]: /images/20220530/c55abdc2d57441f0820fcb6272eb400d.png
[SouthEast 7]: /images/20220530/90358e14087e469192060317d718d7fb.png
[SouthEast 8]: /images/20220530/ad29050724b541eda34c94e198f74a83.png
[SouthEast 9]: /images/20220530/85df0aa8e5384fca829b9e103fd3d1f2.png
[SouthEast 10]: /images/20220530/60aec806f13347b697331cc42bcc10f8.png
[SouthEast 11]: /images/20220530/a9c65e43ab71405a9fe57626951a3e4f.png
[SouthEast 12]: /images/20220530/67a4bd09e79245e194b176150fdd0ee3.png
[SouthEast 13]: /images/20220530/2453cc339b58486fad984706d7b57adb.png
[SouthEast 14]: /images/20220530/98d783ce649948ccace7c1c55e44d4c3.png
[SouthEast 15]: /images/20220530/505718825df544bf929f2cac47d58573.png
[SouthEast 16]: /images/20220530/c2bb5093769647058b614c212c374e5d.png
[SouthEast 17]: /images/20220530/61cad6d4b46649e1b5cdb78d441aa849.png
[SouthEast 18]: /images/20220530/4570407c74bb45dbb6727e93bea05877.png
[SouthEast 19]: /images/20220530/94dd482bb20f419182af2227a5788622.png
[SouthEast 20]: /images/20220530/8af68e747ad34ec08815e4ba6ba2ca1f.png
[SouthEast 21]: /images/20220530/94c6330f26004202a7aa564c4ccd6e9d.png
[SouthEast 22]: /images/20220530/24512649ab4d4f2d8cc1e2faa42e6aee.png
[SouthEast 23]: /images/20220530/c2397eb2441a436193750a02b0d11193.png
[SouthEast 24]: /images/20220530/211beaf4480d4791931f2ee99c673af2.png
[SouthEast 25]: /images/20220530/3f6e912fffeb4b8ab580a9a800f15409.png
[SouthEast 26]: /images/20220530/70bc012945664e2b99082a01c875ec43.png
[SouthEast 27]: /images/20220530/1db878624c4b4e54b488111cb188fdb1.png
[SouthEast 28]: /images/20220530/faa5ecfe1ba0476aa74118b3cc436d68.png
[SouthEast 29]: /images/20220530/e60d79c88b27453db6c5bc0caa694148.png
[SouthEast 30]: /images/20220530/484f6e8bd0e54b2aa94e546ceb1d11cc.png
[SouthEast 31]: /images/20220530/6fcc7b6774e245f9b59b186e9b89851c.png
[SouthEast 32]: /images/20220530/b2e817ead389432dad737ed20a333c17.png
[SouthEast 33]: /images/20220530/e6198f03a1254699a5674da3ebdc5a6c.png
[SouthEast 34]: /images/20220530/e81a02e2fe86458eb741da1cd554888a.png
[SouthEast 35]: /images/20220530/bc43118b73aa498db3277fa3062ef529.png
[SouthEast 36]: /images/20220530/d05812174a3b4529861f9956793f9391.png
[SouthEast 37]: /images/20220530/df83bbb4279a4db6b7a117d512c3a211.png
[SouthEast 38]: /images/20220530/76433fff299a4658b950c2ed8556b4b2.png
[SouthEast 39]: /images/20220530/5cd6265dd07641c780976ad23af69cd0.png
[SouthEast 40]: /images/20220530/ad7440461e7945c69f6e3ab49243864d.png