UGUI分辨率自适应

发表于2016-06-23
评论0 8.8k浏览
  随着游戏设备越来越多,屏幕的分辨率也越来越多。而针对不同的屏幕分辨率,制作不同的素材是不现实的,所以就需要我们提供一套分辨率自适应的机制,来适配不同屏幕分辨率的设备。这篇博客就来介绍一下UGUI提供的分辨率自适应的机制。
   游戏中的分辨率自适应主要包括两部分:一是在不同尺寸的屏幕下,整体缩放比例的计算方式;二是在不同比例(宽高比)的屏幕下,UI控件所处的位置关系,也成为布局。

整体缩放比例
  UGUI中Canvas Scaler组件是负责整体缩放机制的,缩放模式提供了三种:
  Constant Pixel Size:固定像素尺寸,即按素材的“固定像素”渲染
  Scale Factor:缩放比例,在素材原尺寸上的缩放比例,默认值是1
  Reference Pixels Per Unit:每个unity单位对应的像素数
  Scale With Screen Size:根据屏幕尺寸缩放
  Reference Resolution:标准分辨率,这是我们提供给美术做图的标准分辨率,所有的UI素材都应该按这个分辨率去做
  Screen Match Mode:Match Width Or Height 以宽高权重匹配
  Match:宽高所占权重,默认值是0,相当于以“标准分辨率的宽”和“实际屏幕的宽”的比例作为缩放比例。同理,如果值是1,相当于以“标准分辨率的高”和“实际屏幕的高”的比例作为缩放比例。如果值是0.5,则相当于宽和高的比例权重相等,最终的缩放比=宽缩放比*宽权重+高缩放比*高权重
  Reference Pixels Per Unit:每个unity单位对应的像素数
  Constant Physical Size:固定物理尺寸
  Physical Unit:物理单位,包括点,英寸,厘米,毫米等
  Fallback Screen DPI:对应物理单位的像素密度
  Default Sprite DPI:默认精灵的像素密度
  Reference Pixels Per Unit:每个unity单位对应的像素数
  目前手机设备分辨率宽高比都在1.5:1~1.8:1范围,pad的分辨率在1.3:1~1.5:1范围,所以一般情况下,我们会根据要覆盖的机型,得到其大概的宽高比范围,从中间选择一个合适的宽高比,例如1.7:1(因为手机设备比较多,所以更接近1.8:1的比例)。有了宽高比,接下来我们要选择目标分辨率了,通常情况下以1024作为宽,以1024/1.7=602作为高比较合适,因为一般的压缩格式会要求宽高是2的次幂或者4的倍数。
  在确定宽高比和目标分辨率之后,我们还需要设置适配规则,比较推荐的做法是做一张较大的背景图,背景图中上下左右边的内容允许被裁剪。当适配到1.8:1的设备上时,由于背景图内容宽度小于设备宽度,此时需要使用“宽”适配,这时背景图的上下边将被裁剪掉;反之适配到1.5:1的设备上时,需要使用“高”适配,这时背景图的左右边将被裁减掉。
  标准分辨率,此时背景图时最完整的,如下图

  宽高比1.5:1,iphone4,此时背景图左右边有裁剪,如下图


   宽高比1.78:1,iphone6,此时背景图上下边有裁剪,如下图


布局
  在适配分辨率方面,除了等比缩放外,还有一方面是对UI控件位置的适配,例如角色头像一般处在屏幕的左上角,虚拟摇杆处在屏幕的左下角,要想在不同的分辨率下都处在比较合适的位置,就需要理解“锚点”的作用了。
   UGUI中控件的锚点都是相对于父控件的,包括 左上,中上,右上,左中,中心,右中,左下,中下,右下,默认值是中心。
   当我们在标准分辨率下定位好控件后,设置好合适的锚点,不论在那种分辨率下,控件都会处于一个合适的位置。
   以左上角头像为例,我们将其锚点(anchor)设置为“左上”,轴(pivot)设置为“左上角”。


   PosX和PosY即UI控件相对于父控件(Canvas)的相对位置,由于锚点设置为“左上”,轴设置为“左上角”,所以位置PosX和PosY都为0。效果如下图


     看了上面的文章 热爱游戏创作的你是不是已经开始热血沸腾了呢?是不是迫不及待的想加入游戏团队成为里面的一员呢?
     福利来啦~赶快加入腾讯GAD交流群,人满封群!每天分享游戏开发内部干货、教学视频、福利活动、和有相同梦想的人在一起,更有腾讯游戏专家手把手教你做游戏!
腾讯GAD游戏策划交流群486822377Gad策划交流群
腾讯GAD游戏美术交流1群 :342981373GAD游戏美术交流①群
腾讯GAD-VR交流群:476511561 VR用户交流群
腾讯GAD游戏程序交流群:484290331Gad游戏开发核心用户群

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引