首页 > 代码库 > 【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