Unity2D多解析度螢幕適配方案

此文將闡述一種簡單有效的Unity2D多解析度螢幕適配方案，該方案適用於基於原生開發的Unity2D遊戲，即沒有使用第三方2D外掛，如Uni2D,2D toolkit等開發的遊戲，NGUI外掛不受這個方案影響，可以完美和此方案配合使用。

先說明一些基本的概念：

1.螢幕的寬高比Aspect Ratio = 螢幕寬度/螢幕高度

2.Unity2D中攝像機鏡頭的尺寸決定了我們實際看到遊戲內容的多少，在編輯器中我們可以通過調整攝像機Camera的orthographicSize屬性值來調整攝像機的大小。如下圖所示，當攝像機orthographicSize屬性值等於當前螢幕高度單位的一半時，攝像機大小正好與螢幕大小相等。注意這裡提到的是螢幕單位高度的一半，這個數值是經過畫素到單位比即Pixels To Units換算的，Unity2D中這個比例的預設值是100，即100畫素等於1單位。如果我們的遊戲螢幕有640畫素高，那麼實際換算成單位高度則是6.4個單位，當我們攝像機的orthographicSize值是3.2時，攝像機大小剛好與螢幕大小相等。

(可以通過此選項調整每張圖片的畫素單位比)

看到這裡你可能會發出疑問，Unity編輯器中只能直接調整攝像機的高度，那攝像機的寬度是如何確定的呢？答案就是我們最前面提到的螢幕寬高比。Unity會根據當前螢幕實際的寬高比和攝像機的orthographicSize值來計算出攝像機的寬度值，即：

攝像機實際寬度 = 攝像機orthographicSize * 2 * 螢幕寬高比

也即是

攝像機實際寬度 = 攝像機高度 * 螢幕寬高比

我舉個例子說明一下，iPhone4的螢幕畫素為640*960，寬高比為2:3，假設Pixels To Units值為100，那麼如果設攝像機高度size值為4.8，那麼攝像機實際寬度按照公式算出6.4，剛好就是螢幕的單位寬度。

好了，講了以上的東西我們就知道為何我們的遊戲會在不同的螢幕解析度的裝置上有不同的顯示了。

不同的螢幕解析度，相同的攝像機orthographicSize值會產生不同的攝像機尺寸，不同的攝像機尺寸導致實際顯示的遊戲內容的不同。

接下來我再提出兩個概念，為了方便後文的說明：

1.遊戲有效內容，指遊戲中一定需要完整顯示在螢幕上的內容；

2.遊戲實際內容，指全部的遊戲內容，包括有效內容和主要是為了適配多解析度的或其他不重要的目的而增加的內容。

我們的開發一般都會選擇在一個固定的設計解析度上進行，比如常用的iOS豎屏遊戲設計解析度640*960，我們就以這個設計解析度為例。通常情況下，設計解析度尺寸就是我們遊戲有效內容的尺寸。

採用這個解析度，我們將攝像機的orthographicSize值設為4.8。假設我們不做任何多解析度的適配處理，使我們遊戲的有效內容區域和實際內容區域尺寸相同，都為6.4*9.6(已經做過畫素到單位的換算，下同)，讓這個遊戲執行在一款iPhone5裝置上（即螢幕是640*1136）時，我們來看看會發生什麼情況。

為了更好的說明，我們先設變數：

遊戲有效內容尺寸為gameValidContentSize

遊戲實際內容尺寸為gameContentSize

攝像機尺寸為cameraSize

實際螢幕尺寸為screenSize

螢幕寬高比為aspectRatio

接著開始計算：

orthographicSize = 4.8

aspectRatio = 640/1136 = 9/16

cameraSize.height = 攝像機orthographicSize * 2 = 4.8 * 2 = 9.6

cameraSize.width = cameraSize.height * aspectRatio = 9.6 * 9 /16 = 5.4

根據計算，我們得到實際攝像機的寬度為5.4，而遊戲有效內容寬度是6.4，攝像機寬度小於遊戲有效內容寬度，即cameraSize.width < gameValidContentSize.width = gameContentSize.width，這時遊戲內容被攝像機裁減！

以下以我做的一個小遊戲為例子，我們可以更清楚的看到這個問題：

第一張是在640*960的裝置上執行時的效果，一切正常。第二張是在640*1136的裝置上執行的效果，可以看到遊戲內容被剪得很明顯，右上角的按鈕都快沒有了。

