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

概述我使用的版本是cocos2d-2.0-x-2.0.4，cocos2dx-2.0版本对多分辨率适配提供了很好的支持，使用起来比1.0版本要简单些，1.0版本的适配可以参考这篇博文。 1. 做2.0版本的适配首先需要了解下面这些知识。 (1)适配策略 2.0版本提供了三种适配策略： kResolutionNoBorder：超出屏幕的部分会被裁剪，两侧没有黑边，铺满屏幕，按图片原始比例显示，图片不变形。

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

copy boolAppDelegate::applicationDIDFinishLaunching() { //initializedirector CCDirector*pDirector=CCDirector::sharedDirector(); CCEGLVIEw*pEGLVIEw=CCEGLVIEw::sharedOpenGLVIEw(); pDirector->setopenGLVIEw(pEGLVIEw); CCSizeframeSize=pEGLVIEw->getFrameSize(); floatratio=frameSize.wIDth/frameSize.height; floatratio1=largeDesignResolutionSize.wIDth/largeDesignResolutionSize.height; floatratio2=mediumDesignResolutionSize.wIDth/mediumDesignResolutionSize.height; floatratio3=smallDesignResolutionSize.wIDth/smallDesignResolutionSize.height; floatd1=abs(ratio-ratio1); floatd2=abs(ratio-ratio2); floatd3=abs(ratio-ratio3); std::map<float,CCSize>designSize; designSize[d1]=largeDesignResolutionSize; designSize[d2]=mediumDesignResolutionSize; designSize[d3]=smallDesignResolutionSize; //得到key最大的，因此我这里是横屏，所以以高度为基准，为了确保缩放后宽度能全屏，所以选取宽高比最大的为设计方案 CCSizedesignResolutionSize=iter->second; //pEGLVIEw->setDesignResolutionSize(designResolutionSize.wIDth,designResolutionSize.height,kResolutionNoborder); pEGLVIEw->setDesignResolutionSize(designResolutionSize.wIDth,kResolutionShowAll); if(frameSize.height>mediumResource.size.height) CCfileUtils::sharedfileUtils()->setResourceDirectory(largeResource.directory); pDirector->setContentScaleFactor(largeResource.size.height/designResolutionSize.height); } elseif(frameSize.height>smallResource.size.height) CCfileUtils::sharedfileUtils()->setResourceDirectory(mediumResource.directory); pDirector->setContentScaleFactor(mediumResource.size.height/designResolutionSize.height); } else CCfileUtils::sharedfileUtils()->setResourceDirectory(smallResource.directory); pDirector->setContentScaleFactor(smallResource.size.height/designResolutionSize.height); pDirector->setdisplayStats(true); pDirector->setAnimationInterval(1.0/60); CCScene*pScene=HelloWorld::scene(); pDirector->runWithScene(pScene); returntrue; }
(3)创建VisibleRect.h和VisibleRect.cpp文件，封装了获取那9个点坐标的函数，比较简单。代码如下：
VisibleRect.h copy #ifndef__VISIBLERECT_H__ #define__VISIBLERECT_H__ USING_NS_CC; classVisibleRect public: staticCCRectgetVisibleRect(); staticCCPointleft(); staticCCPointright(); staticCCPointtop(); staticCCPointbottom(); staticCCPointcenter(); staticCCPointlefttop(); staticCCPointrighttop(); staticCCPointleftBottom(); staticCCPointrightBottom(); private: staticvoIDlazyInit(); staticCCRects_visibleRect; }; #endif

VisibleRect.cpp

copy #include"VisibleRect.h" CCRectVisibleRect::s_visibleRect; voIDVisibleRect::lazyInit() if(s_visibleRect.size.wIDth==0.0f&&s_visibleRect.size.height==0.0f) s_visibleRect.origin=pEGLVIEw->getVisibleOrigin(); s_visibleRect.size=pEGLVIEw->getVisibleSize(); CCRectVisibleRect::getVisibleRect() lazyInit(); returnCCRectMake(s_visibleRect.origin.x,s_visibleRect.origin.y,s_visibleRect.size.wIDth,s_visibleRect.size.height); CCPointVisibleRect::left() returnccp(s_visibleRect.origin.x,s_visibleRect.origin.y+s_visibleRect.size.height/2); CCPointVisibleRect::right() 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() returnccp(s_visibleRect.origin.x+s_visibleRect.size.wIDth/2,s_visibleRect.origin.y+s_visibleRect.size.height); CCPointVisibleRect::bottom() CCPointVisibleRect::center() CCPointVisibleRect::lefttop() CCPointVisibleRect::righttop() CCPointVisibleRect::leftBottom() returns_visibleRect.origin; CCPointVisibleRect::rightBottom() } (4)修改HelloWorldScene.cpp的init函数，使用相对位置设置坐标。

copy boolHelloWorld::init() if(!cclayer::init()) false; CcmenuItemImage*pCloseItem=CcmenuItemImage::create( "Closenormal.png", "CloseSelected.png", 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)); pCloseItem->setposition(ccpAdd(VisibleRect::rightBottom(), ccp(-pCloseItem->getContentSize().wIDth/2,pCloseItem->getContentSize().height/2))); Ccmenu*pMenu=Ccmenu::create(pCloseItem,NulL); pMenu->setposition(CCPointZero); this->addChild(pMenu,1); cclabelTTF*pLabel=cclabelTTF::create("HelloWorld","Arial",SCALE_FACTOR*24); pLabel->setposition(ccpAdd(VisibleRect::top(),248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ccp(0,-pLabel->getContentSize().height))); this->addChild(pLabel,1); CCSprite*pSprite=CCSprite::create("HelloWorld.png"); pSprite->setposition(VisibleRect::center()); this->addChild(pSprite,0); CCSprite*plogoSprite=CCSprite::create("icon.png"); plogoSprite->setAnchorPoint(ccp(0,0.5)); plogoSprite->setposition(ccpAdd(VisibleRect::left(),ccp(50,0))); this->addChild(plogoSprite,0); (5)创建窗口，main.cpp的主要内容： copy AppDelegateapp; CCEGLVIEw*eglVIEw=CCEGLVIEw::sharedOpenGLVIEw(); //eglVIEw->setFrameSize(2048,1536); //eglVIEw->setFrameSize(480,320); //eglVIEw->setFrameSize(800,480); //eglVIEw->setFrameSize(1024,768); //eglVIEw->setFrameSize(1280,800); eglVIEw->setFrameSize(1280,768); //eglVIEw->setFrameSize(960,640); eglVIEw->setFrameZoomFactor(0.5f); intret=CCApplication::sharedApplication()->run(); OK，到此为止，代码部分已经完成了，下面看看在各种分辨率和不同策略下的效果图：
1. kResolutionShowAll策略：
(1) 2048×1536

(2)1024×768