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://blog.youkuaiyun.com/monzart7an/article/details/19357893）

    ​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, WinSize, 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, 960, ResolutionPolicy::SHOW_ALL);

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

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

 

测试适配问题

---

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

glview->setFrameSize(320,500);

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

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

glview->setFrameSize(340,480);

director->getOpenGLView()->setDesignResolutionSize(640, 960, 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, designHeight, 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", designWidth, designHeight, scaleX, scaleY);
    director->getOpenGLView()->setDesignResolutionSize(designWidth, designHeight, ResolutionPolicy::SHOW_ALL);