加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

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

发布时间：2020-12-14 16:22:52 所属栏目：百科 来源：网络整理
导读：我使用的版本是cocos2d-2.0-x-2.0.4，cocos2dx-2.0版本对多分辨率适配提供了很好的支持，使用起来比1.0版本要简单些，1.0版本的适配可以参考这篇博文。 1. 做2.0版本的适配首先需要了解下面这些知识。 (1)适配策略 2.0版本提供了三种适配策略： kResolutionN

我使用的版本是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__
  2. #define__APPMACROS_H__
  4. #include"cocos2d.h"
  5. typedefstructtagResource
  6. {
  7. cocos2d::CCSizesize;
  8. chardirectory[100];
  9. }Resource;
  10. //可用的资源尺寸
  11. staticResourcesmallResource={cocos2d::CCSizeMake(480,320),"iphone"};
  12. staticResourcemediumResource={cocos2d::CCSizeMake(1024,768),"ipad"};
  13. staticResourcelargeResource={cocos2d::CCSizeMake(2048,1536),"ipadhd"};
  15. //设计方案
  16. staticcocos2d::CCSizesmallDesignResolutionSize=cocos2d::CCSizeMake(480.0f,320.0f);
  17. staticcocos2d::CCSizemediumDesignResolutionSize=cocos2d::CCSizeMake(1024.0f,768.0f);
  18. staticcocos2d::CCSizelargeDesignResolutionSize=cocos2d::CCSizeMake(2048.0f,1536.0f);
  19. //缩放因子，主要给文字标签使用
  20. #defineSCALE_FACTOR(cocos2d::CCEGLView::sharedOpenGLView()->getDesignResolutionSize().width/smallResource.size.width)
  21. #endif
(2)接下来修改AppDelegate.cpp文件的applicationDidFinishLaunching函数，添加以下代码：

copy

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

(3)创建VisibleRect.h和VisibleRect.cpp文件，封装了获取那9个点坐标的函数，比较简单。代码如下：
VisibleRect.h copy
    #ifndef__VISIBLERECT_H__
  1. #define__VISIBLERECT_H__
  2. USING_NS_CC;
  3. classVisibleRect
  4. public:
  5. staticCCRectgetVisibleRect();
  6. staticCCPointleft();
  7. staticCCPointright();
  8. staticCCPointtop();
  9. staticCCPointbottom();
  10. staticCCPointcenter();
  11. staticCCPointleftTop();
  12. staticCCPointrightTop();
  13. staticCCPointleftBottom();
  14. staticCCPointrightBottom();
  15. private:
  16. staticvoidlazyInit();
  17. staticCCRects_visibleRect;
  18. };
  19. #endif

VisibleRect.cpp

copy
    #include"VisibleRect.h"
  1. CCRectVisibleRect::s_visibleRect;
  2. voidVisibleRect::lazyInit()
  3. if(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. returnCCRectMake(s_visibleRect.origin.x,s_visibleRect.origin.y,s_visibleRect.size.width,s_visibleRect.size.height);
  9. CCPointVisibleRect::left()
  10. returnccp(s_visibleRect.origin.x,s_visibleRect.origin.y+s_visibleRect.size.height/2);
  11. CCPointVisibleRect::right()
  12. returnccp(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. returnccp(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. returns_visibleRect.origin;
  20. CCPointVisibleRect::rightBottom()
  21. }
(4)修改HelloWorldScene.cpp的init函数，使用相对位置设置坐标。 copy
    boolHelloWorld::init()
  1. if(!CCLayer::init())
  2. false;
  3. CCMenuItemImage*pCloseItem=CCMenuItemImage::create(
  4. "CloseNormal.png",
  5. "CloseSelected.png",
  6. this,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->addChild(pMenu,1);
  12. CCLabelTTF*pLabel=CCLabelTTF::create("HelloWorld","Arial",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->addChild(pLabel,1);
  15. CCSprite*pSprite=CCSprite::create("HelloWorld.png");
  16. pSprite->setPosition(VisibleRect::center());
  17. this->addChild(pSprite,0);
  18. CCSprite*pLogoSprite=CCSprite::create("icon.png");
  19. pLogoSprite->setAnchorPoint(ccp(0,0.5));
  20. pLogoSprite->setPosition(ccpAdd(VisibleRect::left(),ccp(50,0)));
  21. this->addChild(pLogoSprite,0);
  22. (5)创建窗口，main.cpp的主要内容： copy
      AppDelegateapp;
    1. CCEGLView*eglView=CCEGLView::sharedOpenGLView();
    2. //eglView->setFrameSize(2048,1536);
    3. //eglView->setFrameSize(480,320);
    4. //eglView->setFrameSize(800,480);
    5. //eglView->setFrameSize(1024,768);
    6. //eglView->setFrameSize(1280,800);
    7. eglView->setFrameSize(1280,768);
    8. //eglView->setFrameSize(960,640);
    9. eglView->setFrameZoomFactor(0.5f);
    10. intret=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

    （编辑：李大同）

    【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同