屏幕适配实用技巧

作者：四五二十 2019-03-21

大家好，我又双叒叕来了。


今天给大家带来的不是一个特定的小项目，而是对新手来说很有用的一些技巧。

屏幕适配：简单说，就是将UI以适当的尺寸显示在屏幕上的适当位置。

比如我们在手机上运行一个小游戏，打开它的菜单栏，一般都是如下画风：


如果这款小游戏不做屏幕适配，换一个手机，那就有可能是这个样子：


可以看到菜单栏信息显示不完整,这对于用户来说显然是不人道的,那么我们就要通过为UI做屏幕适配让菜单栏在不同的手机上都能显示完整信息。

手机的不同，在这里其实就是分辨率和屏幕比例的不同，学习屏幕适配之前，需要了解一些基本概念：

像素：构成图像的最小单位。

如果把一张图片，放大后就会看到，其实它是由许多小方格组成：


每一个小方格就是一个像素，同样的画面像素越多，图片越精细：


分辨率：这里是指屏幕分辨率，即显示器所能容纳的像素数量。

例如一个显示器的分辨率是320*480，那么它表示横着能放320个像素，竖着能放480个，总共能放153600个像素。

屏幕比例：屏幕宽高比

像素的长宽是一样的，所以不同分辨率的屏幕会呈现出不同宽高比。


以iPhone为例，部分机型的分辨率如下：


我们可以根据这些在Unity的Game界面添加新的屏幕格式：


点击OK，根据固定分辨率生成一个新的屏幕格式：


同样的方式，我们做许多不同尺寸的屏幕格式：


那么我们就先来做一个能够适配与以上屏幕格式的UI吧：

1．首先搭建UI，从高往低进行适配：


UI适配三原则：

—不出界；

—不遮挡；

—不变形；


2．要让UI停留在固定位置就需要使用到锚点Anchors，本篇文章用到的锚点知识并不多，只需要把UI固定一下位置即可，要想更多了解锚点知识，有篇文章很不错:

Unity进阶技巧-RectTransform详解www.jianshu.com

3．设置Canvas的CanvasScaler组件：


4.然后将屏幕分辨率调小：


甚至可以直接匹配到横屏，虽然布局很难看，所以横屏和竖屏还是要分开匹配的好。


可以看到，UI虽然和屏幕做到了匹配，但是尺寸有变小的趋势，这也是为什么一开始要从高分辨率往下匹配的原因，如果反过来从低到高进行匹配，UI则会逐渐变大，那就不敢保证UI不出界了。

背包的适配

如果是背包系统,用以上方式可能不太适合，特别是当我们的背包要追求以下效果时：


在以上需求中,需要让物品栏UI跟随屏幕变大变小，但装备图片会根据物品栏大小自动排列，我们下面就来做背包适配：

1．将刚才的UI都禁用，创建一个ScrollView，调整好位置大小：


2．将横竖滑动条都删除：


3．设置ScrollRect组件：


4．为Content添加GridLayoutGrounp（自动布局）组件和ContentSizeFItter（控制UI宽高）组件：


5．锁死ScrollView四个边距：


6．在Content内添加装备图片作为子物体：


7．这时我们改变屏幕尺寸，就能达到我们想要的效果啦：


总的来说，以上内容属于比较入门级的，不过解决一些简单的适配没啥问题。之后如果有机会，再来为大家分享更多技巧。

照样怒宣传一波：想系统性学习游戏开发、学习Unity开发的，欢迎围观：


http://levelpp.com/


在线的教学视频：https://space.bilibili.com/38043731/#/


以及QQ交流群：869551769


作者：四五二十
专栏地址：https://zhuanlan.zhihu.com/p/42779882

参与评论