【虚幻引擎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）
面板中作为其子代的任何其他控件。这些子控件将在出现"不安全"区域时缩放和调整。

官方参考效果：

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

[虚幻引擎][UE][UE5]像素流送(Pixel Streaming)，像素流去掉黑边和按钮[UE5.1.0]，鼠标控制
[虚幻引擎][UE][UE5]像素流送Pixel Streaming,像素流去掉黑边和按钮[UE5.1.0] 1.写在前面 01.作者碎碎念 02.结果演示截图视频教程 2.需要准备的软件 3.U ...
[虚幻引擎][UE][UE5]简单的游戏读档存档
[虚幻引擎][UE][UE5]简单的游戏读档存档
[虚幻引擎][UE][UE5]在UE中画一个线框球，网格连接画球，高阶画球并操控
[虚幻引擎][UE][UE5]在UE中画一个线框球,网格连接画球,高阶画球并操控 1.材质法 2.绘制调试球体 3.网格连接蓝图项目链接: 4.高阶画球并操控蓝图项目链接: 1.材质法缺点:是实 ...
【虚幻引擎UE】UE4/UE5 功能性插件推荐及使用介绍
一.VaRest(API调取插件) 实现POST/GET基本方法,并支持HEAD带信息. 使用案例:[虚幻引擎UE]UE5 三种模式调用API详解(案例基于免费Varest插件) 二.Easy Fil ...
【虚幻引擎UE】UE5 三种模式调用API详解（案例基于免费Varest插件）
[虚幻引擎UE]UE5 三种模式调用API详解(案例基于免费Varest插件) 想通过UE5 调用API实现GET和POST, 可以通过自己编写C++方法, 或基于相关HTTP请求插件, 如Vares ...
【虚幻引擎UE】UE5仅需5个步骤快速实现AR项目调试与打包（安卓篇）
[虚幻引擎UE]UE5仅需5个步骤快速实现移动端AR项目调试 1.确保VS环境符合要求到控制面板找到安装程序点击更改→修改. 以下是我自己确认可用的勾选. 2.安装JAVA环境,Android SD ...
【虚幻引擎UE】UE4/UE5 新人科普向
一.前言 Unreal Engine是当前最为流行的游戏引擎之一,具有丰富的游戏开发功能和强大的游戏引擎渲染能力. 二.基础 UE5官方文档:UE5官方文档非常详细,介绍了UE5的各个功能和应用,适合 ...
【虚幻引擎UE】UE4/UE5 功能性插件推荐及使用介绍 2
一.UnrealEditorPythonScripts (基于UE5 的Python支持插件) 支持Python语言基于UE5进行开发 GIT地址:https://github.com/mamonie ...
【虚幻引擎UE】UE5 阴影异常与优化
一.消除阴影锯齿异常效果: 模型锯齿状阴影. 解决方案: ① 确定打开虚拟阴影贴图. 虚拟阴影贴图(VSM)是一种全新的阴影贴图方法,可以提供稳定的高分辨率阴影.通过与虚幻引擎5的Nanite虚拟几 ...