cocos2d-x 一套資源適配所有機型 教程(一)

遊戲開始開發的時候，首先要選擇合適的適配方案，才能夠進行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其實也一樣
最後我們其實已經不針對於特定機型的分辨率去編程 而是根據比例算出來一個設計分辨率 這是重點的。

device	winSize	bsSize
iPhone3gs	320x480 （2/3）	640x960
iPhone4	640x960（2/3）	640x960
iPhone5,5s	640x1136（9/16）	640x1136
iPhone6	750x1334（9/16）	640x1138
iPhone6p	1242x2208 （9/16）	640x1138
iPad1,iPad2	768x1024 （3/4）	720x960
iPad3~iPad Air2	1536x2048 （3/4）	720x960

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

這樣做的好處

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

• 場景適配

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

• UI適配

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

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