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的做布局适配。