Cocos2D-X屏幕适配新解

发表于2017-09-01
评论0 1.1k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏程序行业精英群

711501594

为了适应移动终端的各种分辨率大小,各种屏幕宽高比,在 Cocos2D-X(当前稳定版:2.0.4) 中,提供了相应的解决方案,以方便我们在设计游戏时,能够更好的适应不同的环境。

 
而在设计游戏之初,决定着我们屏幕适配的因素有哪些,简而言之只有两点:屏幕大小 和 宽高比。这两个因素是如何影响游戏的:
 
    •屏幕大小: 从小分辨率 480×320 到 1280×800 分辨率,再到全高清 1080p,从手机到平板,还有苹果设备的 Retina屏,这么多不同的分辨率,而且大小差距甚大,不可能做到一套资源走天下,资源往小了设计,在大屏幕会显示模糊,图片往大了设计,在小屏幕设备又太浪费,而且小屏幕的手机硬件资源也会相对的紧缺,所以 根据屏幕大小使用不同的资源 是有必要的,而 Cocos2D-X 也帮我们解决了这一点。
 
    •宽高比: 什么是宽高比,就是你的屏幕是方的还是长的,靠近方形的分辨率如 480×320,比例为 3:2,还有 960×540 的16:9 标准宽屏,这也算是两种总极端情况了,如果能在这两种比例情况做好适配基本就可以了,如果比 3:2 “更方”如 4:3,比 16:9 “更长”,那么不论如何布局,显示效果差距甚大,最好对固定比例优化吧。当在宽高比在一定范围内,可以通过灵活编写程序去适应,而在显示效果上,Cocos2D-X为我们提供了三种模式,这些 模式更多的是帮我们解决比例不一的情况而存在 的,如果只是屏幕大小(比例一样),那通过简单的放大缩小即可完成。
 
三种模式
 
说是三种模式,其实还有一种 无模式,也就是 Cocos2D-X默认的适配方案,现在我们就来认识一下这些模式,并且通过这些模式去认识其中一些概念 FrameSize、WinSize、VisibleSize、VisibleOrigin,以及它们存在的意义,并且最后灵活运行这些概念 创建出一个不属于这些模式而超越这些模式的新适配解决方案,这是最终目的。
 
kResolutionUnKnown 认识 FrameSize
 
这是 cocos2d-x 编写的默认模式,没有做任何处理,在这种情况下,游戏画面的大小与比例都是不可控的,在程序运行之初,由各个平台入口函数定义画面大小:
1.// proj.linux/main.cpp  linux 平台手动指定画面大小
2.CCEGLView* eglView = CCEGLView::sharedOpenGLView();
3.eglView->setFrameSize(720, 480);
4. 
5.// proj.android/jni/hellocpp/main.cpp android 平台由 jni 调用传入设备分辨率参数
6.void Java_org_cocos2dx_lib_Cocos2dxRenderer_nativeInit(JNIEnv*  env, jobject thiz, jint w, jint h)
7.{
8.    if (!CCDirector::sharedDirector()->getOpenGLView())
9.    {
10.        CCEGLView *view = CCEGLView::sharedOpenGLView();
11.        view->setFrameSize(w, h);
12. 
13.        AppDelegate *pAppDelegate = new AppDelegate();
14.        CCApplication::sharedApplication()->run();
15.    }
16.    else
17.    {
18.        // other
19.        ...
20.    }
21.}
 
1.
 
 
在此我们首先认识了 FrameSize 参数,在游戏运行时,我们可以通过 CCEGLView::sharedOpenGLView()->getFrameSize();获得此值。如果在手机上运行,那么不同分辨率将会得到不同的值,既然这个值不可控,那么在写游戏中也就没有参考价值了,比如我们写一个精灵的位置距离底部 320 高度,在 480×320 分辨率,能看到其在屏幕上方,如果换一台手机分辨率 960×540 那么只能显示在中间靠上的位置,如果设置精灵位置为距离屏幕上方(高度)320,反之依然,显示效果不一。
 
