cocos2dX游戏屏幕适配学习

目前市场上有很多种屏幕

•  2.8英寸分辨率为640x480(VGA)  像素密度286PPI  

•   3.2英寸分辨率为480x320(HVGA)  像素密度167PPI

•   3.3英寸分辨率为854x480(WVGA)  像素密度297PPI  

•   3.5英寸分辨率为480x320(HVGA)  像素密度165PPI  

•   3.5英寸分辨率为800x480(WVGA)  像素密度267PPI  

•   3.5英寸分辨率为854x480(WVGA)  像素密度280PPI  

•  3.5英寸分辨率为960x640(DVGA)  像素密度326PPI（苹果iphone4）

•   3.7英寸分辨率为800x480(WVGA)  像素密度252PPI

•   3.7英寸分辨率为960x540(qHD)  像素密度298PPI  

•   4.0英寸分辨率为800x480(WVGA)  像素密度233PPI  

•   4.0英寸分辨率为854x480(WVGA)  像素密度245PPI  

•   4.0英寸分辨率为960x540(qHD)  像素密度275PPI  

•   4.0英寸分辨率为1136x640(HD)  像素密度330PPI（苹果iphone5）

•   4.2英寸分辨率为960x540(qHD)  像素密度262PPI    

•   4.3英寸分辨率为800x480(WVGA)  像素密度217PPI  

•   4.3英寸分辨率为960x640(qHD)  像素密度268PPI  

•   4.3英寸分辨率为960x540(qHD)  像素密度256PPI  

•   4.3英寸分辨率为1280x720(HD)  像素密度342PPI

•   4.5英寸分辨率为960*540(qHD)  像素密度245PPI

•   4.5英寸分辨率为1280x720(HD)  像素密度326PPI

•   4.5英寸分辨率为1920x1080(FHD)像素密度490PPI  

•   4.7英寸分辨率为1280x720(HD)  像素密度312PPI  

•   4.8英寸分辨率为1280x720(HD)  像素密度306PPI

•   5.0英寸分辨率为480x800(WVGA)  像素密度186PPI

•   5.0英寸分辨率为1024x768(XGA)  像素密度256PPI

•   5.0英寸分辨率为1280*720      像素密度294PPI

•   5.0英寸分辨率为1920x1080(FHD)像素密度441PPI  

•   5.3英寸分辨率为1280x800(WXGA)像素密度285PPI  

•   5.3英寸分辨率为960x540(qHD)  像素密度207PPI

•   6.0英寸分辨率为854×480      像素密度163PPI

•   6.0英寸分辨率为1280X 720     像素密度245PPI

•   7.0英寸分辨率为800x480(WVGA)  像素密度128PPI

•   7.0英寸分辨率为1024*600      像素密度169PPI

•   7.0英寸分辨率为1280*800      像素密度216PPI

•   9.7英寸分辨率为1024x768(XGA)，像素密度132ppi

•   9.7英寸分辨率为2048x1536，   像素密度264PPI

Cocos2d-x2.0.4开始，Cocos2d-x提出了自己的多分辨率从支持方案，废弃了之前的retina相关设置接口，提出了designresolution概念。

designresolution 目的是屏蔽设备分辨率，精灵坐标都在designresolution上布局，但要实现这个目标并不简单。Cocos2d-x提供了一组相关的接口和5种分辨率适配策略，哪种策略才是我们需要的，下面我们一同探寻。

•有以下相关接口：

// 设计分辨率大小及模式

•CCEGLView::sharedOpenGLView()->setDesignResolutionSize(DW,DH, resolutionPolicy);

• // 内容缩放因子

• CCDirector::sharedDirector()->setContentScaleFactor();

• // 资源搜索路径

•CCFileUtils::sharedFileUtils()->setSearchPaths();

• // 屏幕分辨率

•CCEGLView::sharedOpenGLView()->getFrameSize();

// 设计分辨率
CCDirector::sharedDirector()->getWinSize();
 // 设计分辨率可视区域大小
CCDirector::sharedDirector()->getVisibleSize();
// 设计分辨率可视区域起点
CCDirector::sharedDirector()->getVisibleOrigin();

Cocos2d-x为我们提供了5种策略：

enum ResolutionPolicy

{

kResolutionExactFit,

kResolutionShowAll,

kResolutionNoBorder,

kResolutionFixedHeight, //Cocos2d-x2.1.3

kResolutionFixedWidth,

};

资源分辨率，设计分辨率，屏幕分辨率

•Resourceswidth 以下简写为RW，

•Resourcesheight以下简写为RH

•Designwidth 以下简写为DW，

•Designheight以下简写为DH

