如何讓你的小遊戲適配不同尺寸的手機螢幕

嗨！大家好，我是小螞蟻。歡迎關注我的微信公眾號【小螞蟻教你做遊戲】，學習更多遊戲開發原創教程。

當前的手機螢幕有著各種各樣不同的尺寸，為了讓遊戲在不同尺寸的螢幕上都能展示出比較好的效果，我們就需要處理遊戲對於不同尺寸螢幕的適配問題，今天這篇文章就帶大家來徹底的瞭解如何讓你的小遊戲適配不同尺寸的手機螢幕。

通常遊戲中需要去處理適配的有三部分內容：遊戲的UI，遊戲的背景以及遊戲中內容的佈局。

其中游戲 UI 通常包括按鈕，對話方塊等內容，例如遊戲左上角的暫停的按鈕，遊戲中的揹包按鈕，提示對話方塊等。遊戲的背景就是指遊戲的背景圖，至於遊戲中內容的佈局，這個會因遊戲的不同而不同，有些遊戲需要處理內容的適配，例如一個象棋遊戲，就需要處理在不同螢幕上的棋盤以及棋子的大小。而對於一個彈幕射擊遊戲來說，由於所有的內容都是不停移動的，也就不需要去處理內容的適配了。

接下里，我們會依次講解這三部分內容的適配方法。

對於UI的適配我們對它的要求是不論螢幕的尺寸如何的變化，它總是應該出現在該出現的位置。

舉個例子，很多遊戲的左上角都會有一個暫停按鈕，例如下圖中這樣。

我們對於這個暫停按鈕的要求就是不論螢幕如何變化，它都應該出現在左上角的位置，就像圖中顯示的那樣。

接著我們預覽一下，看看顯示效果。

圖中預覽的螢幕尺寸，相當於寬高比為 9:16 的螢幕，暫停按鈕出現的位置跟我們在場景中擺放的位置相同。

下面，我們換一種比例的螢幕。

這是比較常見的全面屏的手機螢幕，比較細長。可以發現，此時暫停按鈕並沒有出現在螢幕的左上角的位置。

為什麼會出現這種結果呢？

需要注意一下圖片中橙色的區域，要比場景編輯區域長出很多，從最終的預覽效果上可以看出，藍色的背景會自動去填充多出來的部分，但是暫停按鈕卻不會自動的移動到螢幕的左上角。

我們如何處理這種情況呢？

非常的簡單，製作工具已經為我們準備了這樣的功能，它叫做“相對場景佈局”。

在“屬性區”中可以看到這個屬性，開啟後，下方會出現垂直佈局，和水平佈局的選項。

下面，我們就為這個暫停按鈕設定一下相對場景佈局。

距離頂部 25， 距離左側 25。

預覽一下，看一下針對不同尺寸的螢幕的顯示效果。

這次，不論螢幕尺寸如何，按鈕都出現在了左上角的位置。

相對場景佈局指的是一種相對的位置，即相對於遊戲螢幕的位置，如上圖所示，暫停按鈕距離螢幕頂端的位置為 25，距離螢幕左邊的位置為 25，不論螢幕的尺寸和比例如何變化，只要按鈕距離螢幕頂端和左邊的位置不變，那麼這個按鈕就會永遠出現在螢幕的左上腳。

通常我們對於遊戲背景的要求都是不論手機螢幕的尺寸如何變化，背景都應該能夠填充滿整個螢幕，否則的話螢幕邊緣就會出現黑邊，我們不希望在遊戲的背景中看到黑邊（某些故意要留出黑邊效果的遊戲除外）。

對於背景的適配，製作工具也為我們準備好了相應的功能。

當你在遊戲中設定了背景圖之後，就會出現如下圖中的三個選項，平鋪，適應和拉伸。

“平鋪”適用於由一個小的圖片挨個拼接成一個大的背景。

比如說，我將背景設定為一個這樣的小圖片，然後用這張小圖片拼接成一個大的背景。

執行後看上去會是這個樣子。

“拉伸”就是不論你的背景圖片尺寸如何，都會根據最終的螢幕尺寸對其拉伸或者縮放，將其撐滿螢幕。