此时可行的方案是使用百分比,如精灵位置在屏幕横向距离左边 1/3 宽度,在 1/2 正中间处,而类似这样的设置也不用依赖 FrameSize 的具体数值。而这样的做法,使得内部元素像弹簧一样,随着 FrameSize 的大小改变而改变,伸缩或者挤压,对于图片资源大小也是完全不可控,如果根据屏幕大小放大缩小,那我们可以考虑用下面要说的模式,在此不推荐使用 cocos2d-x 的无模式方案。
 
kResolutionExactFit and kResolutionShowAll 认识 WinSize
 
在 AppDelegate.cpp 处可以通过设置:
1.CCEGLView::sharedOpenGLView()->setDesignResolutionSize(720, 480, kResolutionShowAll);
2.// 或者
3.CCEGLView::sharedOpenGLView()->setDesignResolutionSize(720, 480, kResolutionExactFit);
 
1. 
 
DesignResolutionSize!顾名思义,也就是逻辑上的游戏屏幕大小,在这里我们设置了其分辨率为 720×480 为例,那么在游戏中,我么设置精灵的位置便可以参照此值,如 左下角 ccp(0,0),右上角 ccp(720, 480),而不论 FrameSize 的大小为多少,是 720×480 也是,是 480×320 也罢,总能正确显示其位置,左下角和右上角。能够实现这一点的原因是,固定了设计分辨率大小,从而确定了其固定的宽高比,它的 优势 是可以使用具体的数值摆放精灵位置,不会因为实际屏幕大小宽高比而是内部元素相对位置关系出现混乱。
 
而为了保持画面的宽高比,cocos2d-x 做了些牺牲,牺牲了什么呢?kResolutionExactFit 牺牲了画质而保持了全屏显示,对画面进行了拉伸,这意味着什么?意味着相对极端情况下,本来精灵是方形的,显示出来变成长方形,本来圆形的变成了椭圆,固此模式不推荐使用。kResolutionShowAll 为了保持设计画面比例对四周进行留黑边处理,使得不同比例下画面不能全屏。鱼和熊掌不能兼得也。
 
我们可以通过如下方法获取到 setDesignResolutionSize 所设置的值:
 
1.CCSize winSize = CCDirector::sharedDirector()->getWinSize();
 
 
我们可以用 Cocos2d-x 程序是如何开始运行与结束的 一文的方法,跟踪 WinSize 的初始化,获取过程,在这里简单提一下,如下步骤:
1.// 获得 winSize
2.CCSize winSize = CCDirector::sharedDirector()->getWinSize();
3. 
4.// 查看其 getWinSize(); 方法实现
5.[cocos2dx-path]/cocos2dx/CCDirector.cpp
6. 
7.CCSize CCDirector::getWinSize(void)
8.{
9.    return m_obWinSizeInPoints;
10.}
11. 
12.// 而 m_obWinSizeInPoints 是何时被赋值的
13.[cocos2dx-path]/cocos2dx/platform/CCEGLViewProtocol.cpp
14. 
15.void CCEGLViewProtocol::setDesignResolutionSize(float width, float height, ResolutionPolicy resolutionPolicy)
16.{
17.    ...
18.    ...
19.    m_obDesignResolutionSize.setSize(width, height);
20. 
21.    ...
22.    ...
23.    CCDirector::sharedDirector()->m_obWinSizeInPoints = getDesignResolutionSize();
24.}
25. 
26.const CCSize& CCEGLViewProtocol::getDesignResolutionSize() const
27.{
28.    return m_obDesignResolutionSize;
29.}
 
1. 
 
 
具体的优势:通过设置逻辑分辨率大小,相比无模式,可以帮我们解决了屏幕自动放大缩小问题,并且保持屏幕宽高比,使得游戏更好设计,可以将设计画面大小作为默认背景图片大小等,唯一点遗憾就是那点前面所提到的一点点牺牲。
 
kResolutionShowAll 方案可以作为我们的默认解决方案,使得游戏的设计更为简化,但为了补填拉伸或留黑边这点缺憾,进入下一个模式!
 
