【虚幻引擎UE】UE5 UMG布局和视觉设计（自适应篇）

前言

UI自适应是前端基础，本文基于官方文档讲解一些常见必备知识点。

参考文档
1、官方文档：UMG布局和视觉设计
2、官方文档：DPI 缩放

一、适配基础操作

1、切换横纵屏 / 预览不同机型适配效果的入口：

2、在PIE和单机游戏中测试UI的默认设置

二、锚点和自适应

1、锚点偏移：
固定创建对象位置时锚点应该尽量设置在对象的左上角位置，尽量不要有太大偏移。
以下是设置较大偏移的情况下，相对左侧上侧偏移较大超出屏幕，效果不佳。


设置到左上角时，效果正常。

2、预设锚点实现自适应停靠/拉伸：

水平垂直拉伸效果：

3、手动锚点：实现多个控件彼此锚定
手动修改前：

修改方法：
按住ctrl，点击锚点进行拖动。

调整后的效果：

三、DPI 缩放自适应

UMG 支持与分辨率无关的 UI 进行自动缩放。在 用户界面 部分下的 项目设置 菜单中，提供了应用于每个项目的默认 DPI
缩放规则，这些规则您可以根据具体需求自行配置。你可以通过输入框调整 应用比例（Application Scale），你可以选择
DPI比例规则，以及调整 DPI曲线。

官方示例效果：

关于 DPI 缩放规则，您可以将其设为以下四个选项中的一个：

最短边：该选项将基于窗口的最短边来评估缩放曲线（最常用的设置）。

最长边：基于窗口的最长边来评估缩放曲线。

水平：基于窗口的 X 轴来评估缩放曲线。

垂直：基于窗口的 Y 轴来评估缩放曲线。

1、可以加载外部曲线（存取配置信息）
2、可以设置默认屏幕像素比例。

四、UMG裁剪自适应

UMG中的裁剪系统使用 Slate 裁剪系统 作为框架来控制为控件（或编辑器的其他部分） 显示文本、图像或内容的方式。裁剪
的工作原理是使用边界框将渲染对象（图形和文本）限制在某个区域中，以使超出边界框的任何内容都不显示。

左图 - 未启用裁剪的效果。

中图 - 文本上启用裁剪的效果。

右图 - 按钮上启用裁剪的效果。

裁剪方式官方说明：

五、UMG安全区自适应

安全区（Safe Zone）
控件是开发能在许多不同设备上运行的游戏用户界面（UI）必不可少的组成部分。安全区的用途是避免在技术上能够使用但玩家看不到的地方显示UI，例如电视显示屏的边缘或iPhoneX上的黑色凹槽和主页栏下方的区域。UMG设计器让您可以测试您的UI和所应用的安全区控件在设备上的分辨率（或旋转）效果。

当您将 安全区 控件添加到 设计器 时，该控件将缩放 层级（Hierarchy）
面板中作为其子代的任何其他控件。这些子控件将在出现"不安全"区域时缩放和调整。

官方参考效果：