Unity Canvas 详解

最新推荐文章于 2025-12-05 15:20:13 发布
原创 最新推荐文章于 2025-12-05 15:20:13 发布 · 8.8k 阅读 · 53 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Unity #Canvas #游戏开发

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

文章目录

UI 自适应的解决方案

原理

问题产生的原因：

  • 通过 Factor 解决等比缩放
  • 非等比缩放如何选择缩放参考目标
  • 通过设置 Anchor，确保宽屏手机视野
解决方法
  • UI 大小
    • Canvas 的尺寸一直是和屏幕尺寸一样的，要让 UI 元素适应屏幕，就应该让 UI 元素的尺寸也动态的改变。
    • 等比缩放时
      • 通过 Factor 解决等比缩放
      • 设置 Canvas 的 UI Scale Mode 为 Scale With Screen Size，并设置标准尺寸（和 Game 界面显示尺寸一样）。
    • 非等比缩放时
      • 需要设置是以宽度还是高度作为一个缩放标准。eg：当高度改变时，进行相应的缩放，宽度改变时不影响。
      • Canvas Scaler -> Screen Match Mode
      • 若是横屏游戏，可参考以高度作为标准，竖屏游戏，则以宽度作为标准
  • UI 位置
    • 通过设置 Anchor，确保宽屏手机视野

Canvas 属性

Property:Function:
Render Mode渲染模式
Pixel Perfect (Screen Space modes only)是否为了准确的显示图片的像素而关闭抗锯齿（勾选，抗锯齿就没有用了）
Plane Distance (Screen Space - Camera mode only)控制显示那些界面，和摄像机联动

三种画布渲染模式

mark

mark

  • Screen Space - Overlay（屏幕控件 - 覆盖模式）多用于 3D 游戏

    画布会填满整个屏幕空间，并将画布下面的所有的 UI 元素置于屏幕的最上层，或者说画布的画面永远 “覆盖” 在 其他普通的 3D 画面上，如果屏幕尺寸被改变，画布将自动改变尺寸来匹配屏幕。

    例如小地图的显示。

  • Screen Space-Camera（屏幕空间 - 摄影机模式）多用于 2D 游戏

    该模式下，画布会被放置到摄影机前方。在这种渲染模式下，画布看起来绘制在一个与摄影机固定距离的平面上。所有的 UI 元素都由该摄影机渲染，因此摄影机的设置会影响到 UI 画面。

    • Render Camera: 渲染摄像机
    • Plane Distance: 画布距离摄像机的距离

  • World Space（世界控件模式）

    • 在此模式下，画布被视为与场景中其他普通游戏对象性质相同的类似于一张面片（Plane）的游戏物体。画布的尺寸可以通过 RectTransform 设置，所有的 UI 元素可能位于普通 3D 物体的前面或者后面显示。当 UI 为场景的一部分时，可以使用这个模式。

Pixel Perfect

抗锯齿有可能会小影响 UI 的像素，eg：这个 UI 本来是 100px，开启抗锯齿后，可能就变成 101px 了，适用于对 UI 的准确性要求很高的情况。

Canvas Scaler

控制 Canvas 下所有 UI 元素的缩放和像素密度，有 3 种缩放模式（UI Scale Mode）。

  • Constant Pixel Size：使 UI 元素保持固定的像素大小，无论屏幕大小。
  • Scale With Screen Size：屏幕越大，UI 元素越大。
  • Constant Physical Size：使 UI 元素保持相同的物理大小，而不考虑屏幕大小和分辨率。

Constant Pixel Size

使 UI 元素保持固定的像素大小，无论屏幕大小。

Property:Function:
Scale Factor按此比例缩放画布中的所有UI元素。
Reference Pixels Per Unit每一个 Unity 单位对应的 像素数。

mark

Scale With Screen Size

屏幕越大，UI 元素越大。

mark

