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

Cocos2d-x 前端之家
前端之家收集整理的这篇文章主要介绍了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 plain copy
  1. #ifndef__APPMACROS_H__@H_502_61@
  2. #define__APPMACROS_H__@H_502_61@
  4. #include"cocos2d.h"@H_502_61@
  5. typedef@H_502_61@struct@H_502_61@tagResource
  6. {
  7. cocos2d::CCSizesize;
  8. char@H_502_61@directory[100];
  9. }Resource;
  10. //可用的资源尺寸@H_502_61@
  11. static@H_502_61@ResourcesmallResource={cocos2d::CCSizeMake(480,320),"iphone"@H_502_61@};
  12. static@H_502_61@ResourcemediumResource={cocos2d::CCSizeMake(1024,768),"ipad"@H_502_61@};
  13. static@H_502_61@ResourcelargeResource={cocos2d::CCSizeMake(2048,1536),"ipadhd"@H_502_61@};
  15. //设计方案@H_502_61@
  16. static@H_502_61@cocos2d::CCSizesmallDesignResolutionSize=cocos2d::CCSizeMake(480.0f,320.0f);
  17. static@H_502_61@cocos2d::CCSizemediumDesignResolutionSize=cocos2d::CCSizeMake(1024.0f,768.0f);
  18. static@H_502_61@cocos2d::CCSizelargeDesignResolutionSize=cocos2d::CCSizeMake(2048.0f,1536.0f);
  19. //缩放因子，主要给文字标签使用@H_502_61@
  20. #defineSCALE_FACTOR(cocos2d::CCEGLView::sharedOpenGLView()->getDesignResolutionSize().width/smallResource.size.width)@H_502_61@
  21. #endif@H_502_61@
(2)接下来修改AppDelegate.cpp文件的applicationDidFinishLaunching函数，添加以下代码：

copy

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

(3)创建VisibleRect.h和VisibleRect.cpp文件，封装了获取那9个点坐标的函数，比较简单。代码如下：
VisibleRect.h copy
    #ifndef__VISIBLERECT_H__@H_502_61@
  1. #define__VISIBLERECT_H__@H_502_61@
  2. USING_NS_CC;
  3. class@H_502_61@VisibleRect
  4. public@H_502_61@:
  5. static@H_502_61@CCRectgetVisibleRect();
  6. static@H_502_61@CCPointleft();
  7. static@H_502_61@CCPointright();
  8. static@H_502_61@CCPointtop();
  9. static@H_502_61@CCPointbottom();
  10. static@H_502_61@CCPointcenter();
  11. static@H_502_61@CCPointleftTop();
  12. static@H_502_61@CCPointrightTop();
  13. static@H_502_61@CCPointleftBottom();
  14. static@H_502_61@CCPointrightBottom();
  15. private@H_502_61@:
  16. static@H_502_61@void@H_502_61@lazyInit();
  17. static@H_502_61@CCRects_visibleRect;
  18. };
  19. #endif@H_502_61@

VisibleRect.cpp

copy
    #include"VisibleRect.h"@H_502_61@
  1. CCRectVisibleRect::s_visibleRect;
  2. void@H_502_61@VisibleRect::lazyInit()
  3. if@H_502_61@(s_visibleRect.size.width==0.0f&&s_visibleRect.size.height==0.0f)
  4. s_visibleRect.origin=pEGLView->getVisibleOrigin();
  5. s_visibleRect.size=pEGLView->getVisibleSize();
  6. CCRectVisibleRect::getVisibleRect()
  7. lazyInit();
  8. return@H_502_61@CCRectMake(s_visibleRect.origin.x,s_visibleRect.origin.y,s_visibleRect.size.width,s_visibleRect.size.height);
  9. CCPointVisibleRect::left()
  10. return@H_502_61@ccp(s_visibleRect.origin.x,s_visibleRect.origin.y+s_visibleRect.size.height/2);
  11. CCPointVisibleRect::right()
  12. return@H_502_61@ccp(s_visibleRect.origin.x+s_visibleRect.size.width,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> CCPointVisibleRect::top()
  13. return@H_502_61@ccp(s_visibleRect.origin.x+s_visibleRect.size.width/2,s_visibleRect.origin.y+s_visibleRect.size.height);
  14. CCPointVisibleRect::bottom()
  15. CCPointVisibleRect::center()
  16. CCPointVisibleRect::leftTop()
  17. CCPointVisibleRect::rightTop()
  18. CCPointVisibleRect::leftBottom()
  19. return@H_502_61@s_visibleRect.origin;
  20. CCPointVisibleRect::rightBottom()
  21. }
(4)修改HelloWorldScene.cpp的init函数，使用相对位置设置坐标。

