Unity UGUI 之 画布(Canvas)

编辑器版本:Unity 2019.4.20f1c1
开发系统:Win10 X64
发表时间:2021.3.9
参考文档:https://docs.unity.cn/cn/2021.1/Manual/UICanvas.html

    画布(Canvas)是所有UI元素的父对象,画布自带Canvas组件,所有的UI元素都必须是Canvas的子对象。

    在层级视图(Hierarchy)中创建新的UI元素时,编辑器会检查层级视图中是否存在画布,如果存在则将新建的UI元素作为该画布的子对象;如果不存在则编辑器会创建画布(Canvas)和事件系统(EventSystem),然后将新建的UI元素作为该画布的子对象。

    画布的可视区域在场景视图(Scene)中显示为矩形。避免开发UGUI过程中受到其它游戏对象的干扰,可以将开发模式调整为2D模式。

在这里插入图片描述

UI元素绘制

    画布中的UI元素按照层级视图(Hierarchy)中的排列顺序绘制。如果有两个UI元素重叠,则后一个元素将显示在前一个元素之上。
要更改UI元素的显示顺序,只需在层级视图(Hierarchy)中拖动元素重新排序。或者使用函数SetAsFirstSibling、SetAsLastSibling 和 SetSiblingIndex控制UI元素的显示顺序。

渲染模式

    在画布的检视视图(Inspector)上的Canvas组件中,可以通过设置Render Mode属性来修改UI界面的渲染模式。

在这里插入图片描述
Render Mode:渲染模式

  • Screen Space - Overlay:屏幕空间-覆盖
  • Screen Space - Camera:屏幕空间-摄像机
  • World Space:世界空间

Additional Shader Channels:附加的着色器参数

  • None:不需要其它的着色器参数
  • Everything:包含下列所有着色器参数
  • TexCoord1:在网格顶点上包含UV1
  • TexCoord2:在网格顶点上包含UV2
  • TexCoord3:在网格顶点上包含UV3
  • Normal:在网格顶点上包含法线
  • Tangent:在网格顶点上包含切线

屏幕空间-覆盖(creen Space – Overlay)

    在此渲染模式下,UI元素放置在场景的最前端,不受摄像机的影响。如果调整屏幕大小或更改分辨率,那么画布将自动更改大小来适应。
在这里插入图片描述
在这里插入图片描述

属性说明
Pixel perfect完美像素,可以使得图像更清晰,边缘不模糊,但是会增加性能开销。
Sort Oder画布的排列顺序,值越大则越靠前。
Target Display目标显示器,在多显示器中可以指定显示器。

屏幕空间-摄像机(Screen Space – Camera)

    该渲染模式类似于Screen Space - Overlay,但是画布会被放置在指定摄像机(Render Camera)的给定距离(Plane Distance)处。指定摄像机的设置会影响到UI的外观,如果摄像机设置为正交视图,则UI元素将以透视图渲染,透视失真量由摄像机视野控制。如果调整屏幕大小、更改分辨率或摄像机视锥体发生改变,则画布也将自动更改大小来适应此情况。

在这里插入图片描述
在这里插入图片描述

属性说明
Pixel perfect完美像素,可以使得图像更清晰,边缘不模糊,但是会增加性能开销。
Render Camera渲染摄像机,用于渲染UI界面。
Plane Distance画布距离渲染摄像机的距离。
Sorting Layer画布所在的渲染图层。
Order In Layer在同一渲染图层中,画布的排列顺序,值越大越靠前。

世界空间(World Space)

    在此渲染模式中,画布和场景中的(2D/3D)游戏对象一样,画布的大小位置(Rect Transform)可以手动设置,而UI元素的渲染基于3D位置在其它的游戏对象的前面或后面渲染。
该模式可以使得UI界面成为游戏世界的一部分。

在这里插入图片描述
在这里插入图片描述

属性说明
Event Camera事件摄像机,处理UI事件的摄像机,只有设定的摄像机才能触发事件。
Sorting Layer画布所在的渲染图层。
Order In Layer在同一渲染图层中,画布的排列顺序,值越大越靠前。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值