游戏开始开发的时候,首先要选择合适的适配方案,才能够进行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的做布局适配。