本文主要是介绍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：缩小时选择变化小的那个
这篇关于UGUI Game界面开发的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
