记录习惯【Unity 3D中3D场景下嵌套2D Canvas并实现窗口缩放】

Unity3D实现3D场景中的2DUI窗口化缩放
本篇博客介绍了如何在Unity2020.3.16f1c1中使用URP项目,创建一个3D场景并嵌套2DUI,让UI能够随窗口大小变化按比例缩放。首先,建立主副相机,设置固定分辨率,然后在副相机下创建Canvas,并调整其属性。通过设置玩家设置支持不同纵横比,实现了窗口化缩放,3D场景不受影响,2DUI可以随窗口大小动态调整,达到预期效果。

实现的功能是在3D场景中嵌套2DUI,Unity可窗口化,按比例缩放。

(本文不牵扯技术性脚本和代码)

首先建立新项目,这里使用Unity2020.3.16f1c1(中文)建立URP项目,使用自带场景进行实施。

可以看到这里有一个主相机,我们建立一个副相机,display层2;

紧接着我们设置一下固定的分辨率,1920*1080

两个场景的分辨率设置完成之后,在副相机底下新建canvas,对cavas进行设置

 

注意上中Canvas所需设置,然后双击副相机内的canvas添加一些组件,以供观察效果。

这里添加一个inputField和一个button供后期使用,此时运行可以看到cavas是固定的,如下图:

 上图中cavas固定,且不影响3D场景的正常使用,可能有人注意到下面的tip,只需要把副相机的Audio listener脚本取消即可,如下图:

那么接下来,对项目的玩家设置进行设置,达到窗口化缩放目的。 

 

 上图中支持的纵横比可以根据实际进行选择,打包看效果。

可以看到下图,默认打开是窗口化的,我是4K屏。

我进行拖动缩放后的效果如下(动图): 

可见3D场景不会受到影响,而CANVAS也是随着缩放,简单的目的实现了。

Over

 

 

 

 

 

<think>好的,我现在需要帮助用户解决在Unity中添加Canvas组件的问题。根据用户提供的引用内容,首先需要确认Canvas的基本概念和用途。引用中提到CanvasUI元素的容器,负责渲染和管理UI元素,比如引用[1]和[2]都强调了这一点。接下来,用户想知道如何具体创建和添加Canvas组件,可能需要分步骤说明。 首先,回忆Unity的操作流程,创建Canvas通常有两种方式:自动创建和手动添加。自动创建的情况是在创建UI元素时,比如添加一个按钮或文本,Unity会自动生成Canvas和EventSystem对象。这一点可能在引用[4]中提到过,当创建UI界面时Canvas是基本元素之一。 其次,手动添加的步骤应该是通过Hierarchy面板右键选择UI -> Canvas,或者通过组件菜单添加。这里需要确保用户知道如何在菜单中找到Canvas组件,可能需要详细描述路径,比如Component -> UI -> Canvas,不过实际上Canvas是一个GameObject,所以应该是GameObject -> UI -> Canvas。需要检查Unity的菜单结构是否正确,避免误导用户。 另外,关于Canvas的设置,引用[5]提到了CanvasScaler组件用于适配不同分辨率,因此在添加Canvas后可能需要调整其缩放模式。比如设置Screen Space - Overlay或Camera模式,以及调整缩放选项,如Scale With Screen Size,这些都会影响UI的显示效果。 还需要注意,添加Canvas后会自动生成EventSystem对象,用于处理输入事件。如果用户手动添加Canvas,可能需要确认EventSystem是否存在,否则输入可能无法正常工作。引用中没有提到EventSystem,但这是实际使用中的常见问题,可能需要补充说明。 最后,用户可能需要示例代码或截图,但根据用户提供的引用[5]中的代码,可以建议用户使用CanvasScaler进行适配,但具体如何添加到Canvas可能需要更详细的步骤,比如在Inspector面板中添加组件。 总结回答结构应该是步骤化的,先自动创建,再手动添加,然后配置参数,最后注意事项。同时结合引用内容,如引用[1][2][4][5]来支持各个步骤的正确性。确保回答清晰,符合用户的需求,同时引用正确来源。</think>### 如何在 Unity 中创建和添加 Canvas 组件 #### **方法 1:自动创建(通过添加 UI 元素)** 1. **新建 UI 元素** 在 Unity 编辑器中,右键点击 Hierarchy 面板,选择 `UI` > `Text`(或其他 UI 元素,如 `Button`、`Image`)。 - Unity 会自动生成以下对象: - **Canvas**:作为所有 UI 元素的容器[^1][^4]。 - **EventSystem**:用于处理 UI 事件(如点击、拖拽)[^2]。 ```plaintext 示例路径: Hierarchy 面板 → 右键 → UI → Text/Button/Image ``` --- #### **方法 2:手动添加** 1. **直接创建 Canvas** - 右键点击 Hierarchy 面板,选择 `UI` > `Canvas`。 - 此时仅生成 Canvas 对象,需手动添加 `EventSystem`(通过 `GameObject` > `UI` > `EventSystem`)。 2. **通过组件菜单添加** - 选中场景中的任意 GameObject,点击菜单栏的 `Component` > `UI` > `Canvas`。 - 注意:此方法会为该 GameObject 附加 Canvas 组件,但通常建议单独创建 Canvas 以管理 UI 层级。 --- #### **配置 Canvas 参数** 在 Inspector 面板中调整 Canvas 的关键属性: 1. **Render Mode** - **Screen Space - Overlay**:UI 直接覆盖在屏幕上,无需摄像机[^1]。 - **Screen Space - Camera**:UI 由指定摄像机渲染,适合 3D 场景中的 UI。 - **World Space**:UI 作为 3D 对象存在于场景中[^2]。 2. **Canvas Scaler** 添加 `Canvas Scaler` 组件(Component > UI > Canvas Scaler),用于适配不同分辨率: - 选择 `Scale With Screen Size` 模式,设置参考分辨率(如 1920x1080)[^5]。 - 调整 `Match Width or Height` 参数,平衡宽高比适配。 --- #### **注意事项** 1. **层级管理** - 所有 UI 元素必须作为 Canvas 的子对象存在,否则无法显示。 - 通过调整子对象的顺序控制渲染优先级(越靠下的元素越晚渲染,显示在上层)。 2. **性能优化** - 避免嵌套过多 Canvas,每个 Canvas 会独立生成一个 Draw Call。 - 使用 `RectMask2D` 或 `Mask` 组件限制渲染区域。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

NS_Speak

避免各种踩坑,请多关注!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值