控件介绍：

在界面系统的术语中，将一个具有独立状态、外观和操作的对象称为控件。例如，常用的交互控件有按钮、输入框、滑动条等，常见的非交互式控件有文本标签、图片等。

Unity采用了父子物体和组件的设计思想，其每个界面控件，往往也是由游戏物体挂载组件，以及一些子物体实现的。例如，按钮控件是由按钮物体加上一个文本子物体构成的，而按钮和新的功能组件也叫按钮（Button），要注意区分"按钮组件"和"按钮控件"。

一、创建游戏界面

为了方便介绍，先搭建一个简单的界面

UI系统对于2D和3D区别不大，可以随意创建一个Unity工程

控件实际上是一个游戏物体，因此只要在Hierarchy窗口空白处右键，选择UI，先创建一个UI Text，然后观察Canvas（画布），Text（文本控件）和EventSystem（事件系统）。

1.Canvas与EventSystem简介

要想理解Canvas存在的必要性，便需要知道在一个游戏中，它和普通物体不同，界面上各种控件的布局会更复杂一些，如需要考虑位置对齐、适配、缩放等实际情况。因此，一般来说所有UI控件都必须是Canvas的子物体，这样才能方便统一布局。

另外，Unity也允许存在多个Canvas，形成多个独立的界面层。例如，游戏中人物的血条就可以放在单独的Canvas中表示，但是过多的Canvas会影响游戏性能。

EventSystem代表着事件系统。UI系统一定会用到事件系统，例如单机按钮、输入文字等操作都需要事件系统的辅助。事件系统不是UI系统专用的，它本身也有其他用途。

2.界面的比例问题

如果新建多个UI控件，我们会发现在Game窗口里能看到控件，而在场景里，UI控件会以非常极大的比例展现，必须将场景镜头拉得很远才能看清楚UI控件整体。

这是由于UI系统是以Canvas为载体，而Canvas很多时候和最终屏幕显示有直接的对应关系。UI 的默认比例时以1像素为单位的，而正常三维场景是以1米为单位的。因此，UI的一个像素等驾驭三维世界的1米。对于1920✖️1080像素的界面来说，横向就有1920米。

三维游戏场景的比例尺与默认界面系统的比例尺差距很大，就导致在编辑界面时很不自然，为了改善操作的便利性，Unity在场景中提供了2D按钮，为编辑界面带来了方便。

二、矩阵变换（Rect Transform）组件

如果选中界面上的控件，会发现每个物体并不带有基本的Transform组件，取而代之的是Rect Transform组件。其实Rect Transform组件是Transform组件的子类，因此并不违反"每个物体必须有且只有一个Transform组件"的规定。其中Rect是Rectangle的简写，即"矩形"的意思。

在UI系统中用Rect Tranform的原因是界面控件的位置、大小相对于游戏中的其他物体来说要复杂得多。复杂性体现在很多方面，下面举例

界面布局直接收到客户端屏幕大小、长宽比例的影响。比如，移动端显示屏具有多种分辨率和长宽比，加上个人计算机，情况就更多了。

界面上控件位置、大小直接影响用户体验。在很多游戏中，用户可以拖拽窗口的位置或修改窗口的大小。例如，游戏的聊天窗口位置和大小是可以动态调整的。在这种情况下使窗口内部元素动态适应窗口大小、自动改变窗口内部元素的布局十分必要。

由于存在种种复杂的情况，如果UI控件还是用简单的"位置、旋转和缩放"来定义自身位置，显然无法满足要求。因此Unity总结了众多游戏屏幕适配的经验和方法，设计了 Rect Transform组件

简单来说，Rect Transform组件使用多种相对参数取代了绝对的位置参数。上文制作的UI场景中，所有物体都是默认的"居中对齐"方式。这时右边的位置参数为Pos X、Pos Y，其代表的是控件与父控件之间的偏移量，（POs x=0,POs Y=0）就代表位于父控件的正中央。

非拉伸情况下，物体的位置是相对的，通过Anchor Presets和Pos来调整；大小是确定的，通过Height和Width来改变。

