Unity3D_UGUI入门

什么是UI

UI即User Interface(用户界面)的简称 
好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。 
Unity3D_UGUI入门_第1张图片 
Unity3D_UGUI入门_第2张图片


什么是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)在工具栏上添加的一个新按钮,位于界面左上角,如图 
    Unity3D_UGUI入门_第3张图片 
    提示: 
    Rect Tool 不单单专用于操作 UI 控件,实际上它可以被用于操作任何游戏对象。只不过这个工具是在 UI 系统加入的时候一并被添加进来的。Rect Tool 可以对 UI 控件展开下列操作: 
    改变位置:将鼠标置于 UI 控件矩形框的内部,按下鼠标左键任意拖动,即可改变UI 控件的位置,如图所示。 
    Unity3D_UGUI入门_第4张图片 
    改变大小:将鼠标置于 UI 控件矩形框上,待鼠标变成双向的箭头,按下鼠标左键拖动,即可改变 UI 控件的大小Unity3D_UGUI入门_第5张图片 
    旋转:将鼠标移动到 UI 控件矩形框靠近 4 个角的外部,待鼠标出现一个旋转的标志,按下鼠标左键拖动,即可令 UI 控件旋转 
    Unity3D_UGUI入门_第6张图片
  • RectTransform组件 
    Rect Transform组件是新版Unity为UI控件提供的新组件。它只在UI控件上取代Transform组件,而后者是其它任何游戏对象所必须的组件。如图所示,对比了Transform和 Rect Transform 组件。 
    Unity3D_UGUI入门_第7张图片 
    Rect Transform 组件除了拥有 Transform 组件的位置(Position)、朝向(Rotation)和缩放(Scale)属性外,还纳入了更多的属性: Width、 Height、 Anchors、 Pivot 和 Anchor Presets。 
    Width 和 Height 用于表示 UI 控件的长和宽 
    Pivot 用于表示 UI 控件的轴心点,在 Scene 视图中用蓝色的空心小圆圈表示;当开发者对 UI 控件做旋转处理的时候, UI 控件旋转时所围绕的点就是轴心点。 
    Unity3D_UGUI入门_第8张图片
  • Anchors属性 
    Rect Transform是专为UI元素准备的,它的一个重要属性就是锚点Anchors,用于指定自身相对父级的布局。对于这个UI元素,它的父级就是Canvas。锚点一共有四个,分别对应自身矩形的四个顶点。在父级元素形状发生变化时,四个锚点到四个顶点的偏移offset不变。

    Anchors 属性是重点,因此拿出来单独介绍。它本身在 Scene 视图中有专门的图标来表示,同时它还有自己的子属性,最后它还会影响除 Anchor 属性以外的其它属性。 
    Anchors 用于表示 UI 控件的锚点,在 Scene 视图中使用 4 个小三角表示。当 UI 控件的父对象也拥有 Rect Transform 组件的时候,锚点才会出现。锚点的 4 个小三角依次与 UI 控件四边形边框的四个角对应,且在父对象的大小发生改变时,锚点会令子对象自动完成自适应操作。例如,Button 的锚点位于 Canvas 的中央、两角和一边上时,那么当 Canvas 的大小发生改变的时候, Button 的自适应效果如图 
    Unity3D_UGUI入门_第9张图片 
    锚点位于Canvas的中央,锚点的四个三角形与UI边框的四个角距离固定 
    Unity3D_UGUI入门_第10张图片 
    Button 的锚点位于 Canvas 的两角(锚点的 4 个三角形,与 UI 控件边框的 4 个角的距离固定) 
    Unity3D_UGUI入门_第11张图片 
    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 的坐标 
    Unity3D_UGUI入门_第12张图片

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

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

    使用 Anchor Presets 属性也可以一并设置 UI 控件的 Pivot 和 Position 属性,只需要按下 Shift 和 Alt 键盘即可 
    Unity3D_UGUI入门_第16张图片


可视功能的UI组件

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

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

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

    Best Fit:是否应该忽略对文字大小的设置,让字体的大小自动改变到能让段落的内容全部显示出来的状态,效果如图 
    Unity3D_UGUI入门_第26张图片

  • Image控件 
    Image(Script)组件的图片显示效果,所示。它用于向玩家显示不可交互的图片信息,常作为游戏场景的装饰。 
    Unity3D_UGUI入门_第27张图片 
    Unity3D_UGUI入门_第28张图片 
    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属性,那么图片在经过缩放处理时,长宽的比例将保持恒定。 
    Unity3D_UGUI入门_第29张图片 
    图片的显示类型:Simple(Sprite 长宽比例固定) 
    Unity3D_UGUI入门_第30张图片 
    图片的显示类型:Simple(Sprite 长宽比例固定) 
    Sliced:Sprite 将被看作是由 9 个切片组成的,如图 1所示。而图片控件将只显示中间切片的边缘,如图 2 所示,若此时选中了 Fill Center 属性,那么将显示完整的中间切片,如下图所示。 
    Unity3D_UGUI入门_第31张图片 
    Unity3D_UGUI入门_第32张图片 
    Tiled:此种类型的 Sprite 一般尺寸较小,如图 1 所示。为使此 Sprite 填满整个图片控件,就会在保持 Sprite 尺寸不变的前提下不断重复,就像是在铺地板砖一样,如下图所示。 
    Unity3D_UGUI入门_第33张图片 
    Filled:此种类型的 Sprite 与 Simple 相似,但是它可以表现出一种“从无到有”的呈现过程,如图所示。 
    Unity3D_UGUI入门_第34张图片 
    “呈现方式”也叫“填充方式”,由 Fill Method 属性决定,可选项有 Horizontal、Vertical、Radial 90、Radial 180 和 Radial 360, Fill Origin 决定了填充操作的起点,Fill Amount 决定了填充的进度。 
    Unity3D_UGUI入门_第35张图片 
    Set Native Size:单击此按钮,将使得图片控件的大小主动调节到与 Sprite 原始大小 一致,如图所示。 
    Unity3D_UGUI入门_第36张图片
  • RawImage控件 
    Raw Image(Script)组件与 Image(Script)组件的功能类似,如下图所示,用于向玩家显示不可交互的图片信息,常作为游戏场景的装饰。但 Raw Image(Script)组件与 Image(Script) 组件上的属性并不完全一致,Raw Image(Script)组件如图 
    Unity3D_UGUI入门_第37张图片

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

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


你可能感兴趣的:(Unity3d)