Cocos2d-x 屏幕适配解决方案

1. setDesignResolutionSize使用方法及主要的三种适配模式

在cocos2d-x 2.0里,提供了一个叫做setDesignResolutionSize的方法,直接一次设置就可以自动适配各种分辨率。这个方法的注释如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

enum

ResolutionPolicy

{

kResolutionExactFit
,

kResolutionNoBorder
,

kResolutionShowAll
,

kResolutionFixedHeight
,

kResolutionFixedWidth
,

kResolutionUnKnown
,

}
;

/**

* Set the design resolution size.

* @param width Design resolution width.

* @param height Design resolution height.

* @param resolutionPolicy The resolution policy desired, you may choose:

*                         [1] kResolutionExactFit Fill screen by stretch-to-fit: if the design resolution ratio of width to height is different from the screen resolution ratio, your game view will be stretched.

*                         [2] kResolutionNoBorder Full screen without black border: if the design resolution ratio of width to height is different from the screen resolution ratio, two areas of your game view will be cut.

*                         [3] kResolutionShowAll  Full screen with black border: if the design resolution ratio of width to height is different from the screen resolution ratio, two black borders will be shown.

*/

virtual
void

setDesignResolutionSize
(
float

width
,

float

height
,

ResolutionPolicy
resolutionPolicy
)
;

这个方法的使用很简单,在游戏启动过程的 pDirector->setOpenGLView(pEGLView); 行之后,直接调用一次就好。调用完了之后,CCDirector->WinSize就会变更为你设定的分辨率,之后就按照这个WinSize进行开发就好了,当然有些时候还是需要一些注意一些额外的地方后面会提到。

这个方法的作用简单来说,就是我们可以只按照一套指定的分辨率设计游戏,称之为design resolution。然后选择合适的适配方案,引擎就会在你的design resolution的基础上进行缩放操作,使得按照指定分辨率设计的游戏可以适配各种分辨率。

具体的主要适配方案主要有以下三种,为了方便理解还会配图说明,先举一个例子:

这是我们的实际屏幕尺寸,有宽屏568×320和正屏480×360两种:

而这是我们设定的design resolution 480×320:

1) kResolutionExactFit:强制拉伸游戏方案,这个方案实用性很低,用暴力的拉伸直接将游戏拉伸到全屏,会导致图片比例失真

2) kResolutionNoBorder:无黑边保持高宽比拉伸方案,这个方案最美观,但是等比拉伸会导致左右或上下总会有一部分显示到屏幕外,需要自己去保证UI元素不会显示在屏幕外

(可以看到如果我们按照design resolution直接设计UI,贴在上下两侧的按钮等就可能显示到屏幕外了。但是实际上cocos2d-x有提供方案来帮助帮助我们保证UI元素绘制在屏幕内,后面的内容会提到具体方法。)

3) kResolutionShowAll:有黑边保持宽高比全显示拉伸方案,这个方案在在上两种方案之间,保持了宽高比也显示了全部内容,但是会在屏幕两侧留下黑边

(可以看到design resolution和实际屏幕宽高比相差太大的话黑边会比较多,但是这个方案是设计时最省心的)

三种适配模式都讲解完了,大家对选用哪种模式应该自己心里也都有数了。实际上最省心的方案就是找一个宽高比居中的design resolution,然后如果选用方案2的话就额外注意把元素都不要摆的太靠边就OK了。

