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

已于 2023-07-21 14:23:46 修改
阅读量8.2k 收藏 23
点赞数 6
分类专栏： 虚幻引擎UE5 常见问题合集2 文章标签： 虚幻 ue5 ui
于 2022-10-28 12:19:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35079107/article/details/127469354
版权
本文详细介绍了虚幻引擎UE5中UMG（Unreal Motion Graphics）的布局和视觉设计，包括适配基础操作、锚点与自适应、DPI缩放自适应、UMG裁剪自适应以及安全区自适应。内容涵盖如何实现UI在不同设备和分辨率下的良好显示，以及官方文档推荐的设置和技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

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

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

一、适配基础操作

1、切换横纵屏 / 预览不同机型适配效果的入口：
在这里插入图片描述
2、在PIE和单机游戏中测试UI的默认设置
在这里插入图片描述

二、

了解本专栏 订阅专栏 解锁全文 超级会员免费看
UE基础篇二：UMG
yuchenwuhen的专栏
11-15 1043
为保证设置正常工作，需确保进行交互的其他控件不会从键盘显示（Keypad Display）控件处移开聚焦。如果这些选项设为true，那么点按某个按钮时，聚焦就会从键盘显示（Keypad Display）控件转移到该按钮上。只要图像控件具有带材质的平板刷功能，您可以向其请求动态图像（只需要创建一次，然后对其进行缓存即可），从而轻松实现这一目的。运行时，要修改"布局"下的属性，你可以访问蓝图或 C++ 控件的插槽成员，然后将其。类型，我们就可以设置在玩家点击"StartButton"时框的显示位置。
Unreal Engine开发：蓝图系统使用_蓝图UI：使用UMG创建用户界面
最新发布
chenlz2007的博客
03-30 727
UMG允许开发者创建自定义控件，这些控件可以包含多个子控件，并且可以复用在不同的Widget蓝图中。本部分将演示如何创建一个自定义控件。在Content Browser中右键点击，选择。在弹出的窗口中选择，命名为，然后点击Create。打开蓝图编辑器。在Palette中选择，拖拽到Widget Tree中。在中添加一个Text Block和一个控件。在Design视图中调整控件的位置和大小。打开需要使用自定义控件的Widget蓝图（例如在Palette中选择，拖拽到Widget Tree中。
UE的UMG布局排版
ttod的博客
10-25 2256
UE的UMG布局排版
虚幻4DPI自适应缩放规则解析
热门推荐
Jerish的博客
12-03 2万+
UMG 支持与分辨率无关的 UI进行自动缩放，可以设置UI随窗口大小变化的股规则。在 ProjectSetting-Engine 部分下的 设置 菜单中，提供了应用于每个项目的默认 DPI 缩放规则。（4.6版本与新版本所在位置不同，看下图）                                      图 1  4.9版本的DPI设置界面                       ...
虚幻5学习自用-界面介绍
lr1219907412的博客
03-23 1603
本文主要用于的学习整理本文介绍基本界面，，用于对界面有一个简单的了解，不必深入阅读，不包括蓝图界面、变量界面等。进入之后UE5后界面如下图。界面包括菜单栏、快捷按钮（creat（对象创建）、Blueprint（蓝图创建）、level sequence（动画序列））、Word Outliner(世界大纲)、Details(细节)、ContentDrawer(内容浏览器)以及Viewport（视窗）。
UE5 runtime模式下自定义视口大小和位置并跟随分辨率自适应缩放
qq_41410054的博客
12-20 3335
UE5 runtime模式下自定义视口大小和位置并跟随分辨率自适应缩放
UE5 UE4 UMG/UI的文字自动缩放/随着按钮缩放
Deveuper的博客
03-20 6615
使用ScaleBox，将text组件放入其中，调整位置即可
UE5——UMG——分析5
weixin_43945471的博客
03-19 1289
材质绘图:SDF 有向距离场1.每一个点的数值=离最近图形的距离值，形状内部为负值，外部为正值2.可以用于U边框，阴影等效果一次绘制，缩放不会变模糊，更加通用3.多个SDF容易合并，将简单图形组合成复杂图形一些高级应用:2.碰撞测试3.距离场阴影4.程序化建模5.体积云。
[UE4]UMG设置组件自适应居中或靠边
玄冬Wong
05-11 5040
比如你的UI中有些组件需要居中显示，有些需要始终在右上角并且与上边框和右边框保持固定的距离等等，对于这种需要动态适应屏幕分辨率的UI组件，有两种设置方式： 1，直接编辑组件的属性Anchors     2，代码控制 ULoginWidget* LoginUI = NULL; //创建UI的逻辑省略 if (UImage* backImg = Cast<UImage>...
UE5——UMG——分析1
weixin_43945471的博客
03-16 746
SWiget控件基本都继承这个三大类：SPanel，SCompoundWidget，SLeafWidgetSLeafWidget：没有Slot的Widget，自己就是控件树的叶子节点SCompoundWidget：一个Slot的Widget,Slot内可以放置一个子WidgetSPanel：多个Slot的Widget，通过OnArrangeChildren对Widget布局。
UE5——UMG——分析3
weixin_43945471的博客
03-18 956
1.UI贴图关掉MIPS，可以省掉3分之一内存，一般ASTC4x4压缩肉眼看不出变化，大色块图可以更激进。比如背包系统，能明确知道行列个数，每个ltem固定大小，可以在背包的容器层直接给出计算结果。4.绘制的element也可以改为自定义绘制的方式，自行缓存顶点索引等数据，避免每帧重新计算。3.在逻辑很明确时，可以override对应函数，直接给出布局结果，避免递归子Widget。虚幻商城和github都有第三方封装过的UMG组件，包括网格，粒子，Niagara等版本。
UE5【UMG】 - Simple Menu UI v3 学习笔记
Unity、UE5开发
02-02 1892
UE5，UMG插件学习笔记，了解UI的做法
斯坦福UE4 C++课学习补充24：伤害数值
weixin_51524146的博客
08-30 968
为什么这里要这样做？
UE4实现自适应小地图的方法详解
在讨论“UE4自适应小地图”这个话题时，我们首先要了解UE4（Unreal Engine 4）是什么，它是一款广泛应用于游戏开发领域的游戏引擎，也支持开发虚拟现实（VR）、增强现实（AR）和影视级内容。小地图在游戏设计中是...
UE5——UMG——分析4
weixin_43945471的博客
03-18 1660
lmage:需要绘制的贴图或材质Tint:1.图片叠加颜色 2.Brush的最终颜色=lmage*TintDraW As1.Image 普通贴图/材质，4个顶点2.Border 九宫格边框贴图/材质，32个顶点，可单独控制tiling3.Box 九宫格贴图/材质，常用于绘制窗口面板背景，16个顶点4.RoundedBox圆角9宫格贴图/材质，常用于绘制圆角按钮等Margin（Box/Border专用）0utline Settings（RoundedBox专用）
UE5——UMG——分析6
weixin_43945471的博客
03-19 975
需要尽量把主界面Ul的drawcal控制在20以内，场景和角色/玩法就会有更多的性能发挥空间，很多3A追求的极简风UI是个不错的选择。解决思路:定制绘制流程，将icon和文字一次绘制，程序化绘制边框和品质背景色等信息，减少drawcal提交。5.通过合图集，材质内部拼接绘制可以显著减小drawcal，降低CPU开销，能解决一部分问题。引擎材质大部分逻辑默认是在PS执行，但UI的顶点很少，实际需要尽可能把逻辑放到VS做。2，合Instance，每个ltem一个Instance。
UE5 实现UMG环状图控件
IgoAheadNow的专栏
04-25 736
与饼状图类似，唯一不同的是中心位置是中空的，需要算出每一度的内圆和外圆的顶点，需要使用2个三角形填充区域才能完成一个梯形的绘制。使用UE5原生方式实现常用图表控件之一——环状图，可用于蓝图调用。
UE5 实现UMG曲线图控件
IgoAheadNow的专栏
04-25 1665
第一步：新建一个Class类，继承自UUserWidget类（依赖模块需要添加SlateCore和UMG）第四步：重载NativeOnMouseMove方法，判断当前鼠标位置，控制是否显示曲线点的值标签。1、圆滑曲线的可以依靠FRichCurve来对关键点进行定位后进行曲线模拟。第三步：重载NativeTick方法，当重载数据后添加曲线绘制的动画实现。第二步：重载NativePaint方法，实现曲线图绘制。2、坐标轴的曲线点与绘图的屏幕坐标点的转换。
UE5 实现UMG柱状图控件
IgoAheadNow的专栏
04-25 918
2、根据X轴的类别个数分别计算出每个类别的宽度及每个柱状允许的宽度并取合适值。使用UE5原生方式实现常用图表控件之一——柱状图，可用于蓝图调用。1、使用使用四个顶点组成2个三角形填充区域进行柱状绘制。3、Y轴坐标与屏幕坐标值的转换。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

灵境引路人

感谢投喂 ~ ❤

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值