Property:Function:
Reference Resolution**UI 布局的分辨率。**如果屏幕分辨率较大，UI就会被放大;如果屏幕分辨率较小，UI就会被缩小。
Screen Match Mode屏幕匹配模式，如果当前分辨率的纵横比不适合参考分辨率，则用于缩放画布区域的模式。即，以什么作为参考来进行缩放。
Match Width or Height以宽度或高度作为参考缩放画布，或介于两者之间。
Expand水平或垂直地展开画布区域，这样画布的大小永远不会小于引用分辨率。
Shrink水平或垂直裁剪画布区域，因此画布的大小永远不会大于引用分辨率。
Match确定缩放是使用宽度或高度作为参考，还是两者之间的混合。
Reference Pixels Per Unit每一个 Unity 单位对应的 像素数。

Constant Physical Size

使 UI 元素保持相同的物理大小，而不考虑屏幕大小和分辨率。

Property:Function:
Physical UnitThe physical unit to specify positions and sizes in.
Fallback Screen DPIThe DPI to assume if the screen DPI is not known.
Default Sprite DPIThe pixels per inch to use for sprites that have a ‘Pixels Per Unit’ setting that matches the ‘Reference Pixels Per Unit’ setting.
Reference Pixels Per UnitIf a sprite has this ‘Pixels Per Unit’ setting, then its DPI will match the ‘Default Sprite DPI’ setting.

Graphic Raycaster

图形光线投射器用于在画布上进行光线投射。管理 UI 射线，处理 Canvas 下所有图片的射线响应（是否被击中）。

图形光线投射器可以配置为忽略后向图形，也可以被2D或3D对象阻塞。

存在于它的前面。如果希望将此元素的处理强制放在光线投射的前面或后面，还可以应用手动优先级。

Property:Function:
Ignore Reversed Graphics反转图片后，还是否会产生响应
Blocked Objects会阻挡当前射线的类型（none，2d，3d）
Blocking Mask会阻挡当前射线的层级（只有选中的层级会产生阻挡）

Blocked Objects

mark

判断依据是身上的 Collider 是什么类型，即是 2dCollider 还是 3dCollider，eg：一个 UI 挂载 3dCollider，实际会对 3D 进行判定。

Canvas Group

用于控制整个 UI 元素组的某些方面，而不需要分别处理它们。

Canvas Group 的属性会影响它所在的 GameObject 对象以及所有子对象。

Property:Function:
Alpha0-1
Interactable确定此组件是否接受输入（点击响应）。当它被设置为 false 时，将禁用交互。
Block Raycasts是否接收射线检测，是否和鼠标交互
Ignore Parent Groups当前 Group 是否忽略其父级 Group 的影响

决定 UI 渲染层级的四种因素

Hierarchy 面板的排列顺序

Camera 的 Depth

Canvas 的 Sorting Layer

Canvas 的 Order in Layer

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

