UGUI UI摄像机设置

UGUI UI摄像机设置

问题描述

创建UGUI的UI时,如果设置不正确,UI显示就会比较奇怪。

如:在Unity编辑器编辑UI(图1),但是打包出来安装到手机却是另一种表现(图2)

图1
图1.Unity编辑器UI展示

 

图2
图2.手机上UI展示,这样是不正常的。

 

解决问题

现在记下我的设置(当然肯定不只有我的设置是正确的)

首先,在场景中随便添加一个UGUI组件,Unity会自动创建Canvas节点及组件

然后,在Canvas节点下添加一个摄像机,改名为UICamera。修改Camera组件参数。如图A。

然后,修改Canvas组件与Canvas Scaler组件参数。如图B。

最后,打包运行查看在手机上展示的UI。如图C。

图A.新增摄像机,并设置参数

 

图B.修改Canvas组件与Canvas Scaler组件参数

 

图C.打包测试

 

### 配置和使用 UGUI 进行屏幕 UI 设置 #### 创建 Canvas 为了创建并配置用于屏幕适配的UI,在Unity编辑器中通过`GameObject > UI > Canvas`来添加一个新的Canvas对象到场景中。新创建的Canvas默认带有`Canvas`、`CanvasScaler`以及`Graphic Raycaster`组件,这些对于处理不同分辨率下的UI显示至关重要[^1]。 #### 渲染模式设定 Canvas拥有三种渲染模式:Screen Space-Overlay, Screen Space-Camera 和 World Space。针对全屏覆盖类型的UI界面推荐采用Screen Space-Overlay模式;如果希望基于特定摄像机视角呈现UI,则应选择Screen Space-Camera,并指定相应的Render Camera[^3]。 #### 屏幕适配策略 实现良好的屏幕适配效果依赖于合理调整`Canvas Scaler`组件参数: - **Scale Mode**: 可选Constant Pixel Size(固定像素大小), Scale With Screen Size(随屏幕尺寸缩放). 后者更适合多设备兼容需求. - 当选用Scale With Screen Size时需进一步设置Reference Resolution(参考分辨率为设计稿的实际尺寸),Match条件决定了宽度还是高度优先匹配实际屏幕比例,以此保障最佳视觉体验. ```csharp // 动态修改Canvas Scaler的匹配方式示例代码 using UnityEngine; using UnityEngine.UI; public class UIScaler : MonoBehaviour { private void Start() { CanvasScaler scaler = GetComponent<CanvasScaler>(); scaler.matchWidthOrHeight = 0f; // 宽度优先 // 或者 //scaler.matchWidthOrHeight = 1f; // 高度优先 // 或者介于两者之间的一个值 } } ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值