•Screenwidth 以下简写为SW，

•Screenheight以下简写为SH

Cocos2d-x图片显示有下面两个逻辑过程。
资源布局à设计分辨率，设计分辨率布局à屏幕。

接口setContentScaleFactor()和setSearchPaths()控制着第一个转换过程。
而setDesignResolutionSize()控制第二个过程。两个过程结合在一起，影响最终的显示效果。

从资源分辨率到设计分辨率

•setSearchPaths()需要根据当前屏幕分辨率做恰当的设置

•setContentScaleFactor()决定了图片显示到屏幕的缩放因子，但是这个接口的参数不是通过资源图片的宽、高比屏幕宽、高得来。Cocos2d-x引擎设计试图屏蔽游戏开发者直接去关注屏幕，所以这个因子是资源宽、高比设计分辨率宽、高。

•setContentScaleFactor()通常有两个方式来设置参数。
RH/DH或RW/DW，不同的因子选择有不同的缩放作用。

先看一张图:


用高度比作为内容缩放因子，保证了背景资源的垂直方向在设计分辨率范围内的全部显示。

用宽度比作为内容缩放因子，保证了背景资源的水平方向在设计分辨率范围内的全部显示。

从设计分辨率到屏幕分辨率

• setDesignResolutionSize(DW, DH, resolutionPolicy);

•有三个参数，设计分辨率宽，设计分辨率高，分辨率策略。
前两个很好理解，复杂点在分辨率策略的选择上。

•

•先来看kResolutionExactFit，kResolutionNoBorder，kResolutionShowAll这三种情况，2.1.3新加入的策略稍后分析。
三种策略的设计分辨率都是传入值，内部不做修正。

再来看一张图

•kResolutionShowAll

•屏幕宽、高分别和设计分辨率宽、高计算缩放因子，取较(小)者作为宽、高的缩放因子。保证了设计区域全部显示到屏幕上，但可能会有黑边。

•

•kResolutionExactFit

•屏幕宽 与 设计宽比 作为X方向的缩放因子，屏幕高与 设计高比 作为Y方向的缩放因子。保证了设计区域完全铺满屏幕，但是可能会出现图像拉伸。

•kResolutionNoBorder

•    屏幕宽、高分别和设计分辨率宽、高计算缩放因子，取较(大)者作为宽、高的缩放因子。保证了设计区域总能一个方向上铺满屏幕，而另一个方向一般会超出屏幕区域。

     kResolutionNoBorder是之前官方推荐使用的方案，他没有拉伸图像，同时在一个方向上撑满了屏幕，但是2.1.3新加入的两种策略将撼动kResolutionNoBorder的地位。
kResolutionFixedHeight 和 kResolutionFixedWidth
都是会在内部修正传入设计分辨率，以保证屏幕分辨率到设计分辨率无拉伸铺满屏幕。

如图：

•

• kResolutionFixedHeight

•保持传入的设计分辨率高度不变，根据屏幕分辨率修正设计分辨率的宽度。

•

•kResolutionFixedWidth

•保持传入的设计分辨率宽度不变，根据屏幕分辨率修正设计分辨率的高度。

•

•结合两个过程

•第一过程有两种情况，第二过程有5种情况，在一个分辨率下会有10种可能的方案组合。
如何选择自己需要的？
我们需要作出选择，是牺牲效果还是牺牲部分显示区域。

•
在我的游戏里面，背景图的高需要全部显示，而宽方向可以裁减。

•要实现这个目的，需要保证两个过程都是在宽方向裁减。

•第一过程选择 setContentScaleFactor(RH/DH)

•第二过程有两个选择：kResolutionNoBorder和kResolutionFixedHeight

•为了说明两者的区别，需要结合VisibleOrigin和VisibleSize。

kResolutionNoBorder模式：

• kResolutionNoBorder情况下，设计分辨率并不是可见区域，我们布局精灵需要根据VisibleOrigin和VisibleSize来做判断处理。

•而 kResolutionFixedHeight则不同，设计分辨率就是可见区域，VisibleOrigin总是(0,0)
getVisibleSize() = getWinSize()，kResolutionFixedHeight达到了同样的目的，但是却简化了代码。

•kResolutionFixedHeight和kResolutionFixedWidth是kResolutionNoBorder的进化，新项目中建议立即开始使用这两种方式。

•小结：

• kResolutionFixedHeight

•适合高方向需要撑满，宽方向可裁减的游戏，结合setContentScaleFactor(RH/DH)使用。

•

• kResolutionFixedWidth

•适合宽方向需要撑满，高方向可裁减的游戏，结合setContentScaleFactor(RW/DW)使用。