专栏首页韩东吉的Unity杂货铺零基础入门 8: Canvas和EventSystem

零基础入门 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。

本文分享自微信公众号 - 韩东吉的Unity杂货铺(DeveloperJimin),作者:Jimin

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-01-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 零基础入门 44:使用图片字体第一步,制作字体

    Hello,大家好,我是Jimin韩东吉,今天要给大家分享的是关于如何在项目中使用图片字体。

    韩东吉
  • 零基础入门 28:MessageBox的制作和使用

    上一篇分享了项目中的菊花loading如何制作和使用,这篇分析依然围绕项目实用功能组件介绍。

    韩东吉
  • 零基础入门 45:使用图片字体第二步,关联Unity

    Hello,今天要给大家分享的是在Unity里使用图片字体的第二步,也是最后一步,就是关联Unity。

    韩东吉
  • 适合本科生的建筑渲染软件有哪些?软件各有什么特点?

    基本主流的建筑辅助设计软件VRay都能很好支持,如:rhino,sketchup,Revit,及建筑可视化的3ds max,Unreal等。

    Renderbus云渲染农场
  • LeetCode 1535. 找出数组游戏的赢家

    每回合游戏都在数组的前两个元素(即 arr[0] 和 arr[1] )之间进行。 比较 arr[0] 与 arr[1] 的大小,较大的整数将会取得这一回合的胜...

    Michael阿明
  • kubernetes系列教程(十二)详解DaemonSet控制器

    上章节中介绍了Deployment,ReplicaSet,ReplicationController等副本控制器的使用和场景,接下来介绍kubernetes系列...

    HappyLau谈云计算
  • 排序算法-归并排序

    排序算法-归并排序 <?php /** * 合并两个有序数组为一个有序数组 * * @param array $value 待排序数组 * * @r...

    琯琯
  • js实现01数字矩阵

    RobinsonZhang
  • [数据结构与算法] 排序算法之冒泡排序与快速排序(快排)

    时间静止不是简史
  • 用大顶堆实现数据排序

    堆分为大顶堆和小顶堆 大顶堆 每个节点的值都大于或等于其左右孩子节点的值 小顶堆 每个节点的值都小于或等于其左右孩子节点的值

    shengjk1

扫码关注云+社区

领取腾讯云代金券