1.15 从0开始学习Unity游戏开发--游戏UI

上一章中，我们剩下最后一个任务，需要支持鼠标控制准心来进行设计，那么准心本质上就是一个始终呈现在屏幕上的一个图片，你当然可以用一个3D物体来制作，之前讲解渲染概念的时候也提到过，我们的屏幕就是相机的近裁面，只要我们将3D物体保持放在近裁面的地方，我们就可以保证这个物体看起来就像是一直在屏幕上一样。

但是这样做需要你在可能极小的区域（近裁面往往只有0.1或者更小）进行物体摆放，非常的不方便，而且3D物体本身也没有专门针对UI所需的内容进行处理，还得自己造轮子，那么Unity为了方便游戏内制作UI，提供了一套内置的方案：UGUI。

UGUI

UGUI其实就是个名字，本质上是Unity提供了一套特殊的组件，这套组件的渲染流程走的不是Mesh Renderer，而是专门针对渲染在屏幕上的内容进行特化，如果之前做过传统软件的UI开发，那么类似Qt，WPF，MFC之类的框架都会有很多控件例如Button，Label等，方便快速的构建一个界面出来，显然UGUI也应该会提供类似的东西。

那么我们现在开始创建UI内容，同样的和创建普通的3D物体一样的路径，我们也是在Hierarchy里面右键选择UI->Image，会突然多出来好多东西：

我们慢慢解释：

• Canvas物体：

之所以我这里叫物体，是因为这个物体里面有个组件也叫Canvas，为了区分，我们把Hierarchy里面存在的GameObject叫Canvas物体，我们分析这个物体自动给创建的组件有哪些：

这里RectTransform组件其实就是继承自Transform组件，这里Unity覆盖了原本的Transform组件面板的数据显示，直接显示RectTransform，也算是Unity默认搞了点潜规则，毕竟这里编辑UI的3D坐标数据没啥意义。

而RectTransform里面其实配置的参数就跟我们做传统软件UI上的锚点，定位，像素位置，大小，就类似了，这里之所以不能改，因为这个Canvas物体上层没有更多拥有Canvas组件的父元素了，那这个Canvas本身就代表了全屏，所以你试着调整Game窗口的大小，这个里面的数值就会跟着变，如果是子元素的话，则这里是可以修改的，后面我们会看到。

Canvas组件就是类似Mesh Renderer组件的功能，承载物体下面所有子元素里面包含的UI内容的渲染，相比于我们渲染3D物体需要提供Mesh，Material之类的东西，这里Unity屏蔽了这些细节，只需要我们指定RenderMode，渲染到哪个显示目标等等。这里我们只需要暂时关注Render Mode，默认情况下是Screen Space - Overlay，说人话其实就是Unity会用一套潜规则逻辑，独立的将你这坨UI内容渲染到屏幕上，至于这个潜规则是啥，以及其他RenderMode又怎么用，等到进阶教程里面会详细聊使用场景，现在我们只需要知道这个组件就是承载UI显示用的。

Canvas Scaler和Graphics Raycaster暂时可以不管，遇到了我们再讲。

• EventSystem，这个其实就是UI系统需要使用的输入事件如何处理的逻辑，里面有两个组件，但是我们现在先不用关注它，反正只要知道UI需要这个组件才能响应点击之类的操作。

• Image

最后就是我们这次需要画准心用的Image

可以看到，RectTransform组件已经可以修改值了，我们可以修改里面的数据来调整位置大小和布局。

Canvas Renderer组件则是告诉父元素里面的Canvas组件，这里有一个需要渲染的UI元素。

Image组件则是提供需要渲染的内容，可以直观的看到这里Source Image肯定就是我们要显示的图片赋值的地方，Color则是给这个图片叠加一个颜色，这里默认是白色，也就是说我们即使不赋值图片，也会显示白色。其他的参数部分我们先不管。

解释完默认创建的组件，其实这里Canvas和EventSystem都是因为要显示一个Image所必须的东西，Unity检查你场景里面没有这两个东西就默认给创建了，如果你现在再到Canvas物体里面创建一个Image，则只会出现一个新的Image，不会再继续额外创建Canvas和EventSystem。

那么现在我们看一下场景内的现象：

可以看到我们场景里面出现了一个硕大的白色，Game里面左下角也显示了一个白色的块，这其实就是我们的Image显示出来的效果。

那么如何编辑呢？我们滑动鼠标滚轮，把Scene场景的视角拉远多一些：

可以看到我们UI显示的部分（白色线框）以及我们的白色Image显示的位置，而我们的Cube和Wall都远到看不清了。这其实