当前位置：首页 > news >正文

【unity游戏开发入门到精通——UGUI】Canvas画布组件

news 来源：原创 2025/9/10 18:10:30

注意：考虑到UGUI的内容比较多，我将UGUI的内容分开，并全部整合放在【unity游戏开发——UGUI】专栏里，感兴趣的小伙伴可以前往逐一查看学习。

文章目录

一、Canvas画布组件
- 1、Canvas组件用来干啥
- 2、场景中可以有多个Canvas对象
二、Canvas的三种渲染方式
- 1、Screen Space-Overlay（屏幕空间 - 覆盖模式）
- - - （1）优点
    - （2）缺点
    - （3）参数介绍
    - （4）示例
- 2、Screen Space-Camera（屏幕空间-摄像机模式）
- - - （1）优点
    - （2）缺点
    - （3）参数介绍
    - （4）实战
    - （5）注意事项
- 3、World Space（世界空间）
- - - （1）优点
    - （2）缺点
    - （3）参数介绍
专栏推荐
完结

一、Canvas画布组件

在这里插入图片描述

1、Canvas组件用来干啥

Canvas的意思是画布。它是UGUI中所有UI元素能够被显示的根本，它主要负责渲染自己的所有UI子对象。

注意：如果UI控件对象不是Canvas的子对象，那么控件将不能被渲染。我们可以通过修改Canvas组件上的参数修改渲染方式。

2、场景中可以有多个Canvas对象

场景中允许有多个Canvas对象，可以分别管理不同画布的渲染方式，分辨率适应方式等等参数。

如果没有特殊需求，一般情况场景上有一个Canvas即可

二、Canvas的三种渲染方式

在这里插入图片描述

Screen Space-Overlay：屏幕空间，覆盖模式，Ul始终在前
Screen Space-Camera：屏幕空间，摄像机模式，3D物体可以显示在UI之前，UI可以倾斜角度
World Space：世界空间，3D模式

1、Screen Space-Overlay（屏幕空间 - 覆盖模式）

这种模式，一般用的比较多，保证UI始终位于3D场景的最前面，会挡住3D场景中的物体（如果对应位置有UI）。在通常的渲染管线中，一般都是先画场景中的物体，最后画UI，所以这种模式下的UI会挡住3D场景中渲染出来的画面。

会单独创建一个屏幕空间视图渲染UI效果，和我们的摄像机各自独立，UI视角下，正常的场景相机渲染的场景一般显得很小，在左下角位置。
在这里插入图片描述

（1）优点

简单易用，适合大多数简单的2D UI布局。
不受摄像机的透视或深度影响，始终保持固定的屏幕位置和大小。

（2）缺点

无法与3D空间交互，例如UI元素不能正确地遮挡或被3D对象遮挡。
如果游戏需要3D UI效果（比如UI随摄像机视角变化而移动）时，Overlay模式不适用。

（3）参数介绍

在这里插入图片描述

Pixel Perfect（像素完美）:是否开启无锯齿精确渲染（性能换效果）
SortOrder（排序次序）：排序层编号（用于控制多个Canvas时的渲染先后顺序）Canvas的排序层级越高，会渲染在层级较低的前面
TargetDisplay（目标显示）：目标设备（在哪个显示设备上显示）
Additional Shader Channels（附加着色器通道）：其他着色器通道，决定着色器可以读取哪些数据
顶点颜色始终使用加码色彩空间：用户界面顶点颜色始终采用Gamma色彩空间，与播放器设置无关。将顶点颜色保留在Gamma空间中，以允许在Ul着色器中进行Gamma到线性颜色空间的转换。这将在线性颜色空间中增强Ul颜色精度。

（4）示例

UI始终位于3D场景的最前面，会挡住3D场景中的物体。
在这里插入图片描述

2、Screen Space-Camera（屏幕空间-摄像机模式）

此模式下，Canvas的渲染基于特定摄像机视口，并且会遵循该摄像机的透视和裁剪设置。3D物体可以显示在UI之前，且可以实现3D UI效果，比如倾斜的UI。

和前面不同，UI的渲染会基于设置的特定摄像机视口，比如我这里选择的就是主相机。
在这里插入图片描述

（1）优点

可以实现3D UI效果，比如倾斜的UI。
可以和其他3D对象进行正确的前后遮挡关系处理。

