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