不过这样做出来的游戏显得对用户体验太不上心了,个人觉得至少要检测一下屏幕的实际宽高比,对宽屏和正屏系列采用两套以上分辨率才可以。确定最合适的分辨率需要事先考察一下主流的屏幕分辨率,这里为了方便把分辨率统一转换成宽高比方便比较:
(安卓设备分辨率来自http://developer.android.com/guide/practices/screens_support.html#testing
iPad: 1.333 : 1
iPhone5: 1.775 : 1
iPhone4(s): 1.5 : 1
WVGA800(800×480): 1.667 : 1
WVGA854(854×480): 1.779 : 1
1024×600: 1.707 : 1
WXGA(1280×800): 1.6 : 1
1024×768: 1.333 : 1
1280×768: 1.667 : 1
综上观察手持设备的分辨率再多,大部分也都遵循了显示器界4:3、16:9、16:10三大主流宽高比,iPhone4(s)算是略特殊的一个宽高比。基于这个统计,再根据游戏主推的平台,就可以确定两到三个主支持分辨率来进行设计了。当然,根据高清设备采用一个高清的分辨率方案,有时也是很必要的。

2. 关于getVisibleSize和getVisibleOrigin

针对上文中kResolutionNoBorder模式下,游戏UI有可能绘制到屏幕外的问题,有没有什么好的处理办法?答案是有,cocos2d-x为我们准备了方法来获取真正的可视范围,详情见这两个方法:

1

2

3

4

5

6

7

8

9

/**

* Get the visible area size of opengl viewport.

*/

virtual
CCSize
getVisibleSize
(
)

const
;

/**

* Get the visible origin point of opengl viewport.

*/

virtual
CCPoint
getVisibleOrigin
(
)

const
;

拿设计分辨率480×360但实际屏幕为480×320举例(取这个值是因为没拉伸好计算 -__-!),这个时候画面上下会有一部分显示不出来,经过引擎的计算会得到如下的值:
visibleSize: 480 x 320
visibleOrigin: 0, 20

通过这两个值,我们就可以正确的取得视图上真正显示在屏幕内的矩形范围了。在这个值的配合下,将所有的UI元素指定为左上、左中、左下、中上、中下、右上、右中、右下8种对齐方式的一种,就可以动态的计算坐标,放在屏幕的合适位置了。

====水平有限,如有错误欢迎指正====

3. 动态变化的设计分辨率

上述的三种主要适配方案都是使用固定的设计分辨率的,比较方便设计师直接出固定坐标的UI设计图。

仔细看了看适配方案的枚举,可以看到还有两个方案在setDesignResolutionSize的注释里没有出现,他们就是kResolutionFixedHeight和kResolutionFixedWidth。(老实说没有研究代码前我也不知道这俩方案cocos2d-x已经出官方支持了,我和我的小伙伴们之前都是自己手动实现的啊 QAQ)

1) kResolutionFixedHeight:固定高度,动态宽度的适配模式,可以自由的自己根据动态的宽度处理游戏

2) kResolutionFixedWidth:固定宽度,动态高度的适配模式,可以自由的自己根据动态的高度处理游戏

这里拿固定高度方案来举个例子说明,比如我设定了固定高度600,如果屏幕实际高宽比为1.5 : 1,那么CCDirector->WinSize就会变成900×600;如果屏幕实际高宽比为1.667 : 1,那么CCDirector->WinSize就会变成1000×600。

看明白了没有?对!就是说固定高度的话,设计游戏全景的时候就要按最长的宽度可能(以600来算应该是600×1.78=1068)来设计,来保证最长宽高比的情况下右侧不会出现黑边。右侧的UI元素必须设定为“右对齐”,这样在宽度变窄的情况下UI元素会自动左移,宽度变宽的情况下UI元素会自动右移。另外要注意左右UI的摆放要保证在宽度最窄的情况下(600×1.333=800)不会重叠。

固定宽度的情况类似不多说了。

这是目前来说最好的动态适配方案,不用担心黑边也不用担心UI出屏幕。而且不用考虑复杂的8种对齐方式,因为宽度和高度有一个是固定的,所以只需要考虑两种对齐。对于横版或者竖版的卷轴游戏来说,这个适配方案需要的额外设计成本几乎为零。

时间: 2024-10-21 17:24:28

Cocos2d-x 屏幕适配解决方案的相关文章

Android开发:最全面、最易懂的Android屏幕适配解决方案

前言 Android的屏幕适配一直以来都在折磨着我们Android开发者,本文将结合: Google的官方权威适配文档 郭霖:Android官方提供的支持不同屏幕大小的全部方法 Stormzhang:Android 屏幕适配 鸿洋:Android 屏幕适配方案 凯子:Android屏幕适配全攻略(最权威的官方适配指导) 自身的思考&实践 给你带来一种全新.全面而逻辑清晰的Android屏幕适配思路,只要你认真阅读,保证你能解决Android的屏幕适配问题! 目录 定义 使得某一元素在Androi

Android屏幕适配解决方案

1.概述 Android碎片化问题是每个开发者心中的噩梦,本文就Android适配问题进行了全面的总结. 首先看下谷歌官方2016 年 8 月 1 日发布的报告: Android 平台版本的相对数量设备的相关数据: 可以看出4.1版本及以上占有量达到96%,所以适配优先考虑4.1以上的版本适配问题. 特定屏幕配置的设备的数据,屏幕配置由屏幕尺寸和密度定义: 从统计数据可以看出,hdpi.xhdpi和xxhdpi的占有率达到95%. 详细统计数据看这里: https://developer.and

