cocos2dx进阶学习之屏幕适配

转载于：http://blog.csdn.net/itcastcpp/article/details/18608437

背景

在学习cocos2dx时，我们在main函数中发现一句代码，

[cpp] view plain copy print ?

1. #include "main.h"  
2. #include "AppDelegate.h"  
3. #include "CCEGLView.h"  
4.   
5. USING_NS_CC;  
6.   
7. int APIENTRY _tWinMain(HINSTANCE hInstance,  
8.                        HINSTANCE hPrevInstance,  
9.                        LPTSTR    lpCmdLine,  
10.                        int       nCmdShow)  
11. {  
12.     UNREFERENCED_PARAMETER(hPrevInstance);  
13.     UNREFERENCED_PARAMETER(lpCmdLine);  
14.   
15.     // create the application instance  
16.     AppDelegate app;  
17.     CCEGLView* eglView = CCEGLView::sharedOpenGLView();  
18.     eglView->setViewName("CrazyMario");  
19.     eglView->setFrameSize(480, 320);  
20.     return CCApplication::sharedApplication()->run();  
21. }  

#include "main.h"
#include "AppDelegate.h"
#include "CCEGLView.h"

USING_NS_CC;

int APIENTRY _tWinMain(HINSTANCE hInstance,
                       HINSTANCE hPrevInstance,
                       LPTSTR    lpCmdLine,
                       int       nCmdShow)
{
    UNREFERENCED_PARAMETER(hPrevInstance);
    UNREFERENCED_PARAMETER(lpCmdLine);

    // create the application instance
    AppDelegate app;
    CCEGLView* eglView = CCEGLView::sharedOpenGLView();
    eglView->setViewName("CrazyMario");
    eglView->setFrameSize(480, 320);
    return CCApplication::sharedApplication()->run();
}

那就是eglView->setFrameSize(480,320)，这句代码设置了窗口的大小，一般说来手机游戏需要全屏显示，所以对于不同分辨率的手机，setFrameSize要求不一样的。这样是不是很崩溃？因为我们代码里很多地方可能也要改，图片大小可能也要改，那怎么办呢？

其实cocos2dx已经为我们做好了这一切

结局方案

这个方案就是调用eglView->setDesignResolutionSize(480, 320, kResolutionShowAll);来告诉cocos2dx，我的程序是按照480，320来设计的，那么setFrameSize如果不是480，320那么cocos2dx会按照比例给我们做适配，不用我们做别的事情。

在超级马里奥这个游戏里，在AppDelegate中已经调用了setDesignResolutionSize函数设置设计大小为480，320

那么在setFrameSize不同的情况下，也不会引起图片比例不合适的情况，只是窗口大小会发生变化而已

在480*320的情况下

在960*640的情况下，只是界面变大了，图片没有任何的不适合

setDesignResolutionSize的参数

第三个参数的取值范围如下：

[cpp] view plain copy print ?

1. enum ResolutionPolicy  
2. {  
3.     // The entire application is visible in the specified area without trying to preserve the original aspect ratio.  
4.     // Distortion can occur, and the application may appear stretched or compressed.  
5.     kResolutionExactFit,  
6.     // The entire application fills the specified area, without distortion but possibly with some cropping,  
7.     // while maintaining the original aspect ratio of the application.  
8.     kResolutionNoBorder,  
9.     // The entire application is visible in the specified area without distortion while maintaining the original  
10.     // aspect ratio of the application. Borders can appear on two sides of the application.  
11.     kResolutionShowAll,  
12.     // The application takes the height of the design resolution size and modifies the width of the internal  
13.     // canvas so that it fits the aspect ratio of the device  
14.     // no distortion will occur however you must make sure your application works on different  
15.     // aspect ratios  
16.     kResolutionFixedHeight,  
17.     // The application takes the width of the design resolution size and modifies the height of the internal  
18.     // canvas so that it fits the aspect ratio of the device  
19.     // no distortion will occur however you must make sure your application works on different  
20.     // aspect ratios  
21.     kResolutionFixedWidth,  
22.   
23.     kResolutionUnKnown,  
24. };  

enum ResolutionPolicy
{
    // 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,
    // The entire application fills the specified area, without distortion but possibly with some cropping,
    // while maintaining the original aspect ratio of the application.
    kResolutionNoBorder,
    // 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,
    // 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,
    // 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,

    kResolutionUnKnown,
};

kResolutionExactFit：会靠拉伸来填满屏幕，本例来说背景图会变形来填充屏幕，因为1024:768=1.3， 480:320=1.5，宽高比不同，图片也就无法等比缩放来填满屏幕，只能变形了。
kResolutionNoBorder： 看不到黑边，实际就是宽高等比缩放，但缩放比例取宽比和高比之中大的那一个。
kResolutionShowAll：全部显示，可以理解为保证内容都显示在屏幕之内，实际也是宽高等比缩放，但缩放比例取宽比和高比之中小的那一个。