cocos2dx-3.0(31) 多分辨适配
来源:互联网 发布:下载photo blender软件 编辑:程序博客网 时间:2024/04/28 18:51
~~~~我的生活,我的点点滴滴!!
1. setDesignResolutionSize使用方法及主要的三种适配模式
在cocos2d-x里,提供了一个叫做setDesignResolutionSize的方法,直接一次设置就可以自动适配各种分辨率。这个方法的注释如下:
enum class ResolutionPolicy{ // The entire application is visible in the specified area without trying to preserve the original aspect ratio. // Distortion can occur, and the application may appear stretched or compressed. EXACT_FIT, // The entire application fills the specified area, without distortion but possibly with some cropping, // while maintaining the original aspect ratio of the application. NO_BORDER, // The entire application is visible in the specified area without distortion while maintaining the original // aspect ratio of the application. Borders can appear on two sides of the application. SHOW_ALL, // The application takes the height of the design resolution size and modifies the width of the internal // canvas so that it fits the aspect ratio of the device // no distortion will occur however you must make sure your application works on different // aspect ratios FIXED_HEIGHT, // The application takes the width of the design resolution size and modifies the height of the internal // canvas so that it fits the aspect ratio of the device // no distortion will occur however you must make sure your application works on different // aspect ratios FIXED_WIDTH, UNKNOWN,};
函数原型:
virtual void setDesignResolutionSize(float width, float height, ResolutionPolicy resolutionPolicy);
这个方法的使用很简单,在游戏启动过程的 pDirector->setOpenGLView(pEGLView); 行之后,直接调用一次就好。
调用完了之后,Director->WinSize就会变更为你设定的分辨率,之后就按照这个WinSize进行开发就好了,
当然有些时候还是需要一些注意一些额外的地方后面会提到。
这个方法的作用简单来说,就是我们可以只按照一套指定的分辨率设计游戏,称之为design resolution。
然后选择合适的适配方案,引擎就会在你的design resolution的基础上进行缩放操作,使得按照指定分辨率设计的游戏可以适配各种分辨率。
具体的主要适配方案主要有以下三种,为了方便理解还会配图说明,先举一个例子:
这是我们的实际屏幕尺寸,有宽屏568×320和正屏480×360两种:
而这是我们设定的design resolution 480×320:
1) EXACT_FIT
强制拉伸游戏方案,这个方案实用性很低,用暴力的拉伸直接将游戏拉伸到全屏,会导致图片比例失真
2)NO_BORDER
无黑边保持高宽比拉伸方案,这个方案最美观,但是等比拉伸会导致左右或上下总会有一部分显示到屏幕外,需要自己去保证UI元素不会显示在屏幕外
(可以看到如果我们按照design resolution直接设计UI,贴在上下两侧的按钮等就可能显示到屏幕外了。
但是实际上cocos2d-x有提供方案来帮助帮助我们保证UI元素绘制在屏幕内,后面的内容会提到具体方法。)
3)SHOW_ALL
有黑边保持宽高比全显示拉伸方案,这个方案在在上两种方案之间,保持了宽高比也显示了全部内容,但是会在屏幕两侧留下黑边
(可以看到design resolution和实际屏幕宽高比相差太大的话黑边会比较多,但是这个方案是设计时最省心的)
三种适配模式都讲解完了,大家对选用哪种模式应该自己心里也都有数了。实际上最省心的方案就是找一个宽高比居中的design resolution,
然后如果选用方案2的话就额外注意把元素都不要摆的太靠边就OK了。
不过这样做出来的游戏显得对用户体验太不上心了,个人觉得至少要检测一下屏幕的实际宽高比,对宽屏和正屏系列采用两套以上分辨率才可以。
确定最合适的分辨率需要事先考察一下主流的屏幕分辨率,这里为了方便把分辨率统一转换成宽高比方便比较:
android大部分的分辨率规格:
参照:http://developer.android.com/guide/practices/screens_support.html#testing
小屏QVGA (240x320) / 480x640
正常屏WQVGA400 (240x400)/ WQVGA432 (240x432) / HVGA (320x480)/ WVGA800 (480x800) / WVGA854 (480x854) / 600x1024 / 640x960
大屏WVGA800** (480x800) / WVGA854** (480x854)
超大屏1024x600 / 1024x768 / 1280x768 / 1536x1152 / 1920x1152 / 1920x1200 / 2048x1536 / 2560x1536 / 2560x1600
ios大部分的分辨率规格:
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
/** * Get the visible area size of opengl viewport. */virtual Size getVisibleSize() const;/** * Get the visible origin point of opengl viewport. */virtual Point getVisibleOrigin() const;
拿设计分辨率480×360但实际屏幕为480×320举例(取这个值是因为没拉伸好计算 -__-!),这个时候画面上下会有一部分显示不出来,经过引擎的计算会得到如下的值:
visibleSize: 480 x 320
visibleOrigin: 0, 20
通过这两个值,我们就可以正确的取得视图上真正显示在屏幕内的矩形范围了。在这个值的配合下,
将所有的UI元素指定为左上、左中、左下、中上、中下、右上、右中、右下8种对齐方式的一种,
就可以动态的计算坐标,放在屏幕的合适位置了。
3. 动态变化的设计分辨率
仔细看了看适配方案的枚举,可以看到还有两个方案在setDesignResolutionSize的注释里没有出现,
他们就是FIXED_HEIGHT:固定高度,动态宽度的适配模式,可以自由的自己根据动态的宽度处理游戏和FIXED_WIDTH。
(老实说没有研究代码前我也不知道这俩方案cocos2d-x已经出官方支持了,我和我的小伙伴们之前都是自己手动实现的啊 QAQ)
1) FIXED_HEIGHT:固定高度,动态宽度的适配模式,可以自由的自己根据动态的宽度处理游戏
2) FIXED_WIDTH:固定宽度,动态高度的适配模式,可以自由的自己根据动态的高度处理游戏
这里拿固定高度方案来举个例子说明,比如我设定了固定高度600,如果屏幕实际高宽比为1.5 : 1,
那么Director->WinSize就会变成900×600;如果屏幕实际高宽比为1.667 : 1,那么Director->WinSize就会变成1000×600。
看明白了没有?对!就是说固定高度的话,设计游戏全景的时候就要按最长的宽度可能(以600来算应该是600×1.78=1068)来设计,
来保证最长宽高比的情况下右侧不会出现黑边。右侧的UI元素必须设定为“右对齐”,这样在宽度变窄的情况下UI元素会自动左移,
宽度变宽的情况下UI元素会自动右移。另外要注意左右UI的摆放要保证在宽度最窄的情况下(600×1.333=800)不会重叠。
固定宽度的情况类似不多说了。
这是目前来说最好的动态适配方案,不用担心黑边也不用担心UI出屏幕。而且不用考虑复杂的8种对齐方式,
因为宽度和高度有一个是固定的,所以只需要考虑两种对齐。对于横版或者竖版的卷轴游戏来说,这个适配方案需要的额外设计成本几乎为零。
- cocos2dx-3.0(31) 多分辨适配
- android多分辨的适配问题学习
- android 手机分辨适配解决方案
- ios 屏幕分辨和适配的问题
- cocos2dx 多分辨率适配
- cocos2dx 多分辨率适配
- cocos2dx 多分辨率适配
- cocos2dx 多分辨率适配
- Multi-Resolution 多分辨策略示例
- Multi-Resolution 多分辨策略示例
- cocos2dx多分辨率适配解析
- cocos2dx的多分辨率适配(一)
- cocos2dx屏幕适配
- cocos2dx 全屏适配
- cocos2dx屏幕适配
- cocos2dx屏幕适配
- Cocos2dx屏幕适配
- Cocos2dx屏幕适配
- 进入公司第三、四个月
- 动态规划【搬运距离】
- 二分查找
- hdoj 4883 TIANKENG’s restaurant 【贪心】
- 关于程序员的诗句
- cocos2dx-3.0(31) 多分辨适配
- java面向对象-异常处理-习题
- virtualbox下ubuntu安装增强功能的问题
- IT忍者神龟之Maven 快速入门及简单使用
- 利用OpenOffice将word等office文档转换成PDF
- linux安装python
- java.io.File中的绝对路径和相对路径
- Cocos2dx 3.2 安装及创建新工程
- CSS (一)初步理解