虚幻4DPI自适应缩放规则解析

朴灿烈づ我的快乐病毒、 2022-07-14 08:26 460阅读 0赞

**UMG** 支持与分辨率无关的 UI进行自动缩放，可以设置UI随窗口大小变化的股规则。在 **ProjectSetting-Engine** 部分下的 **设置** 菜单中，提供了应用于每个项目的默认 DPI 缩放规则。（4.6版本与新版本所在位置不同，看下图）

![Center][]

图 1  4.9版本的DPI设置界面

![Center 1][]

图 2  4.6版本的DPI设置界面

首先，我们先做个测试。下面图3一直到图6是对当前游戏UI随窗口变化的效果测试。

![Center 2][]

图 3

![Center 3][]

图 4

注意，横向拉伸图中的按钮大小没有变化（如图3与图4）。

![Center 4][]

图 5

长宽比小于1时，按钮开始变小（如图5）。

![Center 5][]

图 6

竖向拉伸，按钮变小（如图6）。

上面的测试说明，UE4要保持控件在竖直方向的比例位置正常，也就是说如果窗口在竖直方向变长，对应按钮就会按照一定比例变大。如果窗口在水平方向上变长，按钮没有任何变化。但是当窗口竖直方向长度大于水平方向长度时，按钮就会反过来随着水平方向而变化。

上面的效果总结一下，就是UMG界面随着窗口最短的一个边的拉伸或者缩短而放大或缩小。其实，这时DPI缩放规则之一ShortestSide。我们在设置界面可以设置5种规则。

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

**最长边（**LongsetSide**）** \-基于窗口的最长边来评估缩放曲线。

**水平** （Horizontal）\-基于窗口的 X 轴来评估缩放曲线。

**垂直（**vertical**）** \-基于窗口的 Y 轴来评估缩放曲线。

**用户自定义（**Custom**）**\-用户自定义规则。（4.9以后版本，暂时不清楚怎么使用）

**最小曲线（**SmallestCurve**）** \-同时基于XY两个轴来评估缩放曲线。（4.6以前的版本）

我们常用的就是第一种规则。

下面我们看一下，曲线如何设置。在4.6版本，有两个曲线，分别表示窗口的X轴和Y轴，在4.9以后的版本，只有一条曲线（因为在前4种规则中，我们其实只是使用一条曲线）。

曲线的使用与UE4里的curve相同，添加一个关键点，输入对应分辨率和Scale（缩放比例）。如图2-7就表示在窗口Y轴方向长度为1080时，UMG控件的大小为1倍，当长度为480的时候，UMG控件大小为原来的0.44倍，如果长度继续缩小的话，控件的大小也不会再改变了。同时，我们也可以事先创建好曲线，在这里调用。

![Center 6][]

图 7  4.5版本设置界面

![Center 7][]

图 8  4.9版本设置界面

备注：1.目前custom scaling Ruleclass的设置还不清楚，不知道应该创建什么文件。所以新版本暂时不知道如何达到那种在两个方向同时缩小的办法。

2.该模块设置的类位置在\\UE4\\UnrealEngine-4.8-Full\\Engine\\Source\\Runtime\\Engine\\Classes\\Engine\\UserInterfaceSettings.h

原文链接（转载请标明）：http://blog.csdn.net/u012999985/article/details/53447540

[Center]: /images/20220714/0136760ea573429e87a8332138c4ac0f.png
[Center 1]: /images/20220714/4d09eda974364b6cb74136160caaa8de.png
[Center 2]: /images/20220714/9e7627d4aa1148539b02cb1bca4d6417.png
[Center 3]: /images/20220714/9aacebcdb1fc4299bcb10b00984f4d38.png
[Center 4]: /images/20220714/fe3fb2b8db454b68ba34fc0463c09594.png
[Center 5]: /images/20220714/b78a4121ba19444b9907db53071cfb49.png
[Center 6]: /images/20220714/2068fbd083d4442786d061315103295f.png
[Center 7]: /images/20220714/6c8fd25cc4e8498aab8c4f1f8d83df21.png