Unity UI适配规则和对热门游戏适配策略的拆解

前言

本文会介绍一些关于UI适配的基础概念，并且统计了市面上常见的设备的分辨率的情况。同时通过拆解目前市面上较为成功的两款休闲游戏Royal Match和Monopoly GO(两款均为近期游戏付费榜前几的游戏)，大致推断出他们的适配策略，以供学习和参考。

基础概念

设计分辨率：设计分辨率是指在游戏开发中用来制作游戏资源（如图形、UI元素等）的基准分辨率。设计分辨率通常是一个固定值，游戏的所有资源都是基于这个分辨率进行创建和设计的。设计分辨率的选择对游戏的视觉效果和用户体验至关重要。

参考分辨率：参考分辨率是指在Canvas Scaler组件中设置的用于设计UI的目标分辨率。它代表了游戏UI在这个分辨率下的理想显示效果。Canvas Scaler会根据实际运行时的屏幕分辨率和参考分辨率的比例来缩放UI元素，以便在不同分辨率下尽可能保持一致的UI布局和外观。

高度适配：在高度适配时，游戏的UI元素和场景内容会根据屏幕的垂直高度进行调整。这意味着无论屏幕的宽高比如何，游戏的内容始终会填充整个屏幕的垂直空间，而水平方向可能会存在一些留白或被裁剪。

宽度适配：在宽度适配时，游戏的UI元素和场景内容会根据屏幕的水平宽度进行调整。这意味着无论屏幕的宽高比如何，游戏的内容始终会填充整个屏幕的水平空间，而垂直方向可能会存在一些留白或被裁剪。

Unity中相关设置

Canvas下的Canvas Scaler可以修改Reference Resolution（参考分辨率）。另外可以将Screen Match Mode设置为Match Width Or Height。代表可以进行宽度适配或者高度适配。宽度适配的话，将Match值设置为0，高度适配则是设置为1.

在Game栏可以设置实际显示的分辨率大小，可以通过该设置模拟各种分辨率的设备。

常见屏幕尺寸

下面是收集了市面上一些常见的设备以及极端长宽比设备的屏幕大小

iphoneX及以后的刘海屏设备，长宽比均为19.5比9(适配换算后为1560：720)。最长的设备是目前主流的安卓设备,长宽比是20:9(1600：720)。平板方面最宽的设备为4:3（1280：960）。

各种分辨率下的显示区域对比

下图绘制了常见机型的分辨率显示的区域。白色区域的分辨率为720*1280。红色的分辨率为720*1600，灰色区域的分辨率为720*1560，绿色区域的分辨率为960*1280。同时为了方便起见后文中均以720*1280(720P)为设计分辨率进行讨论和拆解。实际在开发过程中，可以根据项目的要求，选择更高或者更低的设计分辨率进行设计。比如画面要求高，并且面对高端设备的用户，可以采用1080*1920（1080P）的设计分辨率出图。

热门游戏的适配策略拆解

本次拆解，主要是参考了Royal Match和Monopoly GO!两款游戏，两款游戏分别在2024年1月全球热门移动游戏收入榜的2,3名。Royal Match的首次上线时间为2021年，Monopoly Go则为2023年，并且两款游戏均保持着较高的更新频率。通过拆解这两款游戏，可以大致了解当前欧美休闲厂商在UI适配上的策略，值得学习和借鉴。

RoyalMatch

UI部分

下面是对局部分的UI，左侧为720*1280右侧为720*1600。roy match的ui元素，都是在720*1280的分辨率下设计的。并且尽可能地充满整个屏幕。然后在屏幕高于1280的情况下，宽度适配，直接拉长背景。顶部和底部的UI都会贴边摆放。同时顶部UI会为刘海（挖孔）预留部分空间。

下图中左侧为720*1280,右侧为720*1560（iphonexs）。

UI元素同样是宽度适配。底部专门为iphone的Home Indicator保留了35个像素。

顶部UI则是保留了52个像素。

