多分辨率适配(下)

五.多分辨率自适应的实现

首先我们要设置我们的适配模式为kResolutionFixedHeight:

 

 

 

C++

 

1	pEGLView->setDesignResolutionSize(960,720,kResolutionFixedHeight);

假定我们的游戏为分辨率(960,720)的横版游戏,至于为什么是960×720,最后再告诉大家,这里且让小弟卖个关子!

1.背景层

对于背景层来说这个问题So Easy,我们只用准备一张比设计分辨率长很多(或高很多,取决于你游戏的方向,另一个方向的尺寸和设计尺寸相同!)的图片即可!

这里我们随便找张素材:

大家在hellocpp工程中的HelloWorld::init函数末尾加入如下代码:

 

 

 

C++

 

1 2 3

CCSprite*pSprite=CCSprite::create("background.jpg"); pSprite->setPosition(ccp(visibleSize.width/2+origin.x,visibleSize.height/2+origin.y)); this->addChild(pSprite,0);

下图是的main.cpp中设置的窗口大小为标准960×720和其他分辨率下的效果:

哈哈哈,看我们的设计区域是不是都被完整的显示出来了呢?大家可以用(上)文章中提到的分辨率挨个试一遍,都是没有问题的!(Yes,妈妈再也不用担心我的多分辨率适配了!)

2.游戏内容

关于这部分的内容,太多太复杂,真的不好讲啊!我简单讲来一下,要有什么不懂得,请在评论中说明或者@justbilt私信给我,我会在第一时间回复的!我们需要一个节点(CCNode),用来将游戏的所有内容都添加到上面,再将这个节点添加到屏幕的中心! 这个节点可以是CCLayer,CCNode,或者CCTMXTiledMap都行!这里要注意以下几点:

1).选择根节点

如果根节点选择的是CCLayer,CCNode之类的,要去设置它们的setContentSize(designResolutionSize);

 

 

 

C++

 

1 2 3 4 5

CCNode*pGameRoot=CCNode::create(); pGameRoot->setAnchorPoint(ccp(0.5f,0.5f)); pGameRoot->setPosition(ccp(visibleSize.width/2+origin.x,visibleSize.height/2+origin.y)); pGameRoot->setContentSize(designResolutionSize); addChild(pGameRoot);

如果根节点是自身CCTMXTiledMap(注:这里我们地图的内容不要超过设计尺寸),就不用进行上边的操作了!

2).坐标设置

游戏中尽量不要用绝对坐标(其实绝对坐标木任何问题),让我们加入几个精灵试试:

 

 

 

C++

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

//右上角 CCSprite*pHero=CCSprite::create("hero.png"); pHero->setPosition(ccp(pGameRoot->getContentSize().width,pGameRoot->getContentSize().height)); pGameRoot->addChild(pHero); //左下角 pHero=CCSprite::create("hero.png"); pHero->setPosition(ccp(0,0)); pGameRoot->addChild(pHero); //右下 pHero=CCSprite::create("hero.png"); pHero->setPosition(ccp(pGameRoot->getContentSize().width,0)); pGameRoot->addChild(pHero); //左上 pHero=CCSprite::create("hero.png"); pHero->setPosition(ccp(0,pGameRoot->getContentSize().height)); pGameRoot->addChild(pHero); //中心 pHero=CCSprite::create("hero.png"); pHero->setPosition(ccp(pGameRoot->getContentSize().width/2,pGameRoot->getContentSize().height/2)); pGameRoot->addChild(pHero);

让我们看下效果:

游戏中的我们尽量使用相对坐标,可以通过以下几种方式求得：

①.相对于父亲的尺寸比例
②.相对于另一个精灵的坐标的偏移
③.相对于屏幕的尺寸的比例

这样日后修改起来了会很方便!

哈哈哈,大家可以把上段代码中的pGameRoot->getContentSize().width,pGameRoot->getContentSize().height换成960×720的绝对坐标试下,结果是没有任何问题的!

3).介绍几个坐标转换的函数

 

 

 

C++

 

1	CCPoint CCDirector::convertToGL(constCCPoint&obPoint);

将UI坐标(左上角为原点)转化为OpenGL(左下角为原点)坐标,CCTouch中的坐标为UI坐标,我们使用时要转换为OpenGL坐标

 

 

 

C++

 

1	CCPoint CCDirector::convertToUI(constCCPoint&obPoint);

将OpenGL坐标转化为UI坐标,主要用在设置CCTouch的触点(讲触摸的那篇文章有提到)!

 

 

 

C++

 

1 2 3

CCPoint CCNode::convertToNodeSpace(constCCPoint&worldPoint);   CCPoint CCNode::convertToWorldSpace(constCCPoint&nodePoint);

