UGUI Game界面开发

本文参考：第1节 UGUI概述和Canvas组件_哔哩哔哩_bilibili

一、核心要点

1、Canvas画布：
所有的UI控件必须依托于Canvas才能生效。
2、Image组件
（1）pos信息
是相对于父组件的位置
（2）Anchor锚点
按Alt键生效
（3）Image Type
-Simple模式：普通图片显示
-Sliced模式：切片，将图片分为核心和边缘两部分，核心可以缩放，边缘不进行缩放
-Tiled模式：图片正常大小显示，然后调整w/h值会出现剪切、堆叠的效果
-Filled模式：适合做特效的填充模式
3、Button组件
（1）Transition过渡
-Color Tinit方式：颜色变化的效果
-Sprite Swap方式：通过Animator配置图片切换
（2）Inspector中添加事件
（3）代码中添加事件
this.GetComponent<Button>().OnClick.AddListener(func(xx));
4、Toggle组件
单选配置：加到同一个Group中
5、Slider组件
适合做血条
6、ScrollBar组件
当界面的内容大于ScrollRect显示框，需要通过滚动条拖拽一部分一部分的显示
7、EventTrigger组件
对没有交互属性的UI组件，增加注册事件的方法
8、CanvasScaler组件
屏幕适配的组件

二、UGUI概念

UGUI：Unity Graphical User Interface

（1）Canvas画布

所有的UI控件必须依托于Canvas组件才能显示和产生作用，相当于所有UI控件的一个背景板。

创建画布：

创建完Canvas后，就会在Hierarchy中出现Canvas和EventSystem，EventSystem下对应的2个组件就是负责消息的输入、输出等的处理。

（2）3种渲染模式

1）Overlay模式

跟屏幕的大小保持一致。

此模式不需要UI摄像机，永远出现在所有摄像机的最前面。

三、Image组件

（1）pos信息

posX/Y/Z是相对于父组件的相对位置。

（2）Anchor锚点

Anchor的作用：当屏幕分辨率发生变化时，根据anchor计算相对位置。

当anchor位于左上角时，标识当前组件根据左上角的点计算相对位置。

按照Alt键可以使其生效。

生效后=》》 

（3）pivot信息

标识组件Image的位置，后续Image的旋转等操作均以该位置进行。

取值范围为：[-1,1]

（4）Image组件信息

将图片拖入Source Image后，通过Set Native Size可以设置图片为原始大小。

Color颜色会和输入图片的颜色进行叠加。

Preserve Aspect选项：当调整了图片的Width和Height之后可能会导致变形，通过该选项可以保持原始图片的比例，从而使图片不变形。

（5）Image Type

有4种图片类型。

1）Simple：普通模式。将Sprite当成普通的图片进行显示。

2）Tiled：堆叠模式。

图片按照正常大小显示，然后按照要求的width、height进行显示。当width/height的值小于原始大小，则会出现剪切的效果；当width/height的值大于原始大小，则会出现多个图片的堆叠效果。

3）Sliced：切片模式。当图片放大时，会出现中间清晰而边缘模糊的情况。

下图就是边缘因为放大而变模糊的场景。

Sliced模式需要将图片区分成核心和边缘两部分，核心部分会进行缩放，而边缘部分不进行缩放。

选择Sliced模式后会有如下报错：

这表示这张图片没有切分出border边缘。

需要点击图片，然后Sprite Mode选择Multiple

点击Sprite Editor，移动绿线（蓝线不能移动）从而把图进行了切分，点击apply生效。

此时再选择Sliced模式就没有报错了，同时放大后边缘还是清晰的。

4）Filled：填充模式。

填充模式非常适合做特效，它需要配合下面的子选项进行使用。

Fill Origin：填充的初始位置。

Fill Amount：填充比例，值的范围是[0,1]

Clockwise：是否顺时针方向

Horizontal：进度条的样式

Vertical：水往上涨的样式

Radial 360：倒计时样式

（6）编程

使用UI组件需要using以下信息：

using UnityEngine.UI;

逐帧填充到1的方法：（1.0F表示1秒钟，coldTime是填充完成的时间）

selflmage. fillAmount + = (1.0F / coldTime * Time. deltaTime) ;l

四、Text组件

（1）字体

使用自己的字体的方法：

创建Font目录，把字体文件拖进去。

然后把字体文件直接拖到Character的Font即可。

在C#中使字体生效。

public Font targetFont; 

然后把新字体拖到TargetFont变量中。

在Start()函数中：

selfText = this.GetComponent<Text>();

selfText.font = targetFont;

（2）Rich Text富文本

在一个文本框中针对不同的文字显示不同的效果，类似html中的文本的操作。

（3）Paragraph段落

Horizontal Overflow：

Wrap：溢出换行

Overflow：直接溢出

Best Fit：字体在Min Size和Max Size之间自动调整

五、Button组件

（1）Transition过渡

Color Tint方式

可以配置不同操作下的颜色变化

Sprite Swap

图片切换的方式。

一般情况下，button我们只会用到图标，不会挂Text子组件。此时操作button时可以进行图标的切换。

Animation方式

配置AnimatorController，然后通过Trigger跳转到不同的Animation。

