Cocos2d-x 屏幕适配

参考自【黑米GameDev街区】原文链接:http://www.himigame.com/iphone-cocos2dx/1404.html

 初入cocos2dx 开发，要把刀具磨利了，才能砍更多的柴，这次找了些资料，学习了屏幕适配的问题。

概念性问题，先参考himi大锅的文章

而在设计游戏之初，决定着我们屏幕适配的因素有哪些，简而言之只有两点：屏幕大小 和 宽高比。这两个因素是如何影响游戏的：

• 屏幕大小： 从小分辨率 480×320 到 1280×800 分辨率，再到全高清 1080p，从手机到平板，还有苹果设备的 Retina屏，这么多不同的分辨率，而且大小差距甚大，不可能做到一套资源走天下，资源往小了设计，在大屏幕会显示模糊，图片往大了设计，在小屏幕设备又太浪费，而且小屏幕的手机硬件资源也会相对的紧缺，所以 根据屏幕大小使用不同的资源 是有必要的，而 cocos2d-x 也帮我们解决了这一点。

 

• 宽高比： 什么是宽高比，就是你的屏幕是方的还是长的，靠近方形的分辨率如 480×320，比例为 3:2，还有 960×540 的16:9 标准宽屏，这也算是两种总极端情况了，如果能在这两种比例情况做好适配基本就可以了，如果比 3:2 “更方”如 4:3，比 16:9 “更长”，那么不论如何布局，显示效果差距甚大，最好对固定比例优化吧。当在宽高比在一定范围内，可以通过灵活编写程序去适应，而在显示效果上，cocos2d-x 为我们提供了三种模式，这些 模式更多的是帮我们解决比例不一的情况而存在 的，如果只是屏幕大小（比例一样），那通过简单的放大缩小即可完成。

在cocos2dx   2.1.3 中，有五种模式可供选择

    // The entire application is visible in the specified area without trying to preserve the original aspect ratio.
    // Distortion can occur, and the application may appear stretched or compressed.
    // 长宽被拉伸至屏幕大小，不按长宽比例拉伸，元素变形较大
    kResolutionExactFit,
    效果图：屏幕size：480x320       设置的winsize：400x320      

    

    // The entire application fills the specified area, without distortion but possibly with some cropping,
    // while maintaining the original aspect ratio of the application.
    //无黑边框 ，但是 有些元素会在屏幕外，元素按长宽比例拉伸，不变形
    kResolutionNoBorder,
   效果图：屏幕size：480x320       设置的winsize：400x320
   

    // The entire application is visible in the specified area without distortion while maintaining the original
    // aspect ratio of the application. Borders can appear on two sides of the application.
    // 显示所有游戏元素，有黑框，元素按长宽比例拉伸 不变形
    kResolutionShowAll,
    效果图：屏幕size：480x320       设置的winsize：400x320
   

    // The application takes the height of the design resolution size and modifies the width of the internal
    // canvas so that it fits the aspect ratio of the device
    // no distortion will occur however you must make sure your application works on different
    // aspect ratios
    // 按高度拉伸到屏幕的比例拉伸宽度。元素按长宽比例拉伸 不变形
    kResolutionFixedHeight,
    效果图：屏幕size：480x320       设置的winsize：400x320  加在图片后的背景也显示出来了,winsize变化为480x320       320/320=480/480，只固定了高度，宽度不截取
   

    // The application takes the width of the design resolution size and modifies the height of the internal
    // canvas so that it fits the aspect ratio of the device
    // no distortion will occur however you must make sure your application works on different
    // aspect ratios
    // 按高度拉伸到屏幕的比例拉伸宽度。元素按长宽比例拉伸 不变形
    kResolutionFixedWidth,
    效果图：屏幕size：480x320       设置的winsize：400x320      winsize变化为400x267       变化比例为  480/400 = 320/267
   

    // 无模式
    kResolutionUnKnown,

 
分析以上模式，各有有缺点。
        kResolutionExactFit模式，虽然能保证全屏，并且元素位置相对于坐标原点不变，但是，显示结果有形变

        kResolutionNoBorder模式，也保证了全屏显示，但是，y方向被拉伸超出屏幕外，有些元素不能正常显示

        kResolutionShowAll模式，保证了所有元素都能正常位于屏幕内，并且元素按所设置的winsize设置坐标，扔正常显示在相对位置

       kResolutionFixedWidth，kResolutionFixedHeight模式，按fixed的边的比例缩放，另一边也按此比例缩放。缩放后，再全屏伸缩，但winsize不变

