首页 > 代码库 > 【UGUI速成班】—— 04. Canvas

【UGUI速成班】—— 04. Canvas

这一节将主要讲述所有UGUI物体的最顶级父物体——Canvas前几讲为大家介绍了Text、Image和Button,主要陈述的是UGUI的功能性,但说到底凡是UI都需要考虑其界面排布和呈现等因素。因此在此章节的Canvas和下一章节的Rect Transform快速为大家补上!

-----------------------

4.Canvas

Canvas 意思为画布,在Hierarchy栏目下右键==>UI,选择Canvas或者任何UGUI控件,我们仍以Image为例,那么在Hierarchy栏目下会多出携带了Image的Canvas控件和EventSystem控件,这里就不再次附图了。

Canvas的尺寸和形状,其实是由Unity里Game视窗决定的。再次我强烈建议所有初学者,不论开发什么Demo,都一定先设置好Game视窗的长宽比,方便对于已经排布好的东西一目了然。在Game视窗下点开,如果不知道用什么尺寸的话,建议先用16:9,因为大部分显示屏不论PC还是手机都采用1920*1080的分辨率,当然,如果手机竖屏使用的话当然得9:16。也可以在下方添加自己常用的长宽比,笔者有很长一段时间用的是自己添加的2560:1440。

技术分享

 

好,我们终于正视Canvas控件下的组件了。

技术分享

 

一、             Canvas组件,包含有RenderMode、Pixel Perfect、Sort Order和Target Display等条目

①  Render Mode是该画布上所有UGUI物体的渲染模式,可选的有

a)        Screen Space – Overlay:画布的默认渲染模式,将该画布上简单地叠加于UI层面,直接呈现在屏幕上。

Sort Order:仅在Overlay模式下可用,默认为0,是画布之间的渲染层级。在制作一些大型Demo中,时常会涉及多个Canvas画布,Sort Order值越大的,渲染优先级越高,呈现在越上层。

b)        Screen Space – Camera:选中该模式后,菜单中会多出一个Render Camera和Plane Distance。需要在Render Camera处为画布绑定一个相机,此后该画布上的UGUI物体只能为该相机所见,其他相机不可见。画布永远垂直于相机的Z轴,所以不用担心旋转角度的问题,而画布的四个角将会刚好与相机视锥的四条棱相交,所以画布能刚好填满相机的画面。

技术分享

 

2  这里要注意一下视锥的概念:从相机出发的四棱锥体,这是根据透视投影法决定的;视锥的四个侧面将会投影为相机成像屏幕的四条边;在四棱锥内、由远(Far)近(Near)裁剪面包裹的范围是该相机的可见范围。

2  Plane Distance是画布到相机的距离,切记这个距离必须介于相机的Far值和Near值之间,否则画布将不可见。

2  现在可以将物体“塞”进画布和相机中间的空间,笔者将一个Cube这么做了,因此呈现了下图左边的画面,Cube挡住了画布;此时若将Canvas的模式改为Screen Space-Camera,则会变成右边的样子,画布重新被置于最顶层。可两者在Scene中的布置是一样的。

技术分享

 

技术分享

 

Sorting Layer:将画布上的UGUI物体归于某个层级,默认是Default层、

Order in Layer:倘若有多个画布都属于某个层级中,Order越大则渲染优先级越高。

a)        World Space:该画布及其所有子物体都将作为实际存在的三维物体,除了Layer属性是“UI”之外,不会有任何区别。可以在摄像机前移动、翻转和缩放。

 

②  Pixel Perfect被勾选后,该画布上的所有UI物体都会被严格像素化,看起来更尖锐,减小模糊度。但是这样不适合被旋转和缩放的UI,因为这样会加大渲染消耗。

 

二、             Canvas Scaler是画布系统的比例定标组件,上面最主要的部分就是UI Scale Mode,下拉可选项有Constant Pixel Size、Scale With Screen Size和ConstantPhysical Size三项。

技术分享

 

①  Constant Pixel Size,该模式下,所有UGUI的尺寸全都以严格的像素来计量。在此模式下,需要非常严格地设计每个UGUI物体的Anchor,也就是锚点,来保证屏幕比例变化时、UGUI物体不会排布错乱。

②  Scale With Screen Size

a)        该模式需要首先确定Demo的参考分辨率,Reference Resolution。下图的ReferenceResolution是X=800,Y=600,即Demo默认是在800*600的屏幕上运行,并且如果屏幕分辨率不是800*600,UI图标会进行自适应调整。

b)          Screen Match Mode:该选项控制画布是否“溢出”屏幕。下拉可选项有Match Width or Heigh、Expand和Shrink :

               i.             Match Width or Height-按照宽度或者高度进行自适应调整。

                                         Match条-这是决定宽度和高度在自适应调整中所参考的比重。

              ii.             Expand-当画布呈现的屏幕小于参考分辨率时,将之拉伸,超出则不管。

            iii.             Expand-当画布呈现的屏幕大于参考分辨率时,将之裁剪,小于则不管。

技术分享

③ConstantPhysical Size,该模式将以渲染步骤最后的物理尺寸来描述UI尺寸。

技术分享

 

Physical Unit-可以设置物理单位,有厘米、毫米、英尺、点和活字5个可选项。 

Fallback Screen DPI-屏幕DPI未知时采用的DPI(屏幕每英寸的像素点数目) 

Default Sprite DPI -精灵图片每英寸的默认像素值 

三、Graphic Raycaster

者对于这个项目实在所知不多,只知道这是相应各类触控事件的射线传感器,

并在此附上一段摘自于博客http://doc.okbase.net/185335/archive/120256.html的原文:

“每个Canvas都有一个Graphic Raycaster,用于获取用户选中的uGUI控件。多个Canvas之间通过设置Graphic Raycaster的priority来设置事件响应的先后次序。当Canvas采用World Space或Camera Space时,Graphic Raycaster的Block选项可以用来设置遮挡目标。”

今天的章节木有代码,全都是手动设置,诸位加油!

【UGUI速成班】—— 04. Canvas