作者：四五二十

大家好，我又雙叒叕來了。

今天給大家?guī)淼牟皇且粋€特定的小項目，而是對新手來說很有用的一些技巧。

屏幕適配：簡單說，就是將UI以適當?shù)某叽顼@示在屏幕上的適當位置。

比如我們在手機上運行一個小游戲，打開它的菜單欄，一般都是如下畫風：

如果這款小游戲不做屏幕適配，換一個手機，那就有可能是這個樣子：

可以看到菜單欄信息顯示不完整,這對于用戶來說顯然是不人道的,那么我們就要通過為UI做屏幕適配讓菜單欄在不同的手機上都能顯示完整信息。

手機的不同，在這里其實就是分辨率和屏幕比例的不同，學習屏幕適配之前，需要了解一些基本概念：

像素：構(gòu)成圖像的最小單位。

如果把一張圖片，放大后就會看到，其實它是由許多小方格組成：

每一個小方格就是一個像素，同樣的畫面像素越多，圖片越精細：

分辨率：這里是指屏幕分辨率，即顯示器所能容納的像素數(shù)量。

例如一個顯示器的分辨率是320*480，那么它表示橫著能放320個像素，豎著能放480個，總共能放153600個像素。

屏幕比例：屏幕寬高比

像素的長寬是一樣的，所以不同分辨率的屏幕會呈現(xiàn)出不同寬高比。

以iPhone為例，部分機型的分辨率如下：

我們可以根據(jù)這些在Unity的Game界面添加新的屏幕格式：

點擊OK，根據(jù)固定分辨率生成一個新的屏幕格式：

同樣的方式，我們做許多不同尺寸的屏幕格式：

那么我們就先來做一個能夠適配與以上屏幕格式的UI吧：

1．首先搭建UI，從高往低進行適配：

UI適配三原則：

—不出界；

—不遮擋；

—不變形；

2．要讓UI停留在固定位置就需要使用到錨點Anchors，本篇文章用到的錨點知識并不多，只需要把UI固定一下位置即可，要想更多了解錨點知識，有篇文章很不錯:https://www.jianshu.com/p/dbefa746e50d

3．設(shè)置Canvas的CanvasScaler組件：

4.然后將屏幕分辨率調(diào)?。?/p>

甚至可以直接匹配到橫屏，雖然布局很難看，所以橫屏和豎屏還是要分開匹配的好。

可以看到，UI雖然和屏幕做到了匹配，但是尺寸有變小的趨勢，這也是為什么一開始要從高分辨率往下匹配的原因，如果反過來從低到高進行匹配，UI則會逐漸變大，那就不敢保證UI不出界了。

背包的適配

如果是背包系統(tǒng),用以上方式可能不太適合，特別是當我們的背包要追求以下效果時：

在以上需求中,需要讓物品欄UI跟隨屏幕變大變小，但裝備圖片會根據(jù)物品欄大小自動排列，我們下面就來做背包適配：

1．將剛才的UI都禁用，創(chuàng)建一個ScrollView，調(diào)整好位置大?。?/p>

2．將橫豎滑動條都刪除：

3．設(shè)置ScrollRect組件：

4．為Content添加GridLayoutGrounp（自動布局）組件和ContentSizeFItter（控制UI寬高）組件：

5．鎖死ScrollView四個邊距：

6．在Content內(nèi)添加裝備圖片作為子物體：

7．這時我們改變屏幕尺寸，就能達到我們想要的效果啦：

總的來說，以上內(nèi)容屬于比較入門級的，不過解決一些簡單的適配沒啥問題。之后如果有機會，再來為大家分享更多技巧。

想系統(tǒng)學習游戲開發(fā)的童鞋，歡迎訪問?http://levelpp.com/? ? ? ???

游戲開發(fā)攪基QQ群：869551769? ? ? ? ??

微信公眾號：皮皮關(guān)