cocos2d-x 2.0版本 自适应屏幕分辨率

我使用的版本是cocos2d-2.0-x-2.0.4，cocos2dx-2.0版本对多分辨率适配提供了很好的支持，使用起来比1.0版本要简单些，1.0版本的适配可以参考这篇博文。
1. 做2.0版本的适配首先需要了解下面这些知识。
(1)适配策略
2.0版本提供了三种适配策略：
kResolutionNoBorder：超出屏幕的部分会被裁剪，两侧没有黑边，铺满屏幕，按图片原始比例显示，图片不变形。
kResolutionShowAll：整个游戏界面是可见的，会按原始比例进行缩放，图片不变形，但两侧可能会留有黑边，不铺满屏幕。
kResolutionExactFit：整个游戏界面是可见的，图片可能会进行拉伸或者压缩处理，铺满屏幕，图片会变形。
可以根据自己的要求选择。
(2)VisibleSize和VisibleOrigin
getVisibleSize：表示获得视口(可视区域)的大小，如果DesignResolutionSize跟屏幕尺寸一样大，则getVisibleSize等于getWinSize。
getVisibleOrigin：表示可视区域的起点坐标，这在处理相对位置的时候非常有用，确保节点在不同分辨率下的位置一致。
(3)DesignResolutionSize
DesignResolutionSize是一个比较重要的概念，其实2.0版本的适配跟1.0版本原理差不多，都是按比例进行缩放。这个DesignResolutionSize表示设计方案，就是你的游戏完美支持的分辨率方案，一般根据图片资源的尺寸来定，自适配时会按照这个分辨率计算出缩放因子。因此，这个值也应该是动态的，如果是横屏游戏则高度肯定是铺满屏幕的，宽度也要尽可能的铺满屏幕，因此应该选择宽高比最大的作为设计分辨率，下面的demo会给出使用方法。
(4)设置相对位置
在游戏中使用相对位置设置坐标的好处是显而易见的，这样就不需要为每个分辨率都定义一套坐标了。首先得定义一些参考点，引擎的TestCpp例子中就提供了一种方法，以屏幕上可视区域的9个点作为参考点，相当于在该矩形内写一个米字，这9个点分别是：左上、左、左下、下、右下、右、右上、上、中心。

2. 下面来实现一个简单的demo，首先创建一个win32工程，这个就不详述了。
(1)创建一个AppMacros.h文件，定义了一些宏，源码如下：

[cpp] view plaincopy
  1. #ifndef __APPMACROS_H__  
  2. #define __APPMACROS_H__  
  3.    
  4. #include "cocos2d.h"  
  5.    
  6. typedef struct tagResource  
  7. {  
  8.     cocos2d::CCSize size;  
  9.     char directory[100];  
  10. }Resource;  
  11.    
  12. //可用的资源尺寸  
  13. static Resource smallResource  =  { cocos2d::CCSizeMake(480, 320),   "iphone" };  
  14. static Resource mediumResource =  { cocos2d::CCSizeMake(1024, 768),  "ipad"   };  
  15. static Resource largeResource  =  { cocos2d::CCSizeMake(2048, 1536), "ipadhd" };  
  16.    
  17. //设计方案  
  18. static cocos2d::CCSize smallDesignResolutionSize = cocos2d::CCSizeMake(480.0f, 320.0f);  
  19. static cocos2d::CCSize mediumDesignResolutionSize = cocos2d::CCSizeMake(1024.0f, 768.0f);  
  20. static cocos2d::CCSize largeDesignResolutionSize = cocos2d::CCSizeMake(2048.0f, 1536.0f);  
  21.    
  22. //缩放因子，主要给文字标签使用  
  23. #define SCALE_FACTOR  (cocos2d::CCEGLView::sharedOpenGLView()->getDesignResolutionSize().width / smallResource.size.width)  
  24.    
  25. #endif  
(2)接下来修改AppDelegate.cpp文件的applicationDidFinishLaunching函数，添加以下代码：