copy

    bool@H_502_61@HelloWorld::init()
  1. if@H_502_61@(!CCLayer::init())
  2. false@H_502_61@;
  3. CCMenuItemImage*pCloseItem=CCMenuItemImage::create(
  4. "CloseNormal.png"@H_502_61@,
  5. "CloseSelected.png"@H_502_61@,
  6. this@H_502_61@,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> menu_selector(HelloWorld::menuCloseCallback));
  7. pCloseItem->setPosition(ccpAdd(VisibleRect::rightBottom(),
  8. ccp(-pCloseItem->getContentSize().width/2,pCloseItem->getContentSize().height/2)));
  9. CCMenu*pMenu=CCMenu::create(pCloseItem,NULL);
  10. pMenu->setPosition(CCPointZero);
  11. this@H_502_61@->addChild(pMenu,1);
  12. CCLabelTTF*pLabel=CCLabelTTF::create("HelloWorld"@H_502_61@,"Arial"@H_502_61@,SCALE_FACTOR*24);
  13. pLabel->setPosition(ccpAdd(VisibleRect::top(),248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ccp(0,-pLabel->getContentSize().height)));
  14. this@H_502_61@->addChild(pLabel,1);
  15. CCSprite*pSprite=CCSprite::create("HelloWorld.png"@H_502_61@);
  16. pSprite->setPosition(VisibleRect::center());
  17. this@H_502_61@->addChild(pSprite,0);
  18. CCSprite*plogoSprite=CCSprite::create("icon.png"@H_502_61@);
  19. plogoSprite->setAnchorPoint(ccp(0,0.5));
  20. plogoSprite->setPosition(ccpAdd(VisibleRect::left(),ccp(50,0)));
  21. this@H_502_61@->addChild(plogoSprite,0);
  22. (5)创建窗口，main.cpp的主要内容： copy
      @H_502_61@AppDelegateapp;
    1. CCEGLView*eglView=CCEGLView::sharedOpenGLView();
    2. //eglView->setFrameSize(2048,1536);@H_502_61@
    3. //eglView->setFrameSize(480,320);@H_502_61@
    4. //eglView->setFrameSize(800,480);@H_502_61@
    5. //eglView->setFrameSize(1024,768);@H_502_61@
    6. //eglView->setFrameSize(1280,800);@H_502_61@
    7. eglView->setFrameSize(1280,768);
    8. //eglView->setFrameSize(960,640);@H_502_61@
    9. eglView->setFrameZoomFactor(0.5f);
    10. int@H_502_61@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

    猜你在找的Cocos2d-x相关文章

    创建自定义的Cocos2d-x场景
    操作步骤 1、创建cocos2d-x工程 2、新建 Scene1.cpp Scene1.h Scene1.h代码 #ifndef __SCE...
    给vs2010安装上cocos2d-x的模版
    开发环境：OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1 vs2010 想给vs安装上cocos的模版，...
    Python创建Cocos2d-x 2.2方法
    把创建项目做成一个批处理，当创建项目时可以省时省力很多。 操作步骤 1、在 E:cocos2d-x-...
    cocos2dx 物理碰撞
    https://www.cnblogs.com/JiaoQing/p/3906780.html 四个响应函数 1 EventListenerPhysics...
    cocos2d-js 自定义事件监听派发
    转载于 http://www.cnblogs.com/kenkofox/p/3926797.html 熟悉js的dom事件或者flash事件的...
    cocos常用 实用 公共函数 lua代码
    公共资源加载，缓存retain；防止被自动销毁 2. 数字滚动递增；用于得奖后，总金币跳动增加...
    cocos creator box2d
    title Map 使用box2d var sfloors = this.tiledMap.getObjectGroup(‘Special_Floor‘).g...
    （转）让quick-cocos2d-x支持加密的plist文件
    前篇：quick-cocos2d-x图片资源加密 在前篇里面，我们实现了图片资源的加密，但还没有实现...
    （转）quick-cocos2d-x图片资源加密(续)
    摘要: 对在quick-cocos2d-x上实现的资源加密方法的补充 前篇： quick-cocos2d-x图片资源加...
    Cocos Creator 动态改变sprite图片
    首先将存放图片最外层文件夹命名为resources 　　 changeBj: function(){ 　　　　var url...
    iOSAndroidSwiftHybridCocos2d-xFlutterXcodeSilverlightcocoaCordova
    调试桥筛选栏假异步不会丢失AndPermissio权限申请抽屉式systemUI信号栏多行排列跨多行显示viewmode数据共享录制语音视频通话多行显示Studio3.5拉伸控件望远镜发动态走势图点赞控件显示牌冷启动v3签名v2签名v1签名本地html外接键盘流式标签