[原創]一種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 () {
    
    }
}

好了，就先寫這么多吧，有問題的朋友可以留言或者發短信給我。

感謝收看！謝謝~

 

轉載請注明出處：）