UGUI 之Canvas理解

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhaixh_89/article/details/82775787

对于UGUI来说,Canvas这个组件至关重要,由于自己对UGUI也是初学者,根据使用过程中的理解做一下总结;

Canvas (画布) 是所有 UI 组件的父物体 , 也就是说每一个 UI 组件都必须在 Canvas 下 , 作为 Canvas 的子物体 , 当你创建一个 UI 控件时 , 如果在 Hierarchy 视图没有 Canvas 组件的话 , unity会自动帮你创建一个 Canvas , 并将你想创建的 UI 控件置于 Canvas 下.

Rect Transform:继承自Transform,比Transform多了以上属性

Render Mode:渲染模式(分为三种)

   1、Screen Space-Overlay模式

在此模式下,Canvas将作为2D图像直接渲染在屏幕上,并将画布下面的所有的UI元素置于屏幕的最上层,或者说画布的画面永远“覆盖”其他普通的3D画面,如果屏幕尺寸被改变,画布将自动改变尺寸来匹配屏幕

   2、Screen Space-Camera模式

和Screen Space-Overlay模式类似,画布也是填满整个屏幕空间,如果屏幕尺寸改变,画布也会自动改变尺寸来匹配屏幕。所不同的是,在该模式下,画布会被放置到摄影机前方。在这种渲染模式下,画布看起来 绘制在一个与摄影机固定距离的平面上。所有的UI元素都由该摄影机渲染,因此摄影机的设置会影响到UI画面。在此模式下,UI元素是由perspective也就是视角设定的,视角广度由Filed of View设置。

  这种模式可以用来实现在UI上显示3D模型的需求,比如很多MMO游戏中的查看人物装备的界面,可能屏幕的左侧有一个运动的3D人物,左侧是一些UI元素。通过设置Screen Space-Camera模式就可以实现上述的需求

3、World Space模式

此模式下,与其他3D物体具有同样的显示效果,画布被视为与场景中其他普通游戏对象性质相同的类似于一张面片(Plane)的游戏物体。画布的尺寸可以通过RectTransform设置,所有的UI元素可能位于普通3D物体的前面或者后面显示。当UI为场景的一部分时, 可以使用这个模式。它有一个单独的参数Event Camera,用来指定接受事件的摄像机,可以通过画布上的GraphicRaycaster组件发射射线产生事件。这种模式可以用来实现跟随人物移动的血条或者名称

Pixel Perfect:

指的是一个UI素材本身的像素对应屏幕上一个像素的情况,这种情况下UI素材映射到屏幕上时没有任何拉伸和压缩,这种情况下UI显示效果非常清晰完美。

Sort Order:深度值,該该值越高显示越前面

Canvas Scaler

这个组件主要负责Canvas的显示效果,其中以Scale Mode最为重要

可选的模式有3种,分别是 Constant Pixel Size, Scale With Screen Size和Constant Physical Size。

Constant Pixel Size模式

根据Canvas设置的大小进行显示,无论在何种分辨率下,大小均为Unity中设置的大小(不能很好地适应不同分辨率)。
Scale Factor:保持大小的比例 。默认为1,比如一张图大小为100*100,这里如果设置为2,则图显示为200*200,用于缩放整个Canvas,而且调整Canvas Size与Screen Size一样,当Scale Factor为1时,Screen Size (800*600)、Canvas Size(800*600),图片大小1倍,当Scale Factor为2时,Screen Size (800*600)、Canvas Size(400*300),图片大小2倍,Scale Factor 会调整整个Canvas 的大小,并让他的大小跟Screen Size一样,运算后Canvas Size放大2倍,刚好等于Screen Size,而底下的图片会放大2倍
Reference Pixels Per Unity:Unity里的1单位大小代表100像素。

Scale With Screen Size模式

Scale With Screen Size:UI元素可以根据屏幕的大小进行缩放,在此模式下有三种不同的缩放方式

Reference Resolution:参考分辨率,该分辨率越大,Canvas Scale越小,由你拼UI时的尺寸决定,跟实际移动设备上的尺寸没有关系

Screen Match Mode包括 Match Width or Height, Expand,Shrink三种模式。

Match Width or Height:根据Canvas的宽度或高度或者一定的比例进行缩放,