选择Animation方式后，会自动添加上Animator组件。

点击Auto Generate Animation即可自动创建AnimatorController。

选中Hierarchy中的Button对象，然后选择Window -> Animation组件，即可打开Animation的编辑界面。

在Animation中点击红色圆圈，即打开Enable keyframe recording mode，然后将Scale的x从1.1改回到1，就会记录这一帧作为动画。这样通过record + transform值/Image属性（比如Color）变化，就可以生成帧动画。

编辑完ButtonAnimator后，如果其他Button也想使用这个效果，则直接在其Animator中选择该Animator即可。

（2）Navigation导航

当存在多个按钮时，允许使用键盘上的方向键进行按钮的切换。

选中3个button，然后再选择Horizontal模式后，通过Visualize可以看到3个 button之间的建立了关系。

通过使用方向键，可以看到按钮切换的效果。

选择Automatic模式后，就可以在横向、纵向之间都可以进行切换。

Explicit模式，就可以自定义切换的按钮。

（3）Inspector中添加事件

添加函数

在On Click()中点击"+"，然后将对象拖入Object属性中

然后选择组件的自定义的函数，OnClick会扫描所有的组件获取组件对应的函数，选择Image -> SetNatiiveSize()即可将图标变成原始大小。

添加函数参数

当有些函数需要参数时，会根据参数的类型出现参数属性输入框。

添加多个函数

（4）代码中添加事件

最多可传入1个参数。

在Inspector中配置代码中函数

参考示例

配置监听器的方式添加函数

添加无参函数的示例：

添加有参函数的示例：

六、Toggle开关组件

（1）基本使用

Toggle由3部分组成，如下所示：

Toggle的事件函数示例：

Inspector中使用函数：

代码中添加事件的方法：

（2）单选配置

若要若干选项只能单选，只需将这些选项放到一个group里面。

具体做法：

首先，在Hierarchy中创建空物体，比例为ColorGroup

然后，给该物体添加Toggle Group的组件

接着，将所有的Toggle对象的"Group"属性都赋值成ColorGroup

七、Slider组件

原始样式如下：

可以做成血条

编程使用Slider

ps：在Unity中，Color是一个整体的值，必须是Color变量整体赋值，而不能只赋值Color的rgba的一个属性。

八、ScrollBar/ScrollRect组件

（1）ScrollBar基本概念

使用场景：当界面的内容大于显示框，需要通过滚动条拖拽，一部分一部分的浏览内容。

与Slider有点类似。

滚动视图的组件为Scroll Rect组件：

（2）制作小说阅读器

ScrollView为Scroll Rect组件，

ViewPoint为Image组件

NovelText为Text组件，

将NovelText拖到Scroll Rect的Content属性中。

将ScrollBar组件添加到Scroll Rect的Vertical ScrollBar的属性

当给Image组件添加Rect Mask组件后，超出的文字则不再显示。

组件的层次关系如下：

九、DropDown下拉栏组件

本身是由很多组件组合而成的，同时多了一个Dropdown组件。

编程常用函数：

• 清除下拉选项：selfDropDown.ClearOptions();
• 添加下拉选项：selfDropDown.AddOptions(colorList);

十、InputField文本输入框组件

该组件有两个事件类型：

On Value Changed(String)：当文本输入框的内容发生改变时，执行该方法

On End Edit(String)：当文本输入框的内容编辑结束时，执行该方法。按回车键、或者点击文本框外部区域即可结束编辑。

十一、EventTrigger事件触发器

（1）概念

在Hierarchy中创建Panel时，是没有配置交互属性的，需要通过EventTrigger单独配置事件。

比如：Panel中有Image组件，没有其他交互相关的属性，此时添加EventTrigger组件，可以配置事件处理的方法。

EventTrigger的事件方法罗列如下，其中最常用的是PointerXX系列的方法。

（2）在Inspector中添加事件

示例如下：

（3）在代码中注册事件

using UnityEngine.EventSystems;

然后让自定义组件继承IPointerEnterHandler、IPointerExitHandler等接口，然后实现该接口对应的方法。

十二、CanvasScaler屏幕适配

假如在400*300的屏幕下，有如下3个100*100的Image组件：

其中红色的位于正中间，蓝色的锚点到右上角，绿色的位于左边缘和红色的之间。

Canvas组件自带Canvas Scaler组件。

UI Scale Mode参数：

• Constant Pixel Size：固定像素大小。当屏幕分辨率调整到4000*3000，Image还是按照100*100显示。Scale Factor是同时放大的系数，假如值为2，则Image任何分辨率下都变为200*200。

• Scale With Screen Size：按照屏幕大小缩放。需要配置Reference Resolution的X/Y值，表示设计时参考的分辨率大小。

Screen Match Mode：

Match Width Or Height：表示缩放时参考Width还是Height，下面的Match表示Width/Height的参考权重。

Expand：永远按照Width / Height中较小的比例缩放，使得不会溢出屏幕

Shrink：缩小时选择变化小的那个

十三、Horizontal Layout Group水平排序

参考：最全面的游戏背包系统讲解1——UGUI界面设计和拼接_哔哩哔哩_bilibili

 该组件可以让挂载该组件的对象下 的 子对象能够整齐的排列。