kResolutionNoBorder了解 VisibleSize 与 VisibleOrigin
 
此模式可以解决两个问题,其一:游戏画面全屏;其二:保持设置游戏时的宽高比例,相比 kResolutionShowAll 有所区别的是,为了填补留下的黑边,将画面稍微放大,以至于能够正好补齐黑边,而这样做的后果可想而知,补齐黑边的同时,另一个方向上将会有一部分画面露出屏幕之外,如下示意图:
 
图片
 
黑色边框标示实际的屏幕分辨率,紫色区域标示游戏设计大小,而通过放大缩小,保持宽高比固定, 可以看到 Show All 之中的黑色阴影部分为留边,而 No Border 的紫色阴影部分则不能显示,而这紫色区域的大小是游戏设计之时是不可控的。那么原设计的画面大小就失去了 一定的 参考价值了,因为这可能让你的画面显示残缺。这时仅仅通过 WinSize 满足不了我们的设计需求,所以引入了 VisibleSize 与 VisibleOrigin 概念。
 
图片
 
如上所示,紫色区域是被屏幕截去的部分,不可显示的,根据实际情况,可能出现横向截取和竖向截取,这取决于实际分辨率的宽高比。而 A、B、C、D所标示的是设计分辨率,固定大小。如果我们想让一个精灵元素显示在屏幕上方靠边,那么如果使用 WinSize 的高度设置其位置,可能出现的情况就是显示到屏幕之外了。FrameSize 和 WinSize 我们已经知道其概念,而 VisibleSize 和 VisibleOrigin 所代表的是什么呢,又时如何为我们解决靠边的问题!注意上图下方的定义, VisibleSize = H I J K 是用紫色标注的。 而在上图是 黑色 标注,标示屏幕实际分辨率,虽然 FrameSize 和 VisibleSize 都是 H I J K,但其意义不同,紫色表明它是与设计分辨率相关的。
 
FrameSize 是实际的屏幕分辨率,而 VisibleSize 是在 WinSize 之内,保持 FrameSize 的宽高比所能占用的最大区域,实际屏幕分辨率 H I J K (黑色) 可以大于 WinSize ,但VisibleSize 一定会小于或者等于 WinSize,这两者相同的是宽高比。
 
VisibleSize 有着 WinSize 大小(随WinSize 的大小改变而改变),还有着 FrameSize 的宽高比,它标示 在设计分辨率(WinSize)下,在屏幕中的可见区域大小。 而 VisibleOrigin 则标示在设计分辨率下被截取的区域大小,用点 K 标示,有了这些数据,我们想让游戏元素始终在屏幕显示的区域之内不成难事。下面通过几个数值带入,加深这些概念的印象。
 
 
1.// 组[1] :
2.FrameSize:          width = 720, height = 420
3.WinSize:            width = 720, height = 480
4.VisibleSize:        width = 720, height = 420
5.VisibleOrigin:      x = 0, y = 30
6. 
7.// 组[2] :相比 组 [1] FrameSize 不变 VisibleSize 和 VisibleOrigin 随着 WinSize 的变小而变小
8.FrameSize:          width = 720, height = 420
9.WinSize:            width = 480, height = 320
10.VisibleSize:        width = 480, height = 280
11.VisibleOrigin:      x = 0, y = 20
12. 
13.// 组[3] : 相比组 [1] WinSize 不变,VisibleSize 随着 FrameSize 的比例改变而改变
14.FrameSize:          width = 720, height = 540
15.WinSize:            width = 720, height = 480
16.VisibleSize:        width = 640, height = 480
17.VisibleOrigin:      x = 40, y = 0
18. 
19.// WinSize VisibleSize VisibleOrigin 与都设计的分辨率相关,满足如下关系
20.WinSize.width = (VisibleOrigin.x * 2) VisibleSize.width
21.WinSize.height = (VisibleOrigin.y * 2) VisibleSize.height
 
1. 
 