当处于最左边时即比例为0时,屏幕高度对于UI大小完全没有任何影响,只有宽度会对UI大小产生影响。假设宽度为Reference Resolution宽度的x倍,则UI整体缩放为Reference Resolution状态下的x倍。也就是说只有宽度等于Reference Resolution宽度时,才能做到pixel perfect,否则像素就会有拉伸

当处于最右边时,与上述情况正好相反,决定整体缩放值的是高度,而宽度则没有任何影响,所以,你只要记住横版游戏以高度缩放,竖版游戏按宽度缩放,所以得出以下结论:

假如我拼UI时的尺寸为960*640的横版游戏,那么我的设置就是:

Expand:

当屏幕分辨率大于参考分辨率时,选择变化较小的一个方向(横向还是纵向),作为放大Canvas Scale的标准,另一方向上的变化则是在整体缩放以后再进行补偿性的变化。此举旨在减少扩大分辨率时由于非等比扩大而对UI整体布局造成影响。适合制作较小标准尺寸,扩充到较大屏幕。

例如:Reference Resolution为800*600,(假设此时Canvas Scale为(1,1,1))。如果实际分辨率为800*800,那么Canvas Scale还保持为(1,1,1)因为宽度没有发生变化,只是单纯的高度增加了200。所以势必对布局造成一定得影响。1000*600的情况也是一样,Canvas Scale没有变化,只是单纯宽度增加了200。但如果实际分辨率变为1000*800,那么Canvas Scale就变成(1.25,1.25,1.25)。因为宽度是参考分辨率宽度的1.25倍,高度是1.33倍,那么取较小的1.25。 这个1.25倍的意义是:整体Canvas渲染放大1.25倍,横向或纵向的变化超过了1.25倍,则靠拉伸Canvas来变化,此时因为这部分变化,可能会对布局产生一些相对较小的影响,例如相对位置、某些元素的长宽比。

Shrink:和Expand类似,但是更适合于缩小的情形。它会在屏幕尺寸缩小时,通过缩小CanvasScale尽量减少由于非等比缩小对布局产生的影响。按照影响较小的一个方向缩小的比例去缩小CanvasScale,然后再通过变形调整另外一个方向。

在分辨率自适应模式下,可能会带来物体缩放问题,如果缩放不正常,可在代码中手动更改localScale为(1,1,1)进行部分修正。

Constant Physical Size

固定的UI缩放值即根据设定好的物理大小进行展示,根据不同分辨率适应性不是很好。

Fallback Screen DPI:默认屏幕DPI。
- Default Sprite DPI:提供给Sprite的每英寸像素,此Sprite设置了“Pixels Per Unit”来适用“Reference Pixels Per Unit”。
- Reference Pixel Per:单位长度的像素数,最好与图片导入时的r Pixels Per Unit一致。

Graphic Raycaster

每个Canvas都需要添加此组件,用于获取对UGUI的控制和操作。

Canvas Group

CanvasGroup常见用法如下:

         (1)给窗口的父节点挂载Canvas Group,控制Alpha值达到淡入淡出的效果。

         (2)给一组控制组件的父节点挂载Canvas Group,统一设置为不响应输入。

         (3)给一个或多个UI元素的的父节点挂载Canvas Group,统一设置为不拦截点击事件。

Graphic Raycaster

Ignore Reversed Graphics:是否忽略反方向的图形,如果为true,则表示图形正面展示时,会接收到射线检测;反面展示时,不会接收到射线检测;否则,正反面展示都会接收到射线检测

Blocking Objects:屏蔽指定类型的(物理)对象,使它们不参与射线检测。渲染模式不为ScreenSpaceOverlay时起作用。可选值为:
None:不屏蔽任何物理对象
Two D:屏蔽2D物理对象(即具有2D碰撞体的对象)
Three D:屏蔽3D物理对象(即具有3D碰撞体的对象)

All:屏蔽所有物体对象

Blocking Mask:使屏蔽对象中的指定层不参与射线检测。渲染模式不为ScreenSpaceOverlay时,且Blocking Objects不为None时起作用。
例如,Blocking Objects为2D,Blocking Mask为UI,指2D物理对象中是UI层的东西都不会接收射线检测,而2D物理对象中的其他层还是能接收射线检测

猜你喜欢

转载自blog.csdn.net/zhaixh_89/article/details/82775787