移动端屏幕适配解决方案

因原在做移动端适配过程中,一直都是应用淘宝的flexible高清方案解决,也没有认真的去研究过源码.这几天又看到一些普通的适配方案,于是把两者源码放在一起比较,发现高清方案是通过动态的获取了当前设备的dpr值,然后根据dpr值的大小来设定手机的视口的缩放比例,从而实现高清.比如:dpr=2时,设定initial-scale = 0.5 ;  dpr=3时 ,设定initial-scale = 0.333 : 一.手机端viewport详解 <meta name="viewport"

Android 屏幕适配:最全面的解决方案

转自:https://www.jianshu.com/p/ec5a1a30694b 前言 Android的屏幕适配一直以来都在折磨着我们Android开发者,本文将结合: Google的官方权威适配文档 郭霖:Android官方提供的支持不同屏幕大小的全部方法 Stormzhang:Android 屏幕适配 鸿洋:Android 屏幕适配方案 凯子:Android屏幕适配全攻略(最权威的官方适配指导) 自身的思考&实践 给你带来一种全新.全面而逻辑清晰的Android屏幕适配思路,只要你认真阅读

cocos2d-x 3.2 屏幕适配

在手机端开发,屏幕适配是个永恒的话题,主要由于android(ios)碎片化-- 网上有很多帖子讲解cocos2d-x 2.x 屏幕适配的帖子,很少关于 3.2的,今天我参考http://blog.csdn.net/liaowenfeng/article/details/8566856点击打开链接, 在 3.x 的引擎上研究了哈,屏幕适配--有兴趣的筒子们可以喵喵-- 原理就不讲了,参考上面的链接,写的很清晰,哎,太懒了-- 其实主要就是在 文件 AppDelegate.cpp中 的 appli

屏幕适配的原理

初级游戏开发者通常都会遇到屏幕适配的问题,由于安卓手机屏幕差异很大,不同的手机屏幕大小各不相同,同时屏幕不同分辨率也不同,因此在对手机游戏进行测试的时候,屏幕适配的工作就显得非常重要了. 接下来我们谈谈屏幕适配那些事儿. 不同分辨率对应的文件夹 首先我们知道android工程目录res下有四个文件夹,drawable-hdpi.drawable-mdpi.drawable-ldpi.drawable-xhdpi,主要是为了支持多分辨率的图片.如果你制作的游戏切图是480x800的切图,就应该放到

Android学习笔记:App屏幕适配相关

一谈到Android开发,就少不了拉扯到屏幕适配问题,为什么要屏幕适配?原因很简单,因为Android手机相关设备款式型号太多太多(据统计,2012年支持Android的设备共有3997种,2013年达到11868种,到2014年时高达18796种,现在会更多),不同的设置屏幕大小不同,如果我们用单一的方式去就对待所有的手机,那结果可想而知!所以我们需要针对不同设备做屏幕适配. 谈到尺寸,我们就要涉及到相关的概念: 1,屏幕尺寸:指设备屏幕对角线的长度,一般以英寸(inch)为单位, 2,屏幕分

cocos2d 3.0 屏幕适配

1.解决方案 先直接给出解决方案,再慢慢解释,当然这个解决方案也不是完全完美的. [cpp] view plaincopy //如果是横屏游戏: glview->setDesignResolutionSize(960, 640, ResolutionPolicy::FIXED_HEIGHT); //一张960x640的背景显示 auto visibleSize = Director::getInstance()->getVisibleSize(); auto Bg = Sprite::crea

iOS开发屏幕适配问题解决方案

屏幕适配问题共有四种解决方案:(1)根据屏幕宽高写控件frame(下策):(2)Autoresizing的使用(中策):(3)AutoLayout的使用(上策):(4)sizeClasses+AutoLayout的使用(上上策).下面将会分别来进行叙述. (1)根据当前屏幕的宽高写frame 在新特性界面中,根据:[UIScreen mainScreen].bounds.size.height.来判断用户的屏幕长度,来判断时3.5寸,4寸,4.7寸,5.5寸,以此来设置新特性中图片选用哪套. 常