遊戲開始開發的時候，首先要選擇合適的適配方案，才能夠進行UI的開發，我用的引擎是cocos2d-js 3.x版本，這其實就是對cocos2d-x封裝了一層js指令碼，中間包了一層火狐的spidermonkey的直譯器，底層的實現其實還是cocos2d-x。這篇文章的目的是教你怎麼用一套程式碼，一套資源，適配所有機型，包括i
os和android。

進入正題

先講講cocos2d-x關於的適配介面：

在引擎中有這也一個介面：

void GLView::setDesignResolutionSize(float width, float height, ResolutionPolicy resolutionPolicy)
 

這個方法其實就是我們的遊戲的設計解析度，也就是寫程式碼的時候的座標系，而非你的螢幕的實際解析度。

• width 遊戲的實際解析度的寬
• height 遊戲的實際解析度的高
• resolutionPolicy 引擎的適配方式，它是一個列舉。

enum class ResolutionPolicy
{
    EXACT_FIT,
    NO_BORDER,
    SHOW_ALL,
    FIXED_HEIGHT,
     FIXED_WIDTH
    UNKNOWN,
};

這是我使用的設計解析度是(640*960)的豎屏遊戲，適配方式是SHOW_ALL。具體這幾種用法詳見

我的程式碼是用javascript寫的，程式碼如下:

    var glView = cc.view; //獲取GLView
    var winSize = cc.winSize; //獲取真實的視窗解析度
    var bsSize = cc.size(640.0, 960.0);//我定義的設計解析度
    var scaleX = winSize.width / bsSize.width;
    var scaleY = winSize.height / bsSize.height;//分別計算真實解析度和設計解析度的寬高比


    //核心程式碼 ，見下面表格
    var scale = 0.0
 
;
    if (scaleX > scaleY) {
        scale = scaleX / (winSize.height / bsSize.height);
        bsSize.width *= scale;
    } else {
        scale = scaleY / (winSize.width / bsSize.width);
        bsSize.height *= scale;
    }

    cc.view.setDesignResolutionSize(bsSize.width, bsSize.height, cc.ResolutionPolicy.SHOW_ALL);

附上c++程式碼

auto director = Director::getInstance();
    auto glview = director->getOpenGLView();
    if(!glview) {
        glview = cocos2d::GLViewImpl::createWithRect("guobao", Rect(0,0,900,640));
        director->setOpenGLView(glview);
    }
   Size winSize = glview->getFrameSize();
    Size bsSize = Size(640.0, 960.0);
    float scaleX = winSize.width / bsSize.width;
    float scaleY = winSize.height / bsSize.height;

    float scale = 0.0; // MAX(scaleX, scaleY);
    if (scaleX > scaleY) {
        scale = scaleX / (winSize.height / bsSize.height);
        bsSize.width *= scale;
    } else {
        scale = scaleY / (winSize.width / bsSize.width);
        bsSize.height *= scale;
    }
    glview->setDesignResolutionSize(bsSize.width, bsSize.height, ResolutionPolicy::SHOW_ALL);

winSize 實際解析度 bsSize 計算之後的設計解析度
只羅列了ios的機器 android其實也一樣
最後我們其實已經不針對於特定機型的解析度去程式設計 而是根據比例算出來一個設計解析度 這是重點的。

總結一下這些解析度，最終會發現螢幕的最大寬高就是1138x720（這是我們場景需要的圖片最大尺寸）。
既然說的是按比例計算設計解析度，我在大概整理了一下市面上得所有的android和ios機器，除了iPad的寬高比是3/4，主流的都是9/16，這樣720x1138的解析度足以適配市面上95%以上機器。

這樣做的好處

這樣一來，在遊戲中，我們就很容易處理適配了。

• 場景適配

  我們的最大解析度就是剛才算出來的720x1138，這樣如果我要一張圖片適配所有機型，就需要這麼大的一張資源，是居中顯示還是居底顯示，看你的需求，如果你的場景是可以滑動的，也是很方便管理。

• UI適配

  這裡我的方案是使用cocostudio的UI佈局工具，支援相對佈局，以及百分比對其，通過一個佈局檔案，可能適配遊戲中各種UI的需求。

累了，今天先寫這麼多，下一篇文章我就會講怎麼用cocostudio的做佈局適配。