为多种分辨率设计UI

Posted 大哥大嫂过年好啊

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为多种分辨率设计UI相关的知识,希望对你有一定的参考价值。

如今的游戏和程序通常需要支持许多种不同的屏幕分辨率,并且其UI布局也需要自适应多种分辨率。Unity的UI系统包含多种工具来实现这一目的。

下面我们将使用一个简单的例子来学习、观察和比较不同的工具如何实现这一目的。此例中,我们将三个按钮放置在屏幕的角落,同时使其在不同的分辨率下能够自适应的布局。

技术分享

此例中我们将使用四种分辨率:Phone HD in portrait (640 x 960) and landscape (960 x 640) and Phone SD in portrait (320 x 480) and landscape (480 x 320)。初始化的分辨率为Phone HD Portrait。


使用锚点来适应不同方向的缩放

UI元素默认以其父对象的矩形中心为锚点。也就是说他们距离中心的位移是一个常量。如果分辨率变为landscape方向,那些按钮也许甚至会跑到屏幕外面。

技术分享

使按钮保持在屏幕内的一种方法是改变布局,例如使按钮的位置与其对应的角落绑定。左上角的按钮的锚点设置为屏幕的左上角,方法是修改Inspector中的锚点预设(Anchors Preset),或者是拖拽Scene View中的三角锚点符号。

技术分享

无论屏幕尺寸变大或变小,按钮都将保持固定在各自所在角落的位置。然而,由于他们保持原始的以像素为单位的尺寸,他们在屏幕中所占的比例可能会变大或变小。这也许是你想要的结果,也许不是,这取决于你希望你的布局在不同的分辨率下是什么样子的。

技术分享

在这个例子中,我们所说的Phone SD Portrait 和 Landscape的小分辨率并不是说其屏幕在物理意义上的很小,而是指有一个较低的像素密度。在这些低像素密度屏幕中,按钮不会比高像素密度的屏幕中显示的大,他们应该显示出一样的大小。

这意味着如果屏幕变小,按钮也应该等比例缩小。换句话说,按钮的缩放应该跟随屏幕并与其保持一致。在这一点,Canvas Scaler组件能够提供帮助。



随着屏幕一起缩放

Canvas Scaler可以被添加到根对象Canvas——一个附带Canvas组件的游戏物体,所有的UI元素都是他的子对象。通过GameObject菜单添加的Canvas默认附带Canvas Scaler组件。

在Canvas Scaler组件中,你可以设置其UI缩放模式(UI Scale Mode)为Scale With Screen Size。在这种模式下,你可以指定一个分辨率作为参照。无论当前屏幕的分辨率比参照的分辨率大还是小,Canvas的缩放因子都将被设置,因此所有UI元素都将随着屏幕一起缩放。

在我们的例子中,我们将Canvas Scaler设置为Phone HD landscape的分辨率640 x 960。现在,当设置屏幕分辨率为Phone SD portrait的320 x 480时,整个布局都等比例的缩小了。所有东西都缩小了:按钮尺寸,他们距离屏幕边缘的距离,按钮的图标以及文字。这意味着在Phone SD portrait中显示出的布局与再Phone HD portrait中是一样的,仅仅是像素密度降低了。

技术分享

添加Canvas Scaler组件后,搞清楚这个布局在其他宽高比下看起来是什么样子的是很重要的。通过设置回Phone HD landscape, 我们发现按钮此时显示的比他们应当显示的尺寸要大。

技术分享

归根结底按钮变大的原因取决于Canvas Scaler如何设置。默认情况下,他拿当前分辨率的宽与Canvas Scaler指定的参考分辨率的宽作对比,其结果将作为缩放因子来缩放所有的东西。这个组件有一个名为Match的属性,其值可以设置为0(宽),1(高)或者一个介于两者之间的值。默认情况下其值为0,也就是当前屏幕的宽和Canvas Scaler的宽作比较。

如果Match的值设为0.5, 他将同时比较当前宽和参考宽以及当前高和参考高,并且在两者区间内(个人理解)选择一个缩放因子。由于此例中landscape分辨率是1.5倍宽但是也是1.5倍短,所以这两个缩放因子平均出了一个缩放因子1, 也就是说按钮保持其原来大小。

技术分享





以上是关于为多种分辨率设计UI的主要内容,如果未能解决你的问题,请参考以下文章

UI开发核心问题-UI随屏幕自适应

Unity UGUI 自适应的个人理解

Unity笔记UGUI物体的Rect Transform组件(Pivot中心点,Anchor锚点)

Unity UI自适应

Android适配难题全面总结

如何让网页自动适应显示器不同的“分辨率”?