就像是下面這樣。

可以看到對於這個小圖片的水平和豎直方向都進行了拉伸，“拉伸”有一個很大的問題就是會導致“變形”，就像圖中原本是個正方形的圖形，結果拉成了長方形。

最後，我們來看一下游戲中最常用的一種適配方法“適應”。“適應”又分為兩種，一種是“寬度適應”，一種是“高度適應”。

先來看“寬度適應”。

可以看到背景圖的寬填充滿了螢幕，但是上方和下方會出現空白。

接著來看一下“高度適應”。

可以看到背景圖的高填充滿了螢幕，但是左側和右側分別切除了一部分背景（圖中紅色框框出來的為原圖)。

這裡注意區分一下“適應高度”與“拉伸”的區別，“適應高度”是將圖片高填滿螢幕，然後將兩側多餘的部分裁掉了，但是“拉伸”是將寬和高去放大或縮小來填充螢幕，會導致圖片變形。

總結一下，對於“適應”來講，需要根據遊戲的具體情況來選擇是“適應寬度”還是“適應高度”。如果你希望背景圖可以完整的顯示出來兩側不被剪裁的話，那麼就選擇適應“寬度”，此時需要考慮上下的黑邊問題，如果你希望背景圖總是能夠佔滿的螢幕的話，那麼就選擇適應“高度”，此時背景圖的兩側會有一部分會被裁掉。

在真實的遊戲中，通常會把背景圖的尺寸做的更寬一點兒或者更高一點兒來解決黑邊問題，例如適配寬度的時候，就將背景圖做的更高一點兒，來避免上下的黑邊問題；適配高度的時候，可以將背景圖做的更寬一點兒，來解決較寬的裝置（例如平板電腦）上的顯示問題。

對於遊戲中的內容佈局

遊戲中內容的佈局因遊戲的不同而不同，沒有通用的解決方案，但是隻要你理解了絕對場景佈局，相對場景佈局，再配合一些計算，基本上就可以解決所有遊戲內容的適配了。

這裡使用精緻1010中的佈局舉個例子。

如圖，左側為 9:16 的螢幕的最終顯示效果，右側為 9:19 的螢幕的最終顯示效果。右側圖中標註出了遊戲中所有需要進行適配的內容，一共 7 個部分。

1. 暫停按鈕：使用相對場景佈局，相對於“頂部”和“左側”，一直顯示在螢幕的左上角。
2. 金幣：使用相對場景佈局，相對於“頂部”和“右側”，會一直顯示在微信預設按鈕下方的位置（微信右上角的預設按鈕也是使用的相對佈局）。
3. 得分：使用絕對位置，始終位於座標（0，600）的位置。
4. 網格和形狀放置區域：根據 7 的位置進行計算，始終位於距離 7 上方 520 的位置。
5. 道具區域：根據 7 的位置進行計算，始終位於 7 上方 170 的位置。
6. 禮包區域：根據 7 的位置進行計算，始終位於 7 上方 170 的位置。
7. 形狀區域：使用相對場景佈局，始終位於相對螢幕“底部” 250 的位置。

可以看出在遊戲內容的適配中，有的使用的相對場景佈局，例如暫停和金幣，有的使用的是絕對位置，例如得分，而有的是根據其他區域的位置進行計算設定的，例如網格和道具區。結合上述的這三種基本的方法，最終讓遊戲在不同的螢幕上顯示出了不錯的佈局效果。

最後，總結一下，我們講了三種遊戲中不同部分的內容去適配不同螢幕的方法，遊戲製作工具已經提供了用於處理適配的功能：相對場景佈局以及背景圖的三種配置。針對不同的遊戲，遊戲內容的適配會有所不同，不過只要你理解了幾種基礎的適配概念和方法，對於再複雜的內容適配，也無非是一些基礎方法的相互組合而已。

我是會做遊戲也會教你做遊戲的小螞蟻，歡迎關注微信公眾號【 小螞蟻教你做遊戲 】，領取全網最全的微信小遊戲開發原創教程資料，每天學點兒遊戲開發知識。