世界坐标空间和Node空间的转化,请看下图:

如图,我们用中间的小人getPosition()得到的是相对与父亲的坐标(即红框),如果我们想得到它相对于原点的坐标,就可以这样:

 

 

 

C++

 

1	CCPoint worldpos=pHero->convertToWorldSpace(pHero->getPosition());

如下图:

假如我们在红色圆圈位置点击,想判断落点在哪一格,但是我们从pTouch->getLocation();得到的坐标是相对于原点的,这样我们要减去红框(pGameRoot)的左下角坐标才行,很麻烦的,我们可以这个样子做:

 

 

 

C++

 

1 2	CCPoint touchPoint=pTouch->getLocation(); CCPoint touchInGameRoot=pGameRoot->convertToNodeSpace(touchPoint);

哈哈哈,这样子是不是很简单?这样子touchInGameRoot就是以pGameRoot左下角的偏移量了!

游戏内容部分就讲到这里!

3.UI层

UI层的实现相对来说比较简单,目前来说大概有两种实现方式:

①.根据”米”来设设置UI控件的位置.
②.根据屏幕的%来这设置UI控件的位置.

1).让我们直接上代码吧:

 

 

 

C++

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

CCMenuItemImage*pItem=CCMenuItemImage::create("red.png","blue.png"); pItem->setPosition(ccp(visibleSize.width*0.0f,visibleSize.height*0.0f));   CCMenuItemImage*pItem1=CCMenuItemImage::create("red.png","blue.png"); pItem1->setPosition(ccp(visibleSize.width*1.0f,visibleSize.height*0.0f));   CCMenuItemImage*pItem2=CCMenuItemImage::create("red.png","blue.png"); pItem2->setPosition(ccp(visibleSize.width*0.0f,visibleSize.height*1.0f));   CCMenuItemImage*pItem3=CCMenuItemImage::create("red.png","blue.png"); pItem3->setPosition(ccp(visibleSize.width*1.0f,visibleSize.height*1.0f));   CCMenuItemImage*pItem4=CCMenuItemImage::create("red.png","blue.png"); pItem4->setPosition(ccp(visibleSize.width*0.5f,visibleSize.height*0.5f));   CCMenu*pMenu=CCMenu::create(pItem,pItem1,pItem2,pItem3,pItem4,NULL); pMenu->setPosition(CCPointZero); this->addChild(pMenu,1);

这个是按照比例去设置UI位置的,下面是效果图,大家注意不同分辨率下红色圆饼的位置:

关于如何用”米”子来布局的实现,大家去这里看http://dualface.github.io/blog/2012/08/17/cocos2d-x-2-dot-0-multi-resolution/,这个不是我要讲的重点,毕竟手写坐标的人不会很多,我们主要讲如何在编辑器中实现UI布局的自适应!

2).在cocosbuilder中如何实现自适应

如果你用过cocosbuilder的话,你一定对下图不陌生:

这个是我们设置物体坐标的一个界面,功能介绍我引用K.C的文章中的一段话:

他讲的非常好,我就不赘述了,我们一般情况下只会使用第一个,当时为了适配多分辨率,我们不能这么做了!在这里我们还是有两种做法来实现,一个是相对布局,一个是%比,但是我推荐将两种方案结合起来.

①.相对位置负责四个角落的位置,即:左下,左上,右下.右上!
②.而中间的几个位置就只能交给%,即:上,下,左,右,中!

这里我们要注意几点(都是血淋淋的坑啊):

①.对于CCMenu,CCNode,CCSprite都能够实用上边的两个方法来设置坐标,唯独CCMenuItem不行,只能使用绝对坐标,这点大家一定要注意.那么对于下面的情况该怎么办呢:

我的解决方案是给”每一堆”按钮都添加一个CCMenu,然后CCMenuItem按照相对位置来,上图中我就使用了3个CCMenu!

②.对于要”扎堆”的控件(即控件间的相对位置保持不变),一定要加入到一个公共的父亲上!

③.灵活使用AnchorPoint属性!

六.设计尺寸的设定

之前文章中有提到设置游戏的分辨率为(960,720),那么为什么呢?

首先我们来考虑选择什么样的宽高比,宽高比越小,画面就越方,比如ipad(4:3=1.33)的宽高比就比iphone(3:2=1.5)的小,所以ipad的屏幕更方一些!因此我们设计游戏是应该按照最小的宽高比去设计,这样在大的宽高比的机型上都能够看到完整的画面,从表1中可知宽高比最小的是4:3!

下面我们来考虑分辨率,分辨率要符合大多数设备的要求,经过分析960的宽是最符合要求的,转为4:3就是960×720!.

(全文完)