0


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

官方参考效果:
在这里插入图片描述
请添加图片描述

标签: 虚幻 ue5 ui

本文转载自: https://blog.csdn.net/qq_35079107/article/details/127469354
版权归原作者 灵境引路人 所有, 如有侵权,请联系我们删除。

“【虚幻引擎UE】UE5 UMG布局和视觉设计(自适应篇)”的评论:

还没有评论