5.2 分辨率適配經驗

5.2.1 寬度或高度鎖定

我們希望所有的機型都能夠很完美地適配，不要拉伸！不要黑邊！FIXED_HEIGHT或FIXED_WIDTH模式是比較容易做到的。

要做到上面的要求，需要選取一個范圍，即要適配的分辨率比例的范圍。我們都知道iPhone 5的比例非常長，應該沒有什么機器比這個比例更長的了，所以一般筆者將iPhone 5的比例設置為要適配的極限比例，也就是說，如果有比iPhone 5更長的手機，筆者就基本放棄這個機型了。接下來選擇一個最扁的比例，一般在平板電腦上的比例會更扁一些，縱觀主流的分辨率，基本都在iPhone 5和iPad之間，所以筆者習慣將要適配的比例在iPhone 5到iPad之間（這里的是以橫屏游戲為例，如果是豎屏游戲，只需要把寬和高對調一下即可）。也就是說，假設選擇固定高度的FIXED_HEIGHT模式，那么就要選擇一個最寬和最窄的寬度。

選擇好比例之后，需要好好設計一下游戲內容，以方便不同分辨率的適配，主要包含游戲的背景、游戲的內容區域，以及UI等。

背景的設計是非常重要的一步，因為背景設計的好壞，直接決定了是否有黑邊，以及游戲內容的布局。首先，背景圖需要有多大？其次，游戲區域只能有多大？這些問題需要根據游戲的內容來設計。

如果是一個橫屏的斗地主游戲，可以將游戲區域放在游戲的正中間，游戲內容可以根據游戲區域的原點為相對坐標計算，這時候兩邊各有一部分區域是可裁剪的。

如果是一個豎屏的雷電射擊游戲，可以將游戲區域放在正下方，上方是可裁剪區域，敵人從上方出現，可以將上方的可裁剪區域也納入游戲區域，敵機根據左上角為原點設置相對坐標。

如果是一個消除類游戲，如果是橫屏的，一般把游戲區域放在正中間，左右兩邊裁剪；如果是豎屏的，一般也把游戲區域放在正中間，上下兩邊是可裁剪區域。

5.2.2 計算設計分辨率

使用FIXED_HEIGHT或FIXED_WIDTH模式結合一個比較大的背景，一般可以解決大部分游戲的分辨率適配問題，但如果游戲背景并不是鎖定寬度或高度的，那么就需要選擇其他的分辨率適配策略了。

下面介紹一個簡單的適配示例，如圖5-6所示。首先背景尺寸是1280×800，這個分辨率沒有任何講究，是美工隨便給出的一個分辨率，是一個足夠大的尺寸，寬度和高度都不進行鎖定，而是根據實際設備的分辨率進行動態調整，這個分辨率盡管不怎么標準，但還是可以用來完成完美適配。

圖5-6 分辨率480×320

游戲中有兩部分UI，主界面的菜單面板是居中對齊，getWinSize得到的大小的一半即是居中的位置，面板設置錨點為(0.5,0.5)，并設置居中的位置即可。第二部分UI是頂部的信息欄，信息欄的位置是靠上居中，信息欄設置錨點為(0.5,1.0)，然后設置getWinSize的width×0.5f為x坐標，height為y坐標即可。

在這里選擇的策略是SHOW_ALL，但是設計分辨率需要動態計算出來（一般的代碼這里都會設置一個分辨率），因為要使用好1280×800的背景圖，關鍵有以下幾點：

? 不拉伸，不留黑邊。

? 根據手機的分辨率調整可視區域（設置的標準分辨率）。

? 當目標分辨率比背景還要寬時，把目標分辨率等比縮小，直到分辨率內容全部在可視區域內。

? 當目標分辨率比背景還要高時，把目標分辨率等比縮小，直到分辨率內容全部在可視區域內。

? 當目標分辨率比背景小時，把目標分辨率等比放大，直到分辨率內容全部在可視區域內。

我們的背景分辨率是1280×800,720是筆者自己定義的一個值，因為筆者不希望整個背景太寬，所以進行了限制，然后根據實際的分辨率與預期分辨率計算出期望的高和寬（要么高變，要么寬變），代碼如下。

        float height = 800.0f;
        float width = 1280.0f;

        float ratio = sz.width / sz.height;
        float maxratio = width / height;
        float minratio = width / 720.0f;
        if (ratio > maxratio)
        {
            //比最寬的還要寬
            height = width / ratio;
        }
        else if(ratio < minratio)
        {
            //比最窄的還要窄
            width = height * ratio;
        }

        pEGLView->setDesignResolutionSize(width, height, SHOW_ALL);

上面代碼的適配效果如下：我們在PC上可以設置窗口的大小（也就是FrameSize），以此來調試程序在對應分辨率下的適配情況，可以先看一看效果。這里筆者選擇了兩個不同的分辨率進行展示，一個是480×320，如圖5-6所示，另一個是550×320，如圖5-7所示，可以看到在兩個差異比較大的分辨率下都有不錯的適配效果。

圖5-7 分辨率550×320

動態調整設計分辨率結合SHOW_ALL策略可以實現一般策略實現不了的適配規則，例如，希望在不同的分辨率下能夠根據設備的分辨率來進一步調整窗口中呈現的內容，不鎖定寬度和高度，也不拉伸或留黑邊。此外，上面的例子同時也演示了簡單的坐標編碼。

5.2.3 場景固定內容

有時在進行分辨率適配時，還要考慮游戲場景中的固定內容，固定內容指無論如何都需要等比縮放的部分，如果這部分內容的比例發生了變化，將會造成糟糕的游戲體驗。

例如，下面這個在指定區域內進行的物理小游戲，每一個關卡都擺放了各種障礙物和目標，我們需要發射出子彈在障礙物和上下左右四個方向的墻壁上彈射，來命中目標，障礙和目標的擺放都是游戲策劃精心設計的，確保每一個關卡都可以命中所有的目標。如果由于分辨率的改變而使得四個方向的墻壁位置發生了變化，就會導致玩家不一定能命中所有的目標。如圖5-8演示了在1024×768分辨率下的游戲運行界面。

圖5-8 分辨率1024×768

該游戲的固定內容是一塊960×640的區域，但上下左右都有額外的顯示內容進行填充（使用了SHOW_ALL模式結合動態計算設計分辨率），當分辨率變化時，戰斗區域會居中顯示，并且左右兩邊出現額外的墻壁，如圖5-9所示。要實現這樣的功能，可以將戰斗區域左下角的x坐標設置為(WinSize.width _ 960) / 2, y坐標設置為(WinSize.height_640)/2，然后戰斗區域內的對象都以此坐標進行相對位置的設置。

圖5-9 分辨率1136×640

我們還可以逆向思考，使用更簡單的方法，戰斗區域始終以(0,0)點為原點，也就是不需要考慮相對位置的編碼，通過將戰斗區域掛載到一個節點上，然后移動該節點，將整個戰斗區域挪到屏幕的正中間，這樣實現起來會更加方便。

5.2.4 經驗小結

在這里總結一下分辨率適配的幾點經驗：

? 對于4種適配策略、設計分辨率、各種窗口尺寸的含義基礎概念一定要掌握扎實。

? 通過調整設計分辨率可以實現更加復雜的適配策略。

? 在PC上使用setFrameSize可以調試當前適配規則在各種分辨率下的效果。

? 通過將固定內容掛載到節點上，再移動該節點，可以簡化固定內容內部的坐標編碼。