【unity游戏开发入门到精通——UGUI】Canvas画布组件
向宇
04-13 1706
Pixel Perfect（像素完美）:是否开启无锯齿精确渲染（性能换效果）SortOrder（排序次序）：排序层编号（用于控制多个Canvas时的渲染先后顺序）Canvas的排序层级越高，会渲染在层级较低的前面TargetDisplay（目标显示）：目标设备（在哪个显示设备上显示）Additional Shader Channels（附加着色器通道）：其他着色器通道，决定着色器可以读取哪些数据顶点颜色始终使用加码色彩空间：用户界面顶点颜色始终采用Gamma色彩空间，与播放器设置无关。
【Unity3D-UGUI系列】（一）Canvas 画布组件详解
优快云博客专家，Unity3D高级软件工程师，《Unity 3D从入门到实战》作者。
08-26 1万+
推荐阅读 优快云主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 QQ群：1040082875   大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。 很早就想分享这个系列的文章，但是总是没有机会，最近就将这个系列整理一下，大家一起学习交流。 一、前言 首先，介绍一个UGUI，NGUI是UGUI的前身，Unity开发团队将NGUI的开发团队收到自己开发团队下，并且由此开发了UGUI。 UGUI系统是从Unity 4.6版本后才开.
Unity之canvas
热门推荐
Arcobaleno
03-02 2万+
迫切需要了解一下Unity的画布功能。最近在用canvas的时候总是报错。也把这个踩坑过程记录下来。 Canvas属于Unity的UGUI，UGUI提供了强大的可视化编辑，大大提高了GUI的开发效率。 Canvas是所有UI组件的父物体，也就是说每一个UI组件都必须在Canvas下，作为Canvas的子物体，当你创建一个UI控件时，如果在Hierarchy下没有Canvas组件的话，Unity...
Unity UGUI 之 Canvas Scaler
最新发布
sindyra的博客
12-05 330
CanvasScaler是Unity中用于UI自适应的重要组件，提供三种缩放模式：固定像素大小、根据屏幕尺寸缩放和固定物理大小。最常用的ScaleWithScreenSize模式通过参考分辨率和屏幕匹配模式（匹配宽高/展开/伸缩）实现UI适配，其中匹配宽高模式可通过0-1的值灵活调整宽高优先级。这些功能确保UI在不同设备上保持良好显示效果。
Unity小地图制作
weixin_51565051的博客
05-04 5911
unity实现小地图的两种方法
unity的canvas
qq_51476492的博客
06-29 5833
Canvas属于Unity的UGUI，UGUI提供了强大的可视化编辑，大大提高了GUI的开发效率。 Canvas是所有UI组件的父物体，也就是说每一个UI组件都必须在Canvas下，作为Canvas的子物体，当你创建一个UI控件时，如果在Hierarchy下没有Canvas组件的话，Unity会帮你自动创建一个Canvas，并将你的UI控件置于Canvas下，Unity也会自动创建EventSystem，这个对象用来确定诸如鼠标输入的事件，这对 UI 组件来说也至关重要，比如按钮。。 这里要记录一下Canv
Unity组件大全之 Layout 组件 |（20）Canvas 画布
Unity打怪升级
09-15 2030
在Unity的UI系统中，Canvas是一个至关重要的组件，它作为所有UI元素的容器，负责管理和渲染用户界面。Canvas组件不仅可以组织UI元素，还控制它们的渲染顺序和事件处理。本文将详细介绍Canvas组件的工作原理、特性以及如何使用它来构建和管理用户界面。
Unity UGUI的Canvas（画布）组件的介绍及使用
alianblank的博客
07-10 5866
Canvas（画布）是Unity UGUI系统中的一个重要组件，用于在屏幕上绘制UI元素。它是UI元素的容器，可以包含各种UI元素，如按钮、文本、图像等。Canvas组件提供了一种方便的方式来管理和渲染UI元素。
Unity Manual 【翻译】Unity Canvas详解
godbenson的专栏
06-25 400
Unity Canvas详解
Unity 中 Canvas 的三种 Render Mode
qq_64875189的博客
03-16 1991
在“Screen Space - Overlay”模式下，Canvas渲染出的UI元素会被视为一个覆盖在屏幕上的平面层。渲染时，UI元素会根据屏幕的像素坐标进行绘制，以确保在不同分辨率和屏幕尺寸下都能正确显示，且保持相对位置不变。UI元素会被投影到该摄像机的视锥体范围内，如同场景中的其他物体一样，会受到摄像机的位置、旋转以及视野范围（FOV）的影响。它们具有自己的位置、旋转和缩放属性，可以放置在场景中的任何位置，并参与场景的光照、阴影和遮挡计算。UI元素会像其他3D模型一样，受到场景中灯光和摄像机的影响。
unity UI Canvas“高”性能写法
qq_41179365的博客
06-03 1366
Canvas属性舞台比喻UI行为Canvas（本体）舞台大幕承载所有演员（UI元素）。布景方式（固定、跟着摄像机移动、放在舞台上）决定UI是贴屏幕的、跟视角走的，还是放世界里的。舞台层次谁在前谁在后。高精度舞台灯要求灯光精准打到演员上，但设备吃力。小舞台组同时操控一批演员的开关。舞台尺寸随观众坐远近自动调整适配不同分辨率的屏幕，防止UI变形。能静不动，能拆不全，能少不多，能Overlay不Camera，能Camera不World！啊，明白了！
【Unity-UGUI控件全面解析】| Canvas 画布组件详解
努力前行，总会成为自己心中的那道光
04-28 2万+
画布 (Canvas) 是应该容纳所有 UI 元素的区域。画布是一种带有画布组件的游戏对象，所有 UI 元素都必须是此类画布的子项。 创建新的 UI 元素（如使用菜单 GameObject > UI > Image 创建图像）时，如果场景中还没有画布，则会自动创建画布。UI 元素将创建为此画布的子项。 画布区域在 Scene 视图中显示为矩形。这样可以轻松定位 UI 元素，而无需始终显示 Game 视图。 画布 使用 EventSystem 对象来协助消息系统。
Unity UGUI 之 详解Canvas画布组件
咩咩的博客
07-17 1564
画布
Unity技术手册-UGUI零基础详细教程-Canvas详解
空名先生
09-13 8089
Canvas是展示UI的基础，所有U控件都必须是其子类，所以我们需要详细知道该组件的功能。 当你创建一个UI控件时，如果在Hierarchy（层级窗口）下没有Canvas组件的话，Unity会帮你自动创建一个Canvas，并将你的UI控件放于Canvas下，同时还会自动创建一个EventSystem，这个对象很重要，她是用来处理各种鼠标输入的事件的，是必不可少的一个功能。
04:canvas的三种渲染模式
weixin_33950757的博客
08-04 1900
什么是Canvas 使用UGUI来进行UI开发，离不开Canvas组件，所有的 UI 元素，要么自己包含 Canvas 组件，要么是 Canvas 组件所在 GameObject 的子节点。 2.Canvas 组件的参数 RenderMode，有三个选项：Screen Space - Overlay、Screen Space - Camera、World Space。 Screen Spa...
Unity 之 Canvas
丁香枝上，豆蔻梢头
03-23 1141
Canvas.ForceUpdateCanvases 强制更新画布 描述 强制更新所有画布的内容。 在最后一帧画布执行布局和内容生产的计算，仅在渲染之前，为了确保在该帧期间发生的最新的改变在画布上。这意味着在返回调用开始和首次更新返回调用时，画布下的布局和内容可能不是最新的。 ...
Unity(Canvas)
qq_24977805的博客
11-23 579
Render Mode Screen Space - Overlay(不需要摄像机,UI是永远显示在屏幕的最上方) 通常在使用纯2DUI，选择这种渲染模式。UI在屏幕的四周，功能性的UI Sort Order(层编号) Screen Space - Camera(需要摄像机，通常在使用2DUI和3D物体并存的场景中使用该模式) PlaneDistance(摄像机与画布距离...
Unity3d中UGUI组件精简复盘（二）Canvas及其相关组件
qq_1628941121的博客
06-09 3847
Canvas组件 canvas的三种渲染模式 所有的UI元素只有在Canvas下才能够正常显示 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eYp0n4he-1622920236081)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210529205615721.png)] Screen Space - Overlay：UI元素始终在3D物体之上的 [外链图片转存失败,源站
Unity Canvas设置
acuriousguy
05-14 4435
Raycast Target 如果UI元素不需要点击事件，取消勾选Raycast Target。因为UGUI的事件系统会遍历所有带Raycast Target 的组件。 Text 描边和阴影 OutLine 和Shadow 组件提供文本的描边和阴影。能用阴影不用描边，因为阴影多画一次，描边画4次。 ...
Unity Canvas渲染原理
11-14
<think> 我们正在讨论Unity Canvas的渲染原理。根据引用内容，Canvas有三种渲染模式：Screen Space - Overlay、Screen Space - Camera和World Space。此外，渲染顺序受Sorting Layer和Order in Layer影响。 用户要求了解渲染原理，因此我们需要解释这三种模式的工作原理及层级控制机制。 首先，Screen Space - Overlay模式直接将UI渲染到屏幕上，不受场景摄像机影响。其层级由Canvas组件上的Sort Layer和Order in Layer决定（引用[1][4][5]）。 其次，Screen Space - Camera模式将UI渲染到指定摄像机前的一个平面上。此时UI与场景物体的遮挡关系由两者到摄像机的距离决定（引用[2][4]）。例如，若场景物体比UI平面更靠近摄像机，物体会遮挡UI（引用[4]）。 最后，World Space模式使UI成为场景中的3D物体，完全由摄像机透视关系决定渲染顺序（引用[1]）。 关于层级控制： - Sorting Layer：在Project Settings中配置，下方图层显示在前（引用[4][5]）。 - Order in Layer：同一层内数值越大越靠前（引用[2][4]）。 此外，图形射线检测（Graphic Raycaster）用于处理UI交互（引用[3]）。 下面将按此框架组织回答，并添加相关问题。 </think> ### Unity Canvas渲染原理详解 Unity Canvas的渲染原理主要涉及三种渲染模式和层级排序机制，以下是核心要点： #### **一、三种渲染模式** 1. **Screen Space - Overlay模式** - UI直接渲染在屏幕最上层，不受场景摄像机影响 - 坐标系基于屏幕像素（左下角为原点） - 无需摄像机配置，性能开销最低 - 例：HUD界面常用此模式[^1][^5] 2. **Screen Space - Camera模式** - UI渲染在指定摄像机前方的平面上 - 渲染顺序：`物体深度 < UI平面距离`时物体会遮挡UI - 关键参数： - **Plane Distance**：控制UI与摄像机的距离 - **Render Camera**：绑定渲染摄像机[^1][^4] - 例：当场景物体比UI平面更靠近摄像机时，物体会遮挡UI[^4] 3. **World Space模式** - UI作为3D物体存在于场景中 - 完全受透视关系影响，可自由旋转缩放 - 需手动配置Rect Transform尺寸 - 例：VR/AR中的交互界面常用此模式[^1] #### **二、层级排序机制** 1. **Sorting Layer** - 在`Edit > Project Settings > Tags and Layers`中配置 - **底层逻辑**：列表下方的层级显示更靠前 - 例：新建`UI_Foreground`层置于`UI_Background`上方时，前者覆盖后者[^4][^5] 2. **Order in Layer** - 同一Sorting Layer内的排序依据 - **值越大显示越靠前**（如Order=10的Canvas覆盖Order=-10的）[^2] - 例：两个Canvas在相同Sorting Layer时，设置不同Order值控制叠放顺序[^2] ```csharp // 代码控制层级示例 Canvas canvas = GetComponent<Canvas>(); canvas.sortingLayerName = "UI_Foreground"; // 设置层级 canvas.sortingOrder = 5; // 设置同层顺序 ``` #### **三、渲染管线交互** - **图形射线检测(Graphic Raycaster)** - 负责处理UI交互事件 - 可配置忽略背面图形或被3D物体阻挡[^3] - **深度测试规则** - Screen Space-Camera模式下：UI平面与场景物体的遮挡关系由物体到摄像机的距离决定[^4] - World Space模式下：完全遵循3D空间深度排序 > **关键原理总结**：Canvas的渲染优先级由`Sorting Layer层级 > Order in Layer数值 > 空间深度`三级联锁决定，当层级冲突时前者优先级更高[^2][^5]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值