零基础入门 8： Canvas和EventSystem

Unity在之前的版本更新中，继GUI之后，又新生一套新的UI系统，即UGUI。

UGUI是新版Unity自带的原生UI系统，组件也在不断的增加扩展，基本的贴图，文本，按钮等还是可以用的。接下来的几篇内容会以UGUI展开分享。

在了解其他UI之前，先来了解一下Canvas（画布）和EventSystem（事件驱动）。

Canvas：画布

所以的UI对象，包括按钮，贴图等都是Canvas下的子对象，都将统一绘制到Canvas画布上。进行展示和使用。

如下图，创建一个空场景，然后随便创建一个图片

可以看到，当我们在空场景里创建一个image的时候，编辑器会自动创建一个Canvas，一个EventSystem以及创建的图片，所以创建的UI对象都是Canvas下的子项。

当场景中存在Canvas的时候，再创建的其他UI对象时，就不用重新创建Canvas和EventSystem了。如下图，我在原有的Canvas上又重新创建一个按钮。

然后来说一下Canvas这个画布在inspector面板上的属性。

说下这几个组件里比较重要的一些元素吧。

第一个Canvas

RenderMode：渲染模式

Canvas有三种渲染模式，Overlay，Camera，World。

第一种overlay渲染模式，会把所有UI都渲染在摄像机之前，不受摄像机影响，并且随着分辨率的改变而自适应UI布局。

Camera是根据摄像机来渲染UI到画布上，前后层级顺序和摄像机有关

World则是世界UI，在有些时候world的渲染模式可以方便的将3D UI渲染到场景对象上。

Pixel Perfect：是否当前要以像素的方式来显示UI

SortOrder：渲染层级顺序，数值越大，显示越靠前。

第二个Canvas Scaler

UI Scale Mode，UI缩放模式有三种

第一种Constant Pixel Size：按照像素大小进行缩放，像素比例则是按照下图里的数值进行设置。

也就是说你选择了100*100像素进行缩放，那么在任何分辨率的机型上都是按照100*100的像素进行缩放，保持像素比不变。

第二种Scale With Screen Size：根据屏幕的尺寸来进行缩放。举例如我们用1280*720的屏幕尺寸进行适配缩放。Screen Match Mode指的是屏幕的适配模式，比如说适配宽或者高，放大和缩小模式这三种。

如下图。

第三个Graphic Raycaster

Ignore Reversed Graphics：忽略反向的渲染。这是默认为True勾选的，也就是说反转或反向的渲染事件是忽略的。

Blocking Mask：渲染屏蔽的layer层级

针对于第一个，忽略反向渲染举个最简单的例子。

我在游戏中正常创建一个按钮，什么属性都不改，然后点击按钮的时候输出一句日志。

如下图，我先创建一个按钮，然后拖到脚本内，脚本实现的事件非常简单，就是按钮点击的时候输出一句日志。

然后我们运行，点击按钮

可以看出，当我们点击按钮的时候有日志输出，按钮点击有效的字样，然后我们清空日志。将按钮反转180度。此时无论我们如何点击，按钮都不会响应点击事件。

然后我们把Canvas上，最下面的组件，Graphic raycaster属性里的Ignore Reversed的勾去掉，让Canvas不忽略反向渲染，即可响应按钮的点击事件。

EventSystem：事件系统

这个理解起来很简单，如果你的Canvas没有EventSystem事件配套，那所有的组件事件将无法响应。

举个最简单的例子，如下图，原本可以响应点击事件的按钮，当我把EventSystem隐藏之后，按钮的点击就无效了，反之则恢复点击效果。

对于eventSystem，可以这样理解，一个Canvas或者多个Canvas，必须有一个EventSystem接受派发事件，来对所有的UI对象进行事件响应。

如下图，我复制了一个新的Canvas，为了区分，我将按钮设置为红色。两个Canvas，一个EventSystem，同时响应按钮的点击事件。

然后运行游戏，分别点击白色和红色的按钮，两个按钮都可以响应点击事件

今天的这篇内容比较简单，主要分享下Canvas和EventSystem。