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

比眉伴天荒 2022-08-03 12:50 118阅读 0赞

我使用的版本是cocos2d-2.0-x-2.0.4，cocos2dx-2.0版本对多分辨率适配提供了很好的支持，使用起来比1.0版本要简单些，1.0版本的适配可以参考[这篇博文][Link 1]。  
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 plain][] [copy][view plain]

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 plain][] [copy][view plain]

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 plain][] [copy][view plain]

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 plain][] [copy][view plain]

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 plain][] [copy][view plain]

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 plain][] [copy][view plain]

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

![20121204221330.png][]  
  
(2)1024×768

![20121204221415.png][]

(3)480×320

![20121204221454.png][]

2. kResolutionExactFit策略  
1280×768分辨率

![20121204224333.png][]

3. kResolutionNoBorder策略  
1280×768分辨率

![20121204224410.png][]

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

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

[Link 1]: http://codingnow.cn/android/954.html
[view plain]: http://blog.csdn.net/gg137608987/article/details/8302699#
[20121204221330.png]: http://codingnow.cn/wp-content/uploads/2012/12/20121204221330.png
[20121204221415.png]: http://codingnow.cn/wp-content/uploads/2012/12/20121204221415.png
[20121204221454.png]: http://codingnow.cn/wp-content/uploads/2012/12/20121204221454.png
[20121204224333.png]: http://codingnow.cn/wp-content/uploads/2012/12/20121204224333.png
[20121204224410.png]: http://codingnow.cn/wp-content/uploads/2012/12/20121204224410.png