UMG屏幕适配

一:如何确定设计分辨率?

设计分辨率的制定主要需要考虑市场主流机型,美术画质要求, 设计资源占用的内存;根据Tecent移动统计, 2019.12月份Android和IOS的主流机型的物理分辨率如图所示

IOS
Android
| 图一 | 最小分辨率 | 最大分辨率为 | 最小宽阔比 | 最大宽阔比
| Nil | 1334 750 | 2668 1242(XSMAX) | 16:9 | 19.5: 9(IPHONE X)
| 图二 | 1280 750 | 2400 1176(P30Pro) | 15.36 * 9 | 19:9(三星S10)

从上图看主流机型分辨率主要分布在(1280, 720) ~ (2668, 1242)之间, 宽阔比主要分布在15:9到19.5:9之间,
所以分辨率和宽阔比是我们筛选的主要依据。目前开发游戏类型为MOBORPG横版,所以我们使用的适配
策略是高度充满,宽度动态适配的方式(UE4 DPIScale H模式)这种模式决定了宽阔比使用19.5:9, 在不考虑DPIScale的情况,基本决定设计分辨率为IPHONEX的分辨率,但是这个设计分辨率太大了,美术精度是非
常饱和,但是占用的程序内存太大,于是我定了两种方式

1.比较保守的方式,高度定位750, 那么可以计算750 / 1125(IPHONXHeight) , 求得DPI值0.667,经过在IPHONEXSMAX和IPHONEX上画质测试,可以满足策划和美术对画质的要求.

2.比较激进的方式,高度定位1080, 那么可以计算 1080 / 1125(IPHONXHeight), 求得DPI值0.96,这个画
质肯定要比750的画质更加精细,尤其是在大分辨率手机上,但是如果200M的内存就会多出来40~60M
的内存,所以当下使用了比较保守的方式,设计分辨率定位1624 * 750

二:设计分辨率如何适配机型?

1.刘海问题
图层
UMG分为2层,如图红色为UI安全区域和绿色为背景区域, 普通屏幕的Head区域没有遮挡,但继IPHONEX
出现刘海以后,就出现各种类似这种仿刘海的机型,所以避免刘海遮挡UI, 所以安全区域的层Margin需要保
证大于刘海的横屏宽度, 这个在Android和IOS 都有获取宽度的方式,当运行在无刘海的设备安全区域等于背
景区域,若有刘海则需要UI代码动态调整安全区域;

2.适配规则
DPI Scaling
因为当下使用的是UE4的引擎,UE4提供了DPIScaling的适配规则, 5种规则如下

1.最短边 (ShortestSide)
该选项将基于窗口的最短边来评估缩放曲线.
2.最长边 (LongsetSide)
基于窗口的最长边来评估缩放曲线.
3.水平 (Horizontal)
基于窗口的 X 轴来评估缩放曲线.
4.垂直 (vertical)
基于窗口的 Y 轴来评估缩放曲线.
5.用户自定义(Custom)
用户自定义规则。最小曲线(SmallestCurve) -同时基于XY两个轴来评缩放曲线.

本游戏的目标机型为IPHONEX所以在2436打点,Scale 设置为1, 1624打点,Scale设置为0.667, 你可以对
你感兴趣的分辨率打点,进行DPIScale配置,当然程序把这种规范告诉策划同学,让策划同学去打包修改成
他们期望的feel即可.本游戏使用的是水平方式,当水平方向水平宽度移动, UMG的Scale会随着DPICurve曲
线上的Scale点进行缩放。

3.UI布局方式
锚点和ScaleBox的合理使用,保证在制作之前和美术沟通清楚,布局变化的时候锚点的动向,需要脑补在
同的设备下这个锚点会怎么变化. 当然如果不清楚,可以写一个最简单的Ui Demo去验证梳理想法.

字体适配UE4DPI默认显示为96DPI, PSDPI默认图片显示为72DPI

The font size is a measure in point values. The conversion of points to Slate Units is done at 96 dpi.
So if you’re using a tool like Photoshop to prototype layouts and UI mock ups, be sure to change
thedefault dpi measurements from 72 dpi to 96 dpi.

所以设置字体具体字号的方式:UE4_FontSize = PS_72DPI_FontSize * 72DPI/96DPI / UE4_96DPI_Scale

3.美术设计
美术设计人员需要知晓当下屏幕适配的规则,对于复杂的界面在不同的宽阔比下,能够推想到UI布局是否
合理美观,如果一张设计图已经提交了程序这边,发现在宽阔比比较小的情况,会XXBug,那就尴尬了.

4.PAD
当下开发的游戏只考虑15:9 到19.5:9的情况,美术可以保证布局在这宽阔比下能够正常的适配,那么小于
15:9的PAD(大概在12:9~15:9) 这个就需要依据具体的功能区PAD版本的UI布局设计,为了验证这个想法我
分辨使用PAD, IPHONE7P,IPHONEX运行王者荣耀,发现背包功能PAD上面做了PAD版本的UI布局设计,
这是针对布局比较复杂的界面而言.

三:总结

适配没有最优的解决方案,根据游戏的类型确定好游戏适合哪种适配策略,在策略确定的情况下,保证程
序,美术, 策划同学都能理解适配的规则,各司其职,尤其是打点调整Scale值,这个程序可以让策划去调
节,打包验证,程序保证按照美术的设计合理的使用锚点,那么适配方案基本可以做的比较ok.


   转载规则


《UMG屏幕适配》 stars 采用 知识共享署名 4.0 国际许可协议 进行许可。
 上一篇
本篇 
UMG屏幕适配 UMG屏幕适配
一:如何确定设计分辨率?设计分辨率的制定主要需要考虑市场主流机型,美术画质要求, 设计资源占用的内存;根据Tecent移动统计, 2019.12月份Android和IOS的主流机型的物理分辨率如图所示 | 图一 | 最小分辨率
2018-01-22
  目录