Unity——移动平台的屏幕适配(1)——UGUI适配到底需要做什么?

1.需求分析

使用Unity开发移动平台的游戏,屏幕适配是绕不开的一个话题,近来手机的屏幕变得越来越长...,18:9,18.5:9,19:9,甚至于21:9,另外还有Pad的各种分辨率:2:3,3:4等等。。。,想要在各式各样的设备上完美显示游戏内容,这是个让人头大的问题,好在不管是NGUI还是UGUI,它们本身就已经做好了适配相关的工作,我们只需要调用相关的API,稍加改动,就可以完美的适配各种奇葩的机型,本篇以UGUI为例,让我们先弄清楚UGUI适配到底需要做什么。

2.进行实践

1.Canvas相关设置

1.首先创建一个Canvas,调整 UIScaleMode为ScaleWithScreenSize(注:这个模式是按照屏幕的宽高比例来进行适配,简单易用),调整ReferenceResolution为720:1280(注意:默认设计分辨率非常重要!所有适配都是根据默认的设计分辨率展开的。这里以竖屏游戏为例,设置一个9:16的分辨率)。如下图:

Unity——移动平台的屏幕适配(1)——UGUI适配到底需要做什么?_第1张图片

2.我们创建一个在屏幕中心显示的弹出界面和一个显示在左上角的金币框为案例,用作屏幕适配时查看适配效果。注意金币框要将锚点调整为左上角。(素材可以任意,主要是创建一个居中显示,一个左上角显示的UI)如下图:

Unity——移动平台的屏幕适配(1)——UGUI适配到底需要做什么?_第2张图片

2.动手找规律 

1.在完成了以步骤,开始写代码之前,我们可以先试着切换不同的分辨率,看一下UI显示的效果,如果你足够认真,就可以发现,当屏幕的宽高比和我们的设计分辨率相同时(同样为16:9),是不需要作任何适配的;当宽高比小于设计分辨率时(长屏手机,例如:9:18小于9:16),我们只需要调整CanvasScaler的Match属性为0(按照屏幕宽度适配),就可以完整显示游戏内容,如下图:

Unity——移动平台的屏幕适配(1)——UGUI适配到底需要做什么?_第3张图片

当宽高比大于设计分辨率时(Pad,例如:3:4大于9:16),我们只需要调整CanvasScaler的Match属性为1(按照屏幕高度适配),就可以完整显示游戏内容,如下图:

Unity——移动平台的屏幕适配(1)——UGUI适配到底需要做什么?_第4张图片

3.实践结论

做完这一系列操作,你是不是发现了什么呢?是不是觉得适配是如此的简单?其实关于UI适配,我们要做的只有一件事:改变CanvasScaler的Match的值(当宽高比小于设计分辨率的宽高比时,我们就按照屏幕的宽来适配,当宽高比大于设计分辨率的宽高比时,就按照屏幕的高来适配),此外需要显示在屏幕边角的UI,我们只需要设置UI的锚点。

是不是非常简单呢?代码该如何去写呢?相信你已经有思路了吧?

下一篇我们将开始写代码,去实现一个简易通用的屏幕适配方案!

 

你可能感兴趣的:(Unity)