而当选择Stretch（拉伸）模式时，位置和大小的参数会发生根本的变化。例如，最典型的"上下左右都拉伸"的方式下，界面参数会发生改变：

定位物体的Pos X,Pos Y消失了，取而代之的是Left（左偏移），Top（上偏移），Right（右偏移），Bottom（下偏移）。如果将4个偏移参数改为0，则代表这个控件将铺满父控件的全部控件，而且无论父控件扩大或缩小，依然会保持铺满的状态。

这时"左偏移"代表的是"离左边有多远"，"上偏移"代表的是"离顶部有多远"，如左偏移文本框中填写10代表离左边10个单位，填写负数则表示可以超出父控件的范围。这种铺满的模式适合用于表示游戏中的主体窗口。

三、图片（Image）组件

图片组件用于展示UI上的图片。在界面上可以设置的属性如下：

1. 指定片源（Source Image）
2. 修改图片的叠加颜色(Color)
3. 指定图片材质(Materal)，一般为空
4. 射线检测目标(Raycast Target)，大部分的UI组件都包含着一选项，它决定了控件是否会被单击到
5. 图片类型(Image Type)，包括简单(Simple)、切片(Sliced)、瓦片(Tiled)与填充(Filled)4种类型。其中切片与瓦片类型需要对图片导入参数进行设置后才能正常使用。切片类型通常用于制作可以任意缩放但边缘不变形的图片（也称为九宫格图片）
6. Set Native Size（设为原始大小）按钮可以充值整个图片为原始像素大小
7. 当图片类型为简单和填充时，会出现"Preserve Aspect（保留长度比）"选项，勾选它能够保证图片在放大、缩小时长宽比例不变，比较常用 

为演示用脚本控制图片的基本方法，给图片增加一个脚本ImageAnimTest，内容如下

public class ImageAnimTest : MonoBehaviour

{

        Image image;

        //可以在编辑器里指定另一张图片

        public Sprite otherSprite;

        float fillAmount=0;

        void Start()

        {

              //获取Image组件

               image=GetComponent<Image>();

              //直接将图片换为另一张图片

              if(otherSprite!=null)

              {

                     image.sprite=otherSprite;

              }

              //将图片类型改为Filled，360度填充，方便制作旋转动画

              image.type=Image.type.Filled;

              image.fillMethod=Image.FillMethod.Radial360;

           }

        Void Update()

          {

              //制作一个旋转现实的动画效果，直线效果也是类似的

              //取值为0～1

              image.fillAmount=fillAmount;

              fillAmount+=0.02f;

              if(fillAmount>1)

              {

                    FillAmount=0;

              }

      }     

}

在运行之前，可以给脚跟的Other Sprite字段制定一张新图片，这样在运行时，就会将内容替换为新的图片，并产生旋转现实的效果

四、文本（Text）组件

文本组件也是最常用的组件之一，用来显示文本信息。Unity的文本组件功能施恩丰富，在界面上可以设置的属性如下：

1. Text（文本内容，就是要现实的文字内容
2. Font（字体），默认为Arial。Unity支持安装其他类型的字体，只要将合适的字体文件复制到工程的Assets/Fonts文件夹下即可自动导入
3. Font Style（字体风格）包括普通、黑体、斜体、黑体加斜体四种选择
4. Line Spacing（行间距）
5. Rich Text（富文本）
6. Alignment（段落对齐方式）包括横向的靠左、居中和靠右对齐，以及纵向的靠左、居中和靠右对齐
7. Horizontal Overflow（横向超出），指定横向超出控件大小的自负的处理方式，可以选择Wrap（折行）或Overflow（放任跑出边界）
8. Vertical Overflow（纵向超出）
9. Best Fit（最佳匹配），自动根据文本控件的大小改变字体的大小，可以限制自动调整的最大值和最小值
10. Color（文字颜色）
11. Materila（材质）一般留空
12. Raycast Target（射线检测目标）与图片中的作用一样