【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选项可以用来设置遮挡目标。”

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

时间: 2024-08-03 10:26:41

【UGUI速成班】—— 04. Canvas的相关文章

MT4编程培训速成班(视频教程)QQ973201383

速成班课程介绍http://www.ea668.com/thread-3026-1-1.html报名学习:QQ973201383   手机:13774372025  杨老师 MT4编程培训课程(速成班)-第01课    http://www.tudou.com/programs/view/0tL2ngD2JzI/ MT4编程培训课程(速成班)-第02课    http://www.tudou.com/programs/view/1TCVchWHx7c MT4编程培训课程(速成班)-第03课 K线

【Unity3D_UGUI速成班】——06.Slider

界面上的交互除了按钮和文字图片之外,还应该有进度条或者血条.Slider正是这样一个UI控件. -------------------------- 6.Slider 在Hierarchy栏目下右键后点击UI.再点击Slider.那么在Hierarchy栏目下会多出携带了Slider的Canvas控件和EventSystem控件.Slider下还有Background.Fill Area.Handle SlideArea三个子模块. 一.Background 代表了进度条的底色,其实质是处于Sl

UGUI学习笔记之Canvas组件

此次记录数据为Unity4.6 B21版本.新版的UGUI已经有很好的效果,开发效率也大大的提高.跟NGUI操作类似,制作3D UI也非常方便. 一.Canvas->Render Mode提供了三种渲染模式. 1.Screen Space-Overlay模式不支持分辨率自适应,在Rect Transform调整的Rotation参数无法对其造成影响. 2.Screen Spcae-Camera 采用相机渲染,这种模式需要设置一个UI相机来专门对UI渲染,类似NGUI的Camera,且支持分辨率自

【Unity笔记】关于UGUI的根节点Canvas

创建UGUI物体时,会自动创建Canvas物体作为所有UGUI的根节点.该物体身上有个Canvas脚本,Render Mode渲染模式选项: Screen Space - Overlay:即使场景中没有任一可用Camera,所有UI依然能正常运行.显示.而且任何非UI元素的游戏物体都不能遮挡在UI元素之上(无论非UI物体怎么调位置). Screen Space - Camera:可传入某个Camera,指定该Canvas物体下的所有UI元素由哪个Camera来渲染.可指定UI到Camera的距离

U3D 从NGUI进阶到UGUI扩展学习1 - Canvas

Canvas Render Mode - UGUI不像NGUI,它没有UI摄像机.但有时候需要做相机动画就要调出来. 在Canvas里设置第二个选项即可调出. Pixel Perferct - 这个似乎是可以得到更好的像素显示但牺牲宽度高度,就是以前对齐的UI,现在显示效果更好但对不齐.NGUI里UI如果有小数点会模糊,我不知道和这个有没有关,但我在Unity试了,有小数点和没小数点都一样.和开不开这个选项没关系 论坛了看下,官方是这么说的:(LINK) Hi, I just investiga

Unity使用UGUI的Image在Canvas中画直线

效果图 核心代码 using System; using UnityEngine; using UnityEngine.UI; public class TestDrawLine : MonoBehaviour { public Image arrow; //Image 素材 public RectTransform pa; //A点 public RectTransform pb; //B点 private void Start() { var rP = pa.rectTransform().

【Unity3D_UGUI速成班】——05.Rect Transform

这一节将主要讲述所有UGUI物体的排布属性RectTransform,熟练运用这个组件,能够让你的UGUI Demo永远排布美观. 5. Rect Transform 对于任意创建好的UGUI物体,它的位姿属性全由RectTransform决定,这和一般的GameObject物体由Transform决定有所区别,本节以Image为例: 每次创建UGUI控件,画布上都还有四片三角形组成的图案,其实那是4个Anchor(锚点),每个三角形都可单独拖动,默认会出现在该UGUI物体的父物体的正中央. ①

获取UGUI子节点在Canvas的屏幕坐标

因为项目需要,需要我们能够在Canvas下获取UI子结点在2D屏幕中的坐标位置.这个子结点可以是嵌套的,如图,注意RectTransform中的Pos值 获得的2D坐标是以屏幕坐标的,比如你的Canvas是1024*768,中间的点就是(0,0),左偏移100,就是(-100,0).在某牛看到一篇帖子给出的方案是调用 RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas.transformasRectTransform, t

04 canvas——位移画布和旋转缩放

4.1 缩放 scale() 方法缩放当前绘图,更大或更小 语法:context.scale(scalewidth,scaleheight) scalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推) scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.) 注意:缩放的是整个画布,缩放后,继续绘制的图形会被放大或缩小 4.2 位移画布 ctx.translate(x,y) 方法重新映射画布上