Unity UI SafeArea适配

手机的分辨率有很多中,而运行在手机上的游戏不可能对所有的分辨率都一一对应的制作UI,所以需要一种方法使UI在多种分辨率下进行缩放,以此来达到适配目的。

首先搭建如下UI:

如果设置画布来缩放UI可看Unity官网如下的链接:

设计用于多种分辨率的 UI - Unity 手册

接下来选择Canvas Scaler的UI缩放模式,以及项目UI的设计分辨率。

注:

在画布缩放器组件中,可将其 UI Scale Mode 设置为 Scale With Screen Size。使用此缩放模式,可以指定要用作参考的分辨率。如果当前屏幕分辨率小于或大于此参考分辨率,则会相应设置画布的缩放因子,使所有 UI 元素都与屏幕分辨率一起放大或缩小。

如果Screen Match Mode选择的是 Match Width Or Height,则或显示Match 的属性,此属性值可以是 0(宽度)、1(高度)或介于两者之间的值。默认情况下设置为 0,表示将当前屏幕宽度与画布缩放器宽度进行比较,如果 Match 属性设置为 0.5,则会将当前宽度与参考宽度做比较并将当前高度与参考高度做比较,并选择两者之间的缩放因子。

更多详情参考Canvas Scaler链接:

画布缩放器 (Canvas Scaler) - Unity 手册

然后将其分辨率改变之后,UI就可以按当前分辨率放大缩小了。

现在将Unity的Game窗口切换到Simulator

然后就会出现对应型号的手机屏,比如选择iPhone X

从上图可以看到有部分UI被遮挡了,

Unity有一个SafeArea的API可以处理这个问题

Screen-safeArea - Unity 脚本 API

SafeArea获得的是以像素为单位的屏幕安全区域。

将UI窗口的UI元素组件放置到一个空物体的子物体层级下:

注:空物体的需要将锚点预设选择为(铺满屏幕)才有效。

新建一个SafeAreaScaler脚本,挂载到SafeArea上,

获取Safe安全区的信息,然后计算锚点的最大最小值并归一化

cs 复制代码
Rect safeArea = Screen.safeArea;
Vector2 anchorMin = safeArea.position;
Vector2 anchorMax = safeArea.position + safeArea.size;

anchorMin.x /= Screen.width;
anchorMin.y /= Screen.height;
anchorMax.x /= Screen.width;
anchorMax.y /= Screen.height;

//设置SafeArea空物体的RectTransform
_rectTransform.anchorMin = anchorMin;
_rectTransform.anchorMax = anchorMax;

结果:

参考链接:

Unity Scalable UI Tutorial - Create UI For Any Resolution | Scalable Canvas Settings in Unity (youtube.com)

Unity UI Mobile Safe Area | Make UI visible on all resolutions and devices (youtube.com)

Master Safe Area in Unity | Essential Mobile UI Design Tutorial (youtube.com)

Set in Unity UI Mobile Safe Area In All resolution and Device (youtube.com)

相关推荐
nnsix1 小时前
Unity PicoVR开发 实时预览Unity场景 在Pico设备中(串流)
unity·游戏引擎
一只一只7 小时前
Unity之UGUI Button按钮组件详细使用教程
unity·游戏引擎·ugui·button·ugui button
leiming69 小时前
c++ QT 开发第二天,用ui按钮点亮实体led
开发语言·qt·ui
神米米9 小时前
Maya快速安装UE4 布料权重绘制插件PhysX导出apx
游戏引擎·ue4·maya
WarPigs10 小时前
Unity阴影
unity·游戏引擎
一只一只11 小时前
Unity之Invoke
unity·游戏引擎·invoke
技术小甜甜12 小时前
【Godot】【入门】信号系统从 0 到 1(UI/玩法彻底解耦的通用写法)
ui·游戏引擎·godot
特立独行的猫a13 小时前
Docker 管理利器:docker-compose-ui 与 Portainer 详解
运维·ui·docker·容器·portainer
技术小甜甜14 小时前
【Godot】【入门】节点生命周期怎么用(避免帧循环乱写导致卡顿的范式)
游戏引擎·godot
tealcwu14 小时前
【Unity踩坑】Simulate Touch Input From Mouse or Pen 导致检测不到鼠标点击和滚轮
unity·计算机外设·游戏引擎