下图中左侧为iphone8p的截图，右侧为ipad mini6的截图，Ipad的适配则比较特别，经过缩放对比后发现，UI所在区域的大小为720*1496。底部为Home 导航额外预留了一块空间。底部UI的背景通过九宫格拉伸，宽度和高度均进行了缩放。但是按钮部分，还是按照720的宽度进行排布。并没有等间距摆放充满整个屏幕的宽度。由于ipad没有刘海，顶部UI直接贴顶边，同样也是在720的宽度内摆放.

背景图部分

下面左侧是720*1280（iphone 8p）的游戏内截图，右侧为720*1600的截图。通过缩放对比发现，右侧图片是左侧图直接等比缩放得到

下面的图则是ipad的背景缩放后与iphone 8p的图缩放后的对比。可以看到ipad的背景是要比720要更宽一些

最后通过解包royal match的资源后，找到图集中的实际背景图

实际的大小为1736*2894，换算后的比例为768*1280

monopoly go!

UI部分

下图中左侧为720*1280，右侧为720*1560（iphonexs）,同样是采用了宽度适配的方式。顶部栏在布局的时候为刘海屏留出了47个像素

底部为Home Indicator保留了52个像素。同样是采用UI拉九宫格的方式填充空白部分

下面第一张图中左侧是840*1280（ipad mini）右侧是720*1280（iphone 8p）。pad使用了高度适配，宽度拉伸的方式。

顶部和底部UI贴边摆放。同时底部也为home导航额外预留了一块区域，整体UI有所上移。顶部栏使用了九宫的方式左右拉伸了。底部背景缩放后填充整个空白区域。不同于RoyalMatch只在720的宽度内摆放按钮。大富翁go的顶部和底部的按钮，都按照缩放后的宽度，在840的区域内摆放。底部UI元素均匀摆放，顶部UI贴边摆放。

背景图部分

 从左到右的分辨率分别是840*1280(ipad mini6),720*1280(iphone8),720*1560(iphonexs),720*1600(iqoo neo 8pro)

对比之后，发现大富翁go应该是只用了一张720*1560的背景图。在pad上直接等比缩放。高度大于1560的设备，在刘海部分放置了一个黑条。Monopoly Go的标题则是单独切图，按照上面的UI适配规则放置在背景图上。

实际拆包后发现，使用的图片大小为487*1024.换算后为720*1513。通过底部UI填充的方式覆盖住1560的高度

总结

对比RoyalMatch和大富翁go。总结出以下几个共同点和不同的地方。在后续的UI设计中，可以参考他们的共同的部分进行资源的制作。不同部分的处理方式，需要与美术和产品沟通后，确定最后采用的策略。

共同点：

1.会根据设备的不同额外为刘海屏和Home导航预留部分空白区域，不会在该区域内摆放可以操作的UI。

2.顶部和底部的UI背景都会设计成可以进行九宫拉伸的背景。并且根据设备的不同填充空白区域。

3.UI的安全区域均为720*1280，确保了目前市面上最小设备能够完整展示UI。

4.在手机上，均采用宽度适配，高度拉伸的方式进行UI的摆放

不同点：

1.两个游戏为刘海屏和Home导航预留空白部分的像素不同。

2.在遇到比1560还要更长的设备时，royal match采用的是缩放背景图，填充空白区域的策略。大富翁go则是在顶部放置一个黑条覆盖空白区域

3.在ipad上大富翁go依旧是按照720*1280的分辨率，通过高度适配宽度拉伸的方式摆放UI。Royal match的设计分辨率则产生了改变，猜测是在720*1496的分辨率下进行高度适配。

4.大富翁go的全屏背景只使用了一张720*1560的图，然后根据设别不同进行等比例缩放。Royal match则是使用768*1280的背景，然后再进行等比缩放。

5.Royal Match在横向摆放UI时，仅在720的宽度内进行摆放，并不考虑宽度大于720的情况。大富翁go在宽度大于720时，则是会根据设备的宽度均匀（或者贴边）摆放UI。

创作不易，如果觉得这篇文章对你有所帮助，可以动动小手，点个赞哈，ღ( ´･ᴗ･` )比心