其中，kResolutionNoBorder模式和kResolutionShowAll模式的优点最为明显，所以，如果可以集两种模式为一体，各取所长，会能更好的解决屏幕适配的问题。

kResolutionLeafsoar

！！！这是什么模式！好吧，Leafsoar 是 一叶 的 ID ，或者是本博客的一级域名而已 :P 在 cocos2d-x 中并没有这种模式。除却 UnKnown 与 ExactFit 不说，ShowAll 的优势是，只需要一个设计分辨率，然后通过 WinSize 设置相对对位即可，而且位置的最大长宽都是确定，方便了开发，但屏幕不能填满， NoBorder 模式的优势是在画面不变形的情况下，实现全屏，显示效果更好，但 WinSize 一定程度失效，需要通过运行时计算 VisibleSize 和 VisibleOrigin 来设置位置，由于是运行时计算，所以也就会出现，各种屏幕显示效果不一样的情况。

ShowAll 和 NoBorder 各有所长，各有所短，而这里提出的新适配解决方案正是取两者之长，舍两者之短的 组合模式。简单说来就是用 NoBorder 去实现 ShowAll 的思想。NoBorder 可以保证全屏利用，ShowAll 可以更好的使用实际设计坐标固定位置，而且相对位置不会随宽高比的改变而改变，这在编写游戏的时候能方便不少。先上一个示意图，一目了然 （两个图，两个方向）：

在原来 NoBorder 模式示意图上添加了新的概念，LsSize = X Y M N (leafsoar 简写了，为了不跟 cocos2d-x 的一些概念混淆，什么名字不重要，只要了解其含义即可)，在 NoBorder 模式下的 LsSize 相对于 FrameSize 而言，正如 在 ShowAll 模式下的 WinSize 相对于 FrameSize，所以说这是 ShowAll NoBorder 的组合概念，而这里的 LsSize 与 WinSize 的宽高比是一致的。

猛地一看，似乎把问题复杂化了，仔细一看，还不如猛地一看 ~~

在 ShowAll 中，WinSize 作为最高的宽高，以此参照设置位置，因为在此范围内都能在屏幕上显示，用了 NoBorder 使得四周可能被截去一块区域，而这个区域大小不可控制，所以不能再使用 WinSize 作为参考点来设置位置，而这里的 LsSize 同样，因为 LsSzie 不论在什么情况下，总能显示在屏幕之内，我们可以方便的使用 LsSize 作为坐标系参考，并且可以全屏显示，在配合 VisibleSize ，相比纯的 NoBorder 加强了不少。它可以怎么用？

可以把 LsSize 当作 ShowAll 中的 WinSize 来用，而黑边可以使用稍大的图片填充，或者使用其它图片修饰边框，修饰的边框图案可大可小，可长可短，填充屏幕，保持全屏。

开始基于 LsSize 的游戏设计实现

为了能够准确实现基于 LsSize 的设计，初步计划将 LsSize 设定在 480×320 的分辨率方案，为此做了些准备，首先不使用任何模式情况下，在场景内调用如下：

 

1. CCSize size = CCDirector::sharedDirector()->getWinSize();
2. 
   
3. CCPoint center = ccp(size.width/2, size.height/2);
4. 
   
5. // 大小 600×500 为了 NoBorder 看到效果，使用稍大的背景图
6. CCSprite* pb = CCSprite::create(“Back.jpg”);
7. pb->setPosition(center);
8. this->addChild(pb, 0);
9. 
   
10. // 480×320 此图为使用于设计分辨率 LsSize 的图片
11. CCSprite* pSprite = CCSprite::create(“HelloWorld.png”);
12. pSprite->setPosition(center);
13. this->addChild(pSprite, 0);
14. 
    
15. // 37×37 在 480×320 画面的四个拐角处，添加参照
16. CCSprite* p1 = CCSprite::create(“Peas.png”);
17. p1->setPosition(ccpAdd(center, ccp(-240, -160)));
18. this->addChild(p1);
19. 
    
20. CCSprite* p2 = CCSprite::create(“Peas.png”);
21. p2->setPosition(ccpAdd(center, ccp(240, 160)));
22. this->addChild(p2);
23. 
    
24. CCSprite* p3 = CCSprite::create(“Peas.png”);
25. p3->setPosition(ccpAdd(center, ccp(-240, 160)));
26. this->addChild(p3);
27. 
    
28. CCSprite* p4 = CCSprite::create(“Peas.png”);
29. p4->setPosition(ccpAdd(center, ccp(240, -160)));
30. this->addChild(p4);