NoBorder 具体的使用方法可以参考 cocos2d-x 自带例程 TestCpp ,有详细的使用方法,并且封装了 VisibleRect 类,可以获取设计分辨率,不同比例屏幕之时的主要参考点,屏幕四个拐角,和边的中点等,让我们设置元素位置时,使其总能显示在屏幕之内,这里就不详细介绍了。
 
基于这几种模式的程序使用方法,cocos2d-x 自带例程或者网上有很多教程,这里只详细解释了其中各种概念,而知道了这些概念,当然用起来就没有多大问题了。
 
kResolutionLeafsoar
 
!!!这是什么模式!好吧,Leafsoar 是 一叶 的 ID ,或者是本博客的一级域名而已 :P 在 cocos2d-x 中并没有这种模式。除却 UnKnown 与 ExactFit 不说,ShowAll 的优势是,只需要一个设计分辨率,然后通过 WinSize 设置相对对位即可,而且位置的最大长宽都是确定,方便了开发,但屏幕不能填满, NoBorder 模式的优势是在画面不变形的情况下,实现全屏,显示效果更好,但 WinSize 一定程度失效,需要通过运行时计算 VisibleSize 和 VisibleOrigin 来设置位置,由于是运行时计算,所以也就会出现,各种屏幕显示效果不一样的情况。
 
ShowAll 和 NoBorder 各有所长,各有所短,而这里提出的新适配解决方案正是取两者之长,舍两者之短的 组合模式。简单说来就是用 NoBorder 去实现 ShowAll 的思想。NoBorder 可以保证全屏利用,ShowAll 可以更好的使用实际设计坐标固定位置,而且相对位置不会随宽高比的改变而改变,这在编写游戏的时候能方便不少。先上一个示意图,一目了然 (两个图,两个方向):
 
图片
 
在原来 NoBorder 模式示意图上添加了新的概念,LsSize = X Y M N (leafsoar 简写了,为了不跟 cocos2d-x 的一些概念混淆,什么名字不重要,只要了解其含义即可),在 NoBorder 模式下的 LsSize 相对于 FrameSize 而言,正如 在 ShowAll 模式下的 WinSize 相对于 FrameSize,所以说这是 ShowAll NoBorder 的组合概念,而这里的 LsSize 与 WinSize 的宽高比是一致的。
 
猛地一看,似乎把问题复杂化了,仔细一看,还不如猛地一看 ~~
 
在 ShowAll 中,WinSize 作为最高的宽高,以此参照设置位置,因为在此范围内都能在屏幕上显示,用了 NoBorder 使得四周可能被截去一块区域,而这个区域大小不可控制,所以不能再使用 WinSize 作为参考点来设置位置,而这里的 LsSize 同样,因为 LsSzie 不论在什么情况下,总能显示在屏幕之内,我们可以方便的使用 LsSize 作为坐标系参考,并且可以全屏显示,在配合 VisibleSize ,相比纯的 NoBorder 加强了不少。它可以怎么用?
 
可以把 LsSize 当作 ShowAll 中的 WinSize 来用,而黑边可以使用稍大的图片填充,或者使用其它图片修饰边框,修饰的边框图案可大可小,可长可短,填充屏幕,保持全屏。
 
开始基于 LsSize 的游戏设计实现
 
为了能够准确实现基于 LsSize 的设计,初步计划将 LsSize 设定在 480×320 的分辨率方案,为此做了些准备,首先不使用任何模式情况下,在场景内调用如下:
 
 
1.CCSize size = CCDirector::sharedDirector()->getWinSize();
2. 
3.CCPoint center = ccp(size.width/2, size.height/2);
4. 
5.// 大小 600x500 为了 NoBorder 看到效果,使用稍大的背景图
6.CCSprite* pb = CCSprite::create("Back.jpg");
7.pb->setPosition(center);
8.this->addChild(pb, 0);
9. 
10.// 480x320 此图为使用于设计分辨率 LsSize 的图片
11.CCSprite* pSprite = CCSprite::create("HelloWorld.png");
12.pSprite->setPosition(center);
13.this->addChild(pSprite, 0);
14. 
15.// 37x37 在 480x320 画面的四个拐角处,添加参照
16.CCSprite* p1 = CCSprite::create("Peas.png");
17.p1->setPosition(ccpAdd(center, ccp(-240, -160)));
18.this->addChild(p1);
19. 
20.CCSprite* p2 = CCSprite::create("Peas.png");
21.p2->setPosition(ccpAdd(center, ccp(240, 160)));
22.this->addChild(p2);
23. 
24.CCSprite* p3 = CCSprite::create("Peas.png");
25.p3->setPosition(ccpAdd(center, ccp(-240, 160)));
26.this->addChild(p3);
27. 
28.CCSprite* p4 = CCSprite::create("Peas.png");
29.p4->setPosition(ccpAdd(center, ccp(240, -160)));
30.this->addChild(p4);
 