[cpp] view plaincopy
  1. bool AppDelegate::applicationDidFinishLaunching()  
  2. {  
  3.     // initialize director  
  4.     CCDirector *pDirector = CCDirector::sharedDirector();  
  5.     CCEGLView *pEGLView = CCEGLView::sharedOpenGLView();  
  6.     pDirector->setOpenGLView(pEGLView);  
  7.    
  8.     CCSize frameSize = pEGLView->getFrameSize();  
  9.     float ratio = frameSize.width / frameSize.height;  
  10.     float ratio1 = largeDesignResolutionSize.width / largeDesignResolutionSize.height;  
  11.     float ratio2 = mediumDesignResolutionSize.width / mediumDesignResolutionSize.height;  
  12.     float ratio3 = smallDesignResolutionSize.width / smallDesignResolutionSize.height;  
  13.     float d1 = abs(ratio - ratio1);  
  14.     float d2 = abs(ratio - ratio2);  
  15.     float d3 = abs(ratio - ratio3);  
  16.     std::map<float, CCSize> designSize;  
  17.     designSize[d1] = largeDesignResolutionSize;  
  18.     designSize[d2] = mediumDesignResolutionSize;  
  19.     designSize[d3] = smallDesignResolutionSize;  
  20.     std::map<float, CCSize>::reverse_iterator iter = designSize.rbegin();  
  21.     //得到key最大的，因此我这里是横屏，所以以高度为基准，为了确保缩放后宽度能全屏，所以选取宽高比最大的为设计方案  
  22.     CCSize designResolutionSize = iter->second;  
  23.    
  24.     //pEGLView->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, kResolutionNoBorder);  
  25.     pEGLView->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, kResolutionShowAll);  
  26.     //pEGLView->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, kResolutionExactFit);  
  27.    
  28.     if (frameSize.height > mediumResource.size.height)  
  29.     {   
  30.         CCFileUtils::sharedFileUtils()->setResourceDirectory(largeResource.directory);  
  31.         pDirector->setContentScaleFactor(largeResource.size.height/designResolutionSize.height);  
  32.     }  
  33.     else if (frameSize.height > smallResource.size.height)  
  34.     {   
  35.         CCFileUtils::sharedFileUtils()->setResourceDirectory(mediumResource.directory);  
  36.         pDirector->setContentScaleFactor(mediumResource.size.height/designResolutionSize.height);  
  37.     }  
  38.     else  
  39.     {   
  40.         CCFileUtils::sharedFileUtils()->setResourceDirectory(smallResource.directory);  
  41.         pDirector->setContentScaleFactor(smallResource.size.height/designResolutionSize.height);  
  42.     }  
  43.    
  44.     pDirector->setDisplayStats(true);  
  45.    
  46.     pDirector->setAnimationInterval(1.0 / 60);  
  47.    
  48.     CCScene *pScene = HelloWorld::scene();  
  49.    
  50.     pDirector->runWithScene(pScene);  
  51.    
  52.     return true;  
  53. }  

(3)创建VisibleRect.h和VisibleRect.cpp文件，封装了获取那9个点坐标的函数，比较简单。代码如下：
VisibleRect.h

[cpp] view plaincopy
  1. #ifndef __VISIBLERECT_H__  
  2. #define __VISIBLERECT_H__  
  3.    
  4. #include "cocos2d.h"  
  5. USING_NS_CC;  
  6.    
  7. class VisibleRect  
  8. {  
  9. public:  
  10.     static CCRect getVisibleRect();  
  11.    
  12.     static CCPoint left();  
  13.     static CCPoint right();  
  14.     static CCPoint top();  
  15.     static CCPoint bottom();  
  16.     static CCPoint center();  
  17.     static CCPoint leftTop();  
  18.     static CCPoint rightTop();  
  19.     static CCPoint leftBottom();  
  20.     static CCPoint rightBottom();  
  21. private:  
  22.     static void lazyInit();  
  23.     static CCRect s_visibleRect;  
  24. };  
  25.    
  26. #endif  

VisibleRect.cpp

[cpp] view plaincopy
  1. #include "VisibleRect.h"  
  2.    
  3. CCRect VisibleRect::s_visibleRect;  
  4.    
  5. void VisibleRect::lazyInit()  
  6. {  
  7.     if (s_visibleRect.size.width == 0.0f && s_visibleRect.size.height == 0.0f)  
  8.     {  
  9.         CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();  
  10.         s_visibleRect.origin = pEGLView->getVisibleOrigin();  
  11.         s_visibleRect.size = pEGLView->getVisibleSize();  
  12.     }  
  13. }  
  14.    
  15. CCRect VisibleRect::getVisibleRect()  
  16. {  
  17.     lazyInit();  
  18.     return CCRectMake(s_visibleRect.origin.x, s_visibleRect.origin.y, s_visibleRect.size.width, s_visibleRect.size.height);  
  19. }  
  20.    
  21. CCPoint VisibleRect::left()  
  22. {  
  23.     lazyInit();  
  24.     return ccp(s_visibleRect.origin.x, s_visibleRect.origin.y + s_visibleRect.size.height/2);  
  25. }  
  26.    
  27. CCPoint VisibleRect::right()  
  28. {  
  29.     lazyInit();  
  30.     return ccp(s_visibleRect.origin.x+s_visibleRect.size.width, s_visibleRect.origin.y + s_visibleRect.size.height/2);  
  31. }  
  32.    
  33. CCPoint VisibleRect::top()  
  34. {  
  35.     lazyInit();  
  36.     return ccp(s_visibleRect.origin.x + s_visibleRect.size.width/2, s_visibleRect.origin.y + s_visibleRect.size.height);  
  37. }  
  38.    
  39. CCPoint VisibleRect::bottom()  
  40. {  
  41.     lazyInit();  
  42.     return ccp(s_visibleRect.origin.x + s_visibleRect.size.width/2, s_visibleRect.origin.y);  
  43. }  
  44.    
  45. CCPoint VisibleRect::center()  
  46. {  
  47.     lazyInit();  
  48.     return ccp(s_visibleRect.origin.x + s_visibleRect.size.width/2, s_visibleRect.origin.y + s_visibleRect.size.height/2);  
  49. }  
  50.    
  51. CCPoint VisibleRect::leftTop()  
  52. {  
  53.     lazyInit();  
  54.     return ccp(s_visibleRect.origin.x, s_visibleRect.origin.y + s_visibleRect.size.height);  
  55. }  
  56.    
  57. CCPoint VisibleRect::rightTop()  
  58. {  
  59.     lazyInit();  
  60.     return ccp(s_visibleRect.origin.x + s_visibleRect.size.width, s_visibleRect.origin.y + s_visibleRect.size.height);  
  61. }  
  62.    
  63. CCPoint VisibleRect::leftBottom()  
  64. {  
  65.     lazyInit();  
  66.     return s_visibleRect.origin;  
  67. }  
  68.    
  69. CCPoint VisibleRect::rightBottom()  
  70. {  
  71.     lazyInit();  
  72.     return ccp(s_visibleRect.origin.x + s_visibleRect.size.width, s_visibleRect.origin.y);  
  73. }  