WinSize 与 LsSize 的值是相对的，与其通过固定 WinSize 在运行时动态获得 LsSize （这也是 NoBorder 的默认方式，而导致的结果是 WinSize 没有参考价值），不如我们固定 LsSize 而在运行时算得 WinSize 设置来的要更妙一些。

现在不使用 setContentScaleFactor 方法，而修改 setDesignResolutionSize 这里的值，我们知道 WinSize 是 480×320 时，LsSize 必然会小于此值，而 NoBorder 的放大系数我们可以通过如下方式算得（可以参考setDesignResolutionSize方法内部实现），并在 AppDelegate 里执行：

 

1. CCSize frameSize = CCEGLView::sharedOpenGLView()->getFrameSize();
2. // 设置 LsSize 固定值
3. CCSize lsSize = CCSizeMake(480, 320);
4. 
   
5. float scaleX = (float) frameSize.width / lsSize.width;
6. float scaleY = (float) frameSize.height / lsSize.height;
7. 
   
8. // 定义 scale 变量
9. float scale = 0.0f; // MAX(scaleX, scaleY);
10. if (scaleX > scaleY) {
11. // 如果是 X 方向偏大，那么 scaleX 需要除以一个放大系数，放大系数可以由枞方向获取，
12. // 因为此时 FrameSize 和 LsSize 的上下边是重叠的
13. scale = scaleX / (frameSize.height / (float) lsSize.height);
14. } else {
15. scale = scaleY / (frameSize.width / (float) lsSize.width);
16. }
17. 
    
18. CCLog(“x: %f; y: %f; scale: %f”, scaleX, scaleY, scale);
19. 
    
20. // 根据 LsSize 和屏幕宽高比动态设定 WinSize
21. CCEGLView::sharedOpenGLView()->setDesignResolutionSize(lsSize.width * scale,
22. lsSize.height * scale, kResolutionNoBorder);

1. 
   

显示效果：（NoBorder 模式 ;FrameSize = 520×320; LsSize = 480×320; WinSize = 动态获取） 

我们看到在没有修改源代码，并且在设计中使用 480×320 的参考系，也既是基于 LsSize 的设计显示效果如我们预期，那么我们换一个 FrameSize 来看看是否能够自动适应呢？如下：

显示效果：（NoBorder 模式 ;FrameSize = 600×480; LsSize = 480×320; WinSize = 动态获取） 

到此，基于 LsSize 参考系的游戏设计已经完成了，这样做的好处是很明显的，集 ShowAll 和 NoBorder 的优点于一处，这里的图片元素是为了好定位，实现的需要而写的，具体场景可以使用背景地图，或一张大的图片显示，而没有任何影响，也可以继续使用 VisibleSize 得到 LsSize 之外的部分区域大小，在 LsSize 之外可以使用背景图片作为装饰，即保证了游戏的全屏，又保证了游戏设计时的方便，如果使用完全基于 LsSize 的设计实现，除了显示背景装饰之外，我们不想让 LsSize 的内部元素显示到 LsSize 之外如何做呢？我们只需要设定 LsSize 层的的显示区域即可，我们可以修改场景的实现：

 

1. // 这里先简单实现思路
2. 
   
3. CCScene* HelloWorld::scene() {
4. 
   
5. CCScene *scene = CCScene::create();
6. // 创建背景层
7. CCLayer* b = CCLayer::create();
8. scene->addChild(b);
9. 
   
10. // 添加背景图片和设置位置，可以使用其它装饰，或者小图片屏幕都行
11. CCSize size = CCDirector::sharedDirector()->getWinSize();
12. CCPoint center = ccp(size.width/2, size.height/2);
13. CCSprite* pb = CCSprite::create(“Back.jpg”);
14. pb->setPosition(center);
15. b->addChild(pb, 0);
16. 
    
17. // 创建 LsLayer 层
18. HelloWorld *lsLayer = HelloWorld::create();
19. scene->addChild(lsLayer);
20. 
    
21. return scene;
22. }
23. 
    
24. // 在 HelloWorld 中重写 visit() 函数 设定显示区域
25. void HelloWorld::visit() {
26. glEnable(GL_SCISSOR_TEST); // 开启显示指定区域
27. // 在这里只写上固定值，在特性环境下，以便快速看效果，实际的值，需要根据实际情况算得
28. glScissor(20, 0, 480, 320); // 只显示当前窗口的区域
29. CCLayer::visit(); // 调用下面的方法
30. glDisable(GL_SCISSOR_TEST); // 禁用
31. }

1. 
   

显示效果：（NoBorder 模式 ;FrameSize = 520×320; LsSize = 480×320; WinSize = 动态获取）