1. 
 
 
显示效果:(FrameSize = 640×540) 图片
 
显示效果:(ShowAll; FrameSize = 520×320; WinSize = 480×320) 图片
 
显示效果:(NoBorder; FrameSize = 520×320; WinSize = 480×320) 图片
 
通过效果我们可以看到,在相同 FrameSize 下 NoBorder 时,画面由于填充了黑边,将画面放大,以至于上下有部分显示不全,通过拐角四个精灵可以看出。
 
好!既然我们知道是由于放大所致,那么我们将画面缩小呢?cocos2d-x 提供了一个方法,我们调用如下代码:
 
1.CCDirector *pDirector = CCDirector::sharedDirector();
2.pDirector->setContentScaleFactor(
3.                CCEGLView::sharedOpenGLView()->getScaleY() );
 
 
为了弥补画面因需要不填空白出现的方法,我们将画面缩小,放大系数可以通过 CCEGLView::sharedOpenGLView()->getScaleY() 取得。其实 setContentScaleFactor 方法是为了适配不同资源而设计的,可以用此方法对不同资源适配,缩放等。效果如下:
 
图片
 
我们看到 480×320 的图片显示完全正确了,也正是我们想要的效果,但唯一的缺点是 ~~ 拐角处四个精灵的位置依然不是我们想要的,我们设计的位置是以 480×320 设置位置的,而 WinSize 也是 480×320 ,而此时基于 480×320 的设计必然会显示到屏幕之外,而要想不修改精灵位置,而让其显示正确的位置,那么为了保证 LsSize 的固定,我们需要一个方法,那就是动态设置 WinSize。
 
什么意思?我们知道一般这些模式设计游戏时,是通过 setDesignResolutionSize 设置 WinSize 的,这个值在游戏运行其间是定植,动态改变的是 VisibleSize 等,而这里提出了 LsSize 的概念,可想而知,如果 WinSize 固定,那么 LsSize 会随着屏幕宽高比的改变而改变,那么我们反其道而行,固定 LsSize 值,那么在运行时可以通过实际的宽高比来算得 WinSize 的值,这样动态算得的 WinSize 值就能够保证我们的 LsSize 是一个定值了。
 
相对论,WinSize 与 LsSize 的值是相对的,与其通过固定 WinSize 在运行时动态获得 LsSize (这也是 NoBorder 的默认方式,而导致的结果是 WinSize 没有参考价值),不如我们固定 LsSize 而在运行时算得 WinSize 设置来的要更妙一些。
 
现在不使用 setContentScaleFactor 方法,而修改 setDesignResolutionSize 这里的值,我们知道 WinSize 是 480×320 时,LsSize 必然会小于此值,而 NoBorder 的放大系数我们可以通过如下方式算得(可以参考setDesignResolutionSize方法内部实现),并在 AppDelegate 里执行:
 
 
1.CCSize frameSize = CCEGLView::sharedOpenGLView()->getFrameSize();
2.// 设置 LsSize 固定值
3.CCSize lsSize = CCSizeMake(480, 320);
4. 
5.float scaleX = (float) frameSize.width / lsSize.width;
6.float scaleY = (float) frameSize.height / lsSize.height;
7. 
8.// 定义 scale 变量
9.float scale = 0.0f; // MAX(scaleX, scaleY);
10.if (scaleX > scaleY) {
11.    // 如果是 X 方向偏大,那么 scaleX 需要除以一个放大系数,放大系数可以由枞方向获取,
12.    // 因为此时 FrameSize 和 LsSize 的上下边是重叠的
13.    scale = scaleX / (frameSize.height / (float) lsSize.height);
14.} else {
15.    scale = scaleY / (frameSize.width / (float) lsSize.width);
16.}
17. 
18.CCLog("x: %f; y: %f; scale: %f", scaleX, scaleY, scale);
19. 
20.// 根据 LsSize 和屏幕宽高比动态设定 WinSize
21.CCEGLView::sharedOpenGLView()->setDesignResolutionSize(lsSize.width * scale,
22.        lsSize.height * scale, kResolutionNoBorder);
 
