自己主机做网站服务器,哪个网站有手工活做,京东页面网页设计与制作实训报告,网站制作好了怎么上传前言
本文会介绍一些关于UI适配的基础概念#xff0c;并且统计了市面上常见的设备的分辨率的情况。同时通过拆解目前市面上较为成功的两款休闲游戏Royal Match和Monopoly GO(两款均为近期游戏付费榜前几的游戏)#xff0c;大致推断出他们的适配策略#xff0c;以供学习和参…前言
本文会介绍一些关于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(适配换算后为1560720)。最长的设备是目前主流的安卓设备,长宽比是20:9(1600720)。平板方面最宽的设备为4:31280960。
各种分辨率下的显示区域对比
下图绘制了常见机型的分辨率显示的区域。白色区域的分辨率为720*1280。红色的分辨率为720*1600灰色区域的分辨率为720*1560绿色区域的分辨率为960*1280。同时为了方便起见后文中均以720*1280(720P)为设计分辨率进行讨论和拆解。实际在开发过程中可以根据项目的要求选择更高或者更低的设计分辨率进行设计。比如画面要求高并且面对高端设备的用户可以采用1080*19201080P的设计分辨率出图。 热门游戏的适配策略拆解
本次拆解主要是参考了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*1560iphonexs。
UI元素同样是宽度适配。底部专门为iphone的Home Indicator保留了35个像素。 顶部UI则是保留了52个像素。 下图中左侧为iphone8p的截图右侧为ipad mini6的截图Ipad的适配则比较特别经过缩放对比后发现UI所在区域的大小为720*1496。底部为Home 导航额外预留了一块空间。底部UI的背景通过九宫格拉伸宽度和高度均进行了缩放。但是按钮部分还是按照720的宽度进行排布。并没有等间距摆放充满整个屏幕的宽度。由于ipad没有刘海顶部UI直接贴顶边同样也是在720的宽度内摆放. 背景图部分
下面左侧是720*1280iphone 8p的游戏内截图右侧为720*1600的截图。通过缩放对比发现右侧图片是左侧图直接等比缩放得到 下面的图则是ipad的背景缩放后与iphone 8p的图缩放后的对比。可以看到ipad的背景是要比720要更宽一些 最后通过解包royal match的资源后找到图集中的实际背景图 实际的大小为1736*2894换算后的比例为768*1280 monopoly go!
UI部分
下图中左侧为720*1280右侧为720*1560iphonexs,同样是采用了宽度适配的方式。顶部栏在布局的时候为刘海屏留出了47个像素 底部为Home Indicator保留了52个像素。同样是采用UI拉九宫格的方式填充空白部分 下面第一张图中左侧是840*1280ipad mini右侧是720*1280iphone 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。
创作不易如果觉得这篇文章对你有所帮助可以动动小手点个赞哈ღ( ´ᴗ )比心
