cocos2d-x 4.0 學習之路（十九）多分辨率適配：setDesignResolutionSize的使用

原創

sunnyboychina

2020-05-18 07:18

這篇我要說的是你做的遊戲如何去適應各個手機、平板、電腦等的分辨率。
先來說幾個概念：

設計分辨率：這個就是你製作遊戲時候的分辨率。你的遊戲在這個分辨率下跑，是最最完美的。
屏幕分辨率：那就是我們的手機分辨率。在電腦上的話，這個值是你自己定義的窗體大小。你想讓玩家在多大的窗口裏玩你的遊戲。

那麼，這兩個分辨率如果一致，那當然就最好的了；要是不一致，你的遊戲如何去適應這個不同分辨率的屏幕，就是我們要解決和關心的問題了。

其實，cocos2d-x已經爲我們想到過這個問題了，要不它怎麼能成爲主流的開發引擎呢。
那我們先找一下，它的設計分辨率和屏幕分辨率都在哪呢？都在AppDelegate.cpp中。
有個變量定義，這個就是設計分辨率了：static cocos2d::Size designResolutionSize = cocos2d::Size(1024, 768);
屏幕分辨率是下面這段代碼：

    if(!glview) {
#if (CC_TARGET_PLATFORM == CC_PLATFORM_WIN32) || (CC_TARGET_PLATFORM == CC_PLATFORM_MAC) || (CC_TARGET_PLATFORM == CC_PLATFORM_LINUX)
        glview = GLViewImpl::createWithRect("HelloWorld", cocos2d::Rect(0, 0, designResolutionSize.width, designResolutionSize.height));
#else
        glview = GLViewImpl::create("HelloWorld");
#endif
        director->setOpenGLView(glview);
    }

解釋一下，屏幕分辨率會首先判斷的運行的平臺，
如果是windows or Mac or Linux，也就是說運行在電腦端，它會讓你定義這個分辨率的大小，默認是和你的設計分辨率一樣。
如果不是以上3種平臺，那也就是說在手機端運行，這時候你就不能定義它了，它只能是你手機的分辨率。

接下來是重點，cocos2d-x通過這個setDesignResolutionSize函數來設定設計分辨率，同時讓你指定分辨率適配策略。它的完整的寫法是：

glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::NO_BORDER);

3個參數分別是設計分辨率的寬、高、分辨率策略。
也就是說，當你的屏幕分辨率和設計分辨率不一致時，cocos2d-x通過第3個參數ResolutionPolicy，來自動調整你遊戲的資源如何去顯示。
好，那麼這個分辨率策略都有啥呢，有這麼些：

// CCGLView.h
enum class ResolutionPolicy
{
    EXACT_FIT,
    NO_BORDER,
    SHOW_ALL,
    FIXED_HEIGHT,
    FIXED_WIDTH,
    UNKNOWN,
};

爲了講清他們的區別，我做了幾個小實驗，一起看效果來理解它們。
首先，看一下設計分辨率和屏幕分辨率都是1024x768的效果。

接下來，我把屏幕分辨率變大，寬變成了1280，高不變：glview = GLViewImpl::createWithRect("HelloWorld", cocos2d::Rect(0, 0, 1280, designResolutionSize.height));
看一看各個策略的效果：
EXACT_FIT：充滿整個屏幕。就是把你的圖整個拉伸填滿屏幕。一般不建議使用。

NO_BORDER：它也是充滿屏幕，但它是等比縮放。仔細觀察，背景的上下都被切下去了一條的。實際上，它是用這個兩個分辨率的寬和高做比較，哪個大就取哪個做爲基準顯示。在我們例子中，屏幕的寬比設計分辨率的寬要大，所以它把背景從1024x768擴大成1280x960，但是屏幕的高只有768，所以上下多餘的部分你就看不到了。所以你看這個人頭會大一些。NO_BORDER是默認的策略參數。

SHOW_ALL：保持全部元素可見，等比縮放。它和NO_BORDER是相反的，它爲了把全部資源都能展現出來，把資源都給縮小了。但問題就是會產生黑邊。

FIXED_HEIGHT：等比縮放，按屏幕的高來建立縮放比例。有人說，這個看着SHOW_ALL沒啥區別呀？請仔細看，找茬！屏幕左邊的文字位置是不一樣的哦。這裏涉及到一個有效區域的問題，我們下篇再講。只要知道這種策略下，繪製區域是可以在設計分辨率之外的。所以開發的時候要注意，不能使用絕對座標。

FIXED_WIDTH：等比縮放，按屏幕的寬來建立縮放比例。和FIXED_HEIGHT一個道理。

總結下來就是，你選用何種分辨率策略，那麼你在設計遊戲的時候就有不同的注意點和取捨點。比如你用SHOW_ALL，全顯示了嘛，比例還不變，所有機型都能用，有些黑邊那就忍忍吧。實在忍不下去，再想辦法給解決掉。