如何解決這個問題呢？最直接的想法是，如果我們的遊戲在640*1136螢幕的裝置上，攝像機寬度依然保持是6.4，那肯定就不會剪下了。為了做到這一點，我們必須在執行時來調整camera的orthographicSize值。方法很簡單，還是套用上面講到的公式：

aspectRatio = 9/16

為了使cameraSize.width = 6.4，我們計算

cameraSize.height = cameraSize.width/aspectRatio = 6.4 * 16 / 9 （因為除不盡，後面就不繼續寫了）

camera的orthographicSize = cameraSize.height / 2 約=5.69

我們再一次執行遊戲，動態修改camera的orthographicSize值為5.69，可以看到：

寬的方面是完全顯示出來了，可是上下都出現了的“黑邊”（這裡是藍邊，呵呵）。這是因為攝像機的高度已經大於了遊戲內容的高度，所以自然會出現沒有內容的區域，即“黑邊”。為了解決這個問題，我們就需要給遊戲增加上下邊，直接上和黑邊同尺寸的圖是一種方法，但是還有一種更簡易的辦法，直接將遊戲背景放大一些，以蓋住黑邊！這個遊戲比較簡單，我們就用這個簡易的方法，我們將遊戲背景放大到1.3倍，如下圖：

OK！現在我們的遊戲看起來已經很正常了，已經完成了iPhone5的適配。

注意到這個時候我們遊戲的有效內容區域已經不等於實際內容區域了，我們放大了背景圖片，實際上等於為遊戲增加了一層外邊緣。如圖，在白框內部的就是有效內容區域，在白框外部的就是無效內容區域。整體實際遊戲內容區域已經大於了有效內容區域。

根據以上解決解析度問題的過程，我們可以得出，實際的解析度適配問題與三個尺寸相關，他們分別是：攝像機尺寸，遊戲內容尺寸（包括有效內容尺寸和無效內容尺寸）和實際螢幕尺寸。為了能夠顯示我們需要的有效內容，並且不顯示黑邊，我們必須要保證：

攝像機的尺寸既必須要小於或等於遊戲實際內容尺寸，又必須要大於或等於遊戲有效內容尺寸。如下圖，藍色的線框表示攝像機的尺寸，我們即只要保證藍色框在白框外，在圖內就能保證遊戲內容的顯示正確。

只要能夠確保以上這一點，那麼我們的遊戲就能夠應對幾乎所有的螢幕解析度。

按照這種方案，說到底，解決螢幕解析度適配的問題，其實就是解決如何讓遊戲攝像機尺寸限定在給定範圍的問題。

總結起來，步驟就是：首先，需要確定遊戲的有效內容區域和實際內容區域；然後，遊戲啟動時，根據實際的螢幕寬高比將你的攝像機尺寸調整到合適你遊戲的大小即可。

最近寫了很多小遊戲，用這個方案一勞永逸地解決了多解析度適配特別是Android裝置適配的問題。這種方法的好處一方面是隻要理解了，操作起來很簡單，另外一方面不同於縮放遊戲內容的方案，這種方法保證了遊戲內容的原汁原味。當然，缺點可能也是有的，暫時能想到的可能是對於一些需要依賴攝像機做效果或者操作的遊戲，改變攝像機的大小可能會造成一些影響。目前這方面經驗還比較少，希望以後可以不斷地完善這個方案。

最後上一下自己寫的一段簡單的調整orthographicSize值的指令碼，用於保證camera的width值不會小於遊戲有效內容寬度，有效內容尺寸為6.4*9.6。這個指令碼只要附加在遊戲的Camera上就可以生效。

using UnityEngine;
using System.Collections;

public class GameCamera : MonoBehaviour {

    float devHeight = 9.6f;
    float devWidth = 6.4f;

    // Use this for initialization
    void Start () {

        float screenHeight = Screen.height;

        Debug.Log ("screenHeight = " + screenHeight);

        //this.GetComponent<Camera>().orthographicSize = screenHeight / 200.0f;

        float orthographicSize = this.GetComponent<Camera>().orthographicSize;

        float aspectRatio = Screen.width * 1.0f / Screen.height;

        float cameraWidth = orthographicSize * 2 * aspectRatio;

        Debug.Log ("cameraWidth = " + cameraWidth);

        if (cameraWidth < devWidth)
        {
            orthographicSize = devWidth / (2 * aspectRatio);
            Debug.Log ("new orthographicSize = " + orthographicSize);
            this.GetComponent<Camera>().orthographicSize = orthographicSize;
        }

    }

    // Update is called once per frame
    void Update () {

    }
}