Cocos2dx-3.x 学习笔记一：屏幕分辨率及适配问题

如何实现屏幕的适配，尤其是利用cocos studio进行开发的过程中，制定的界面采用绝对布局，在实际设备显示的时候可能出现很多的问题

http://www.tuicool.com/articles/RZbumq给出了一个很好的小结，可以参考，下面小结一下，给出自己的理解

准备

first:

利用cocos studio创建一个scene,在其中添加一些基本元素，如背景，text，button等

本文设计的为 640x960的场景，如：

将上面的场景发布到visual studio中，然后我们开始测试编辑，首先在AppDelegate.cpp中进行相关设置

second:

介绍一下VisibleSize,WinSize,FrameSize， VisibleOrigin之间的联系和区别

（参考：http://www.jb51.cc/article/p-tiqzxfjo-gv.html）

FrameSize: 屏幕实际分辨率，固定不变的，由设备（即具体的手机自己决定）

WinSize: 设计分辨率，相当于游戏设计的逻辑大小（即我们计划的游戏场景大小）

VisibleSize: 显示分辨率，总是小于等于WinSize的

VisibleOrigin: 即VisibleSize在WinSize中的左下角坐标

e.g:

FrameSize-> width:720,height:420

WinSize-> width:360,height:240

在无ResolutionPolicy::NO_BORDER的条件下为：（NO_BORDER的具体意义下面讲述）

third:

setDesignResolutionSize(DW, DH, resolutionPolicy)

有三个参数，设计分辨率宽，设计分辨率高，分辨率策略。

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

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

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

测试FrameSize,VisableSize之间关系

first :

原始图像如上所示，现在我们假设设备FramSize（640，960），设置FramSize为（320，480），则显示结果为

glview->setFrameSize(640,960);

director->getopenGLView()->setDesignResolutionSize(320,480,ResolutionPolicy::SHOW_ALL);

如果将WinSize设置为（640， 960）：

glview->setFrameSize(640， 960);

director->getopenGLView()->setDesignResolutionSize(640,960,ResolutionPolicy::SHOW_ALL);

----》因为屏幕太小，所以没有能完全显示出来，理论上是ok的

换算成：

glview->setFrameSize(320,480);

director->getopenGLView()->setDesignResolutionSize(640,ResolutionPolicy::SHOW_ALL);

---->winSize---width:640,height:960

---->visibleSize---width:640,height:960

测试适配问题

上面测试的FrameSize和VisibleSize之间正好成比例，那么不成比例的情况呢，如

glview->setFrameSize(320,500);

director->getopenGLView()->setDesignResolutionSize(640,ResolutionPolicy::SHOW_ALL);

--------------------------------------------------------------------------------------------------------------

glview->setFrameSize(340,ResolutionPolicy::SHOW_ALL);

最常用的分辨率策略是SHOW_ALL,那么上面的问题如何解决？

在 show all 的基础上加以改进，完全消除黑边，原理如下：

show all表示保证图片资源全部能够显示在界面上，因此按比例进行缩放时，是有选择的，我们举例说明：

放大---->

设 FrameSize: dw,dh,VisibleSize: vw,vh

缩放比例为： sx = dw / vw,sy = dh / vh -----> 如 sx=2,sy=3,全部显示时，需要将资源宽放大两倍，高放大三倍，故此处选择的将是统一放大两倍，即高将填不满，有黑边，考虑将vh放大一点也达到dh的一半

即这里选择方案将是重设vh = dh / sx

---> 放大时，选择较小的比例

if sx < sy then vh=dh/sx

然后整体的放大sx倍即可完美的填充界面

缩小时----->

正和上面相反，假设sx=0.25,sy=0.5 -----> 按照show_all的原则，选择宽填满，缩小1/4，此时可以知道高将有空白黑边，因此需要放大vh为之前的两倍才有可能在缩小1/4的时候恰好填充屏幕

即这里选择方案是重设

if sx < sy then vw = dw/sy

这里，通过实际测试，发现:

---->在WinSize小于FrameSize的时候，即需要缩小图片时，可以采用下面的来实现：

    float deviceWidth = 300;
    float deviceHeight = 460;
 
    float designWidth = 640;
    float designHeight = 960;
 
    float scaleX = deviceWidth / designWidth;
    float scaleY = deviceHeight / designHeight;
    if(scaleX > scaleY) // 这里是区别处
        designHeight = deviceHeight / scaleX;
    else
        designWidth = deviceWidth / scaleY;
    log("design: %f %f %f %f\n",designWidth,designHeight,scaleX,scaleY);
    director->getopenGLView()->setDesignResolutionSize(designWidth,ResolutionPo

---->当WinSize大于FrameSize的时候，即需要放大图片时，采用

float deviceWidth = 300;
    float deviceHeight = 460;
 
    float designWidth = 640;
    float designHeight = 960;
 
    float scaleX = deviceWidth / designWidth;
    float scaleY = deviceHeight / designHeight;
    if(scaleX < scaleY) // ------------> 区别处
        designHeight = deviceHeight / scaleX;
    else
        designWidth = deviceWidth / scaleY;
    log("design: %f %f %f %f\n",ResolutionPolicy::SHOW_ALL);

Cocos2dx-3.x 学习笔记一：屏幕分辨率及适配问题

相关文章