(4)修改HelloWorldScene.cpp的init函数，使用相对位置设置坐标。

[cpp] view plaincopy
  1. bool HelloWorld::init()  
  2. {  
  3.     if ( !CCLayer::init() )  
  4.     {  
  5.         return false;  
  6.     }  
  7.     CCMenuItemImage *pCloseItem = CCMenuItemImage::create(  
  8.                                         "CloseNormal.png",  
  9.                                         "CloseSelected.png",  
  10.                                         this,  
  11.                                         menu_selector(HelloWorld::menuCloseCallback));  
  12.    
  13.     pCloseItem->setPosition(ccpAdd(VisibleRect::rightBottom(),   
  14.                                 ccp(-pCloseItem->getContentSize().width/2, pCloseItem->getContentSize().height/2)));  
  15.    
  16.     CCMenu* pMenu = CCMenu::create(pCloseItem, NULL);  
  17.     pMenu->setPosition(CCPointZero);  
  18.     this->addChild(pMenu, 1);  
  19.    
  20.     CCLabelTTF* pLabel = CCLabelTTF::create("Hello World", "Arial", SCALE_FACTOR * 24);  
  21.     pLabel->setPosition(ccpAdd(VisibleRect::top(),  
  22.                             ccp(0, -pLabel->getContentSize().height)));  
  23.     this->addChild(pLabel, 1);  
  24.    
  25.     CCSprite* pSprite = CCSprite::create("HelloWorld.png");  
  26.     pSprite->setPosition(VisibleRect::center());  
  27.     this->addChild(pSprite, 0);  
  28.    
  29.     CCSprite *pLogoSprite = CCSprite::create("icon.png");  
  30.     pLogoSprite->setAnchorPoint( ccp(0, 0.5) );  
  31.     pLogoSprite->setPosition(ccpAdd(VisibleRect::left(), ccp(50, 0)));  
  32.     this->addChild(pLogoSprite, 0);  
  33.    
  34.     return true;  
  35. }  

(5)创建窗口，main.cpp的主要内容：

[cpp] view plaincopy
  1. AppDelegate app;  
  2. CCEGLView* eglView = CCEGLView::sharedOpenGLView();  
  3.     //eglView->setFrameSize(2048, 1536);  
  4.     //eglView->setFrameSize(480, 320);  
  5.     //eglView->setFrameSize(800, 480);  
  6.     //eglView->setFrameSize(1024, 768);  
  7.     //eglView->setFrameSize(1280, 800);  
  8.     eglView->setFrameSize(1280, 768);  
  9.     //eglView->setFrameSize(960, 640);  
  10.     eglView->setFrameZoomFactor(0.5f);  
  11.    
  12. int ret = CCApplication::sharedApplication()->run();  
OK，到此为止，代码部分已经完成了，下面看看在各种分辨率和不同策略下的效果图：
1. kResolutionShowAll策略：
(1)2048×1536



(2)1024×768


(3)480×320


2. kResolutionExactFit策略
1280×768分辨率


3. kResolutionNoBorder策略
1280×768分辨率

demo源码：http://download.csdn.net/detail/zhoujianghai/4847206

本文链接：http://codingnow.cn/cocos2d-x/975.html

posted @ 2015-08-07 02:24  Anzhongliu  阅读(214)  评论(0)  编辑  收藏  举报