（2）缺点

需要额外配置摄像机参数以保证UI在预期范围内的显示效果。
虽然UI仍然固定在屏幕上，但它会受到摄像机视口变换的影响，这可能增加设计复杂度。

（3）参数介绍

在这里插入图片描述

RenderCamera（渲染摄像机）：用于渲染UI的摄像机（如果不设置将类似于前面的覆盖模式）
Plane Distance（平面距离）：UI平面在摄像机前方的距离，类似整体Z轴的感觉，主要用于控制和3D物体的前后遮挡关系。
Sorting Layer（排序图层）和Order in Layer（图层顺序）：可以和2d的对象的Sprite Renderer组件里的排序参数配合，实现UI和2D对象的前后遮挡效果。

（4）实战

这种模式，需要搭配一个相机一起使用（假定该相机名字是 Camera），这个模式下的UI会受到Camera设置的影响，比如Camera设置的模式为透视模式(Perspective)，那么渲染出的UI也会有远小近大的效果，比如实现下面这种倾斜的UI效果。
在这里插入图片描述

（5）注意事项

使用这种模式，获取鼠标位置坐标系和鼠标交互事件可能需要注意一些问题。参考：Unity使用UICamera的分享和经验总结
我们应当避免不必要地使用多个Camera，即使增加的Camera不渲染任何东西，也会影响性能。具体可以参考：Unity性能优化之Camera使用。除非有时这是最佳或者唯一的方案。比如在Unity中制作UI时，我们通常习惯于单独使用一个Camera来拍摄UI内容。这可以避免了主场景相机的后处理效果可能会干涉UI内容等问题。

3、World Space（世界空间）

这种模式比较好理解，可以直接把对应的UI对象当作一个3D对象，会被位置在它前面的其他3D物体挡住，也会挡住位置在它后面的3D物体。UI完全成为了一个3D物体，放在了游戏世界中，不再跟随摄像机视口变化。

我们可以旋转相机位置看看效果。
在这里插入图片描述

（1）优点

完全支持3D UI设计，非常适合制作AR应用、第一人称或第三人称视角的游戏中的交互式3D界面。
UI元素可以与3D对象无缝集成，相互遮挡、跟随角色或摄像机移动。

（2）缺点

设计和维护更复杂，因为UI元素的位置和大小需要根据场景动态调整。
如果Canvas未正确放置或绑定到移动对象，可能导致UI难以查看或不可见。

（3）参数介绍

在这里插入图片描述

Event Camera（事件摄像机）：用于处理UI事件的摄像机（如果不设置，不能正常注册UI事件）。

专栏推荐

地址
【unity游戏开发入门到精通——C#篇】
【unity游戏开发入门到精通——unity通用篇】
【unity游戏开发入门到精通——unity3D篇】
【unity游戏开发入门到精通——unity2D篇】
【unity实战】
【制作100个Unity游戏】
【推荐100个unity插件】
【实现100个unity特效】
【unity框架/工具集开发】
【unity游戏开发——模型篇】
【unity游戏开发——InputSystem】
【unity游戏开发——Animator动画】
【unity游戏开发——UGUI】
【unity游戏开发——联网篇】
【unity游戏开发——优化篇】
【unity游戏开发——shader篇】

完结

好了，我是向宇，博客地址：https://xiangyu.blog.csdn.net，如果学习过程中遇到任何问题，也欢迎你评论私信找我。

赠人玫瑰，手有余香！如果文章内容对你有所帮助，请不要吝啬你的点赞评论和关注，你的每一次支持都是我不断创作的最大动力。当然如果你发现了文章中存在错误或者有更好的解决方法，也欢迎评论私信告诉我哦！
在这里插入图片描述

文章目录

一、Canvas画布组件

1、Canvas组件用来干啥

2、场景中可以有多个Canvas对象

二、Canvas的三种渲染方式

1、Screen Space-Overlay（屏幕空间 - 覆盖模式）

（1）优点

（2）缺点

（3）参数介绍

（4）示例

2、Screen Space-Camera（屏幕空间-摄像机模式）

（1）优点

（2）缺点

（3）参数介绍

（4）实战

（5）注意事项

3、World Space（世界空间）

（1）优点

（2）缺点

（3）参数介绍

专栏推荐

完结

相关文章：