cocos2d-x螢幕适配原理

原文位址： http://m.blog.csdn.net/article/details?id=50827766

一、适配簡介

如今市面上的手機種類越來越多，分辨率是千變萬化的。但是我們做遊戲開發，喜歡自己的遊戲可以在各個手機都能合适的運作，那麼就需要做多分辨率的适配。

二、retain螢幕概念

之前，蘋果手機對480*320和960*640的手機适配政策是這樣的，當分辨率是480*320時，尋找的圖檔是1.png。當分辨率是960*640時，尋找的圖檔是[email protected]。這個圖檔是1.png的2倍大小，這樣就能保證在不同的分辨率手機上都能很好的運作。但是，這給我們的美工增加了不小的工作量，而且安裝包的大小也會大很多。

cocos2d-x裡也有這種政策，它的做法是把圖檔放在不同的檔案夾中。程式運作時，根據接口擷取螢幕分辨率，然後進行判斷，再設定圖檔的搜尋路徑，這樣程式中讀取圖檔就會從這個指定的路徑讀取。

if(Director::getInstance()->getWinSize().width > ){
        std::vector<std::string>s;
        s.push_back("lagre");
    }else{
        std::vector<std::string>s;
        s.push_back("small");
    }           

• 1
• 2
• 3
• 4
• 5
• 6
• 7

三、cocos2d-x适配政策

cocos2d-x在2.0.4版本開始提出了自己的适配政策。提出了設計分辨率這樣的一個概念。

相關概念：

資源分辨率：就是我們的圖檔分辨率。

設計分辨率：我們将這個遊戲放在這個分辨率的裝置上，我們的遊戲将完美展示。

裝置分辨率：我們手機的分辨率。

那麼具體的做法是什麼呢？

這個适配過程可以分為兩個部分。

1.第一個部分，就是資源分辨率到設計分辨率。但是我們一般在準備資源時，會讓其一緻，那麼久可以省略這一步，但是如果不一樣，cocos2d-x也提供了相應的接口。

Director::getInstance()->setContentScaleFactor();           

• 1

我們可以設定圖檔的縮放銀子，這個設定之後，就相當于将我們的圖檔資源縮小了4倍。因為這個的算法是（資源）/（設計分辨率）。

2.第二部分，就是從設計分辨率到裝置分辨率。我們剛開始說我們将我們這麼的設計的遊戲，放在裝置分辨率等于設計分辨率的手機上，我們的遊戲将完美展示，但是，當放在手機分辨率不等于我們裝置分辨率的手機上，那麼它會怎麼顯示呢？

其實，設計分辨率的機關是點，而螢幕分辨率是像素。cocos2dx就是為了讓我們的程式，可以不用直接關注手機分辨率，而提出了設計分辨率這樣的一個概念。在最後繪制的時候，我們設計分辨率的一個點，可能對應好幾個像素。

在代碼上，我們的螢幕适配就隻有下面這點代碼：

GLView* gl  = Director::getInstance()->getOpenGLView();
    gl->setDesignResolutionSize(, , ResolutionPolicy::FIXED_HEIGHT);           

• 1
• 2

這裡的三個參數分别是：設計分辨率的寬，設計分辨率的高，和适配政策。适配政策是cocos2d-x已經給我們寫好的，現在有5種。

政策1：SHOW_ALL

根據螢幕的寬高與設計分辨率的寬高分别計算縮放因子，然後取較小的作為縮放因子。保證了設計區域全部顯示到螢幕上，但是螢幕上可能有黑邊。

政策2：NO_BORDER

根據螢幕的寬高與設計分辨率的寬高分别計算縮放因子，然後取較大的作為縮放因子。保證了設計區域在一個方向上鋪滿，而另一個方向一般會超出螢幕區域。

政策3：EXACT_FIT

根據螢幕的寬與設計分辨率的寬作為x方向上的縮放因子，根據螢幕的高與設計分辨率的高作為y方向上的縮放因子，保證了螢幕完全鋪滿，但是可能會出現圖像的拉伸。

政策4：FIXED_HEIGHT

根據螢幕的的寬高比，保證設計分辨率的高不變，修改設計分辨率的寬。

就是根據螢幕的寬高比，來調整設計分辨率的寬高比，使其一直，在此過程中，不對高做調整。

例如：資源分辨率800*400->設計分辨率800*400->裝置分辨率480*320。

首先，我們求出其裝置分辨率的寬高比。

480/320 = 1.5。

其次，我們保持設計分辨率的高不變，調整寬，使其比例一緻。

400*1.5 = 600。

我們的設計分辨率為800*400，然而我們計算得出這個政策使用後隻需要600*400的分辨率，那麼寬多出了200，則圖檔在x方向上有部分被截取了，且鋪滿了螢幕。

政策5：FIXED_WIDTH

根據螢幕分辨率的寬高比，保證設計分辨率的寬不變，修正設計分辨率的高。

同樣使用上面那個例子：

首先，求出裝置分辨率的寬高比。

480/320 = 1.5。

其次，我們保持設計分辨率的寬不變，調整高，使其比例一緻。

800/1.5 = 533。

那麼，可知，設計分辨率的高是400，比533小。那麼最後圖檔在展示時在y方向上會有黑邊。