1. 
 
 
显示效果:(NoBorder 模式 ;FrameSize = 520×320; LsSize = 480×320; WinSize = 动态获取) 图片
 
我们看到在没有修改源代码,并且在设计中使用 480×320 的参考系,也既是基于 LsSize 的设计显示效果如我们预期,那么我们换一个 FrameSize 来看看是否能够自动适应呢?如下:
 
显示效果:(NoBorder 模式 ;FrameSize = 600×480; LsSize = 480×320; WinSize = 动态获取) 图片
 
到此,基于 LsSize 参考系的游戏设计已经完成了,这样做的好处是很明显的,集 ShowAll 和 NoBorder 的优点于一处,这里的图片元素是为了好定位,实现的需要而写的,具体场景可以使用背景地图,或一张大的图片显示,而没有任何影响,也可以继续使用 VisibleSize 得到 LsSize 之外的部分区域大小,在 LsSize 之外可以使用背景图片作为装饰,即保证了游戏的全屏,又保证了游戏设计时的方便,如果使用完全基于 LsSize 的设计实现,除了显示背景装饰之外,我们不想让 LsSize 的内部元素显示到 LsSize 之外如何做呢?我们只需要设定 LsSize 层的的显示区域即可,我们可以修改场景的实现:
 
 
1.// 这里先简单实现思路
2. 
3.CCScene* HelloWorld::scene() {
4. 
5.    CCScene *scene = CCScene::create();
6.    // 创建背景层
7.    CCLayer* b = CCLayer::create();
8.    scene->addChild(b);
9. 
10.    // 添加背景图片和设置位置,可以使用其它装饰,或者小图片屏幕都行
11.    CCSize size = CCDirector::sharedDirector()->getWinSize();
12.    CCPoint center = ccp(size.width/2, size.height/2);
13.    CCSprite* pb = CCSprite::create("Back.jpg");
14.    pb->setPosition(center);
15.    b->addChild(pb, 0);
16. 
17.    // 创建 LsLayer 层
18.    HelloWorld *lsLayer = HelloWorld::create();
19.    scene->addChild(lsLayer);
20. 
21.    return scene;
22.}
23. 
24.// 在 HelloWorld 中重写 visit() 函数 设定显示区域
25.void HelloWorld::visit() {
26.    glEnable(GL_SCISSOR_TEST);              // 开启显示指定区域
27.    // 在这里只写上固定值,在特性环境下,以便快速看效果,实际的值,需要根据实际情况算得
28.    glScissor(20, 0, 480, 320);     // 只显示当前窗口的区域
29.    CCLayer::visit();                       // 调用下面的方法
30.    glDisable(GL_SCISSOR_TEST);             // 禁用
31.}
 
1. 
 
显示效果:(NoBorder 模式 ;FrameSize = 520×320; LsSize = 480×320; WinSize = 动态获取) 图片
 
屏幕适配新解

我使用的版本是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文件,定义了一些宏,源码如下:

  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函数,添加以下代码:

  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

  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

  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函数,使用相对位置设置坐标。

  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的主要内容:

  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


(2)1024×768


(3)480×320


(4)800×480


(5)1280×800


(6)960×640


2. kResolutionExactFit策略(拉伸)
1280×768分辨率


3. kResolutionNoBorder策略(填满界面,超出的切割掉)
1280×768分辨率

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台