您的位置:首页 > 移动开发 > Cocos引擎

Cocos2d-x 屏幕适配

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

      而在设计游戏之初,决定着我们屏幕适配的因素有哪些,简而言之只有两点:屏幕大小 和 宽高比。这两个因素是如何影响游戏的:

屏幕大小: 从小分辨率 480x320 到 1280x800 分辨率,再到全高清 1080p,从手机到平板,还有苹果设备的 Retina 屏,这么多不同的分辨率,而且大小差距甚大,不可能做到一套资源走天下,资源往小了设计,在大屏幕会显示模糊,图片往大了设计,在小屏幕设备又太浪费,而且小屏幕的手机硬件资源也会相对的紧缺,所以 根据屏幕大小使用不同的资源 是有必要的,而 cocos2d-x 也帮我们解决了这一点。
宽高比: 什么是宽高比,就是你的屏幕是方的还是长的,靠近方形的分辨率如 480x320,比例为 3:2,还有 960x540 的 16:9 标准宽屏,这也算是两种总极端情况了,如果能在这两种比例情况做好适配基本就可以了,如果比 3:2 “更方”如 4:3,比 16:9 “更长”,那么不论如何布局,显示效果差距甚大,最好对固定比例优化吧。当在宽高比在一定范围内,可以通过灵活编写程序去适应,而在显示效果上,cocos2d-x 为我们提供了三种模式,这些 模式更多的是帮我们解决比例不一的情况而存在 的,如果只是屏幕大小(比例一样),那通过简单的放大缩小即可完成。

1. cocos2d-x 2.0版本的适配首先需要了解下面这些知识。

(1)适配策略



(2)VisibleSize和VisibleOrigin

      getVisibleSize:表示获得视口(可视区域)的大小,如果DesignResolutionSize跟屏幕尺寸一样大,则getVisibleSize等于getWinSize。

      getVisibleOrigin:表示可视区域的起点坐标,这在处理相对位置的时候非常有用,确保节点在不同分辨率下的位置一致。
 (3)DesignResolutionSize
      DesignResolutionSize是一个比较重要的概念,其实2.0版本的适配跟1.0版本原理差不多,都是按比例进行缩放。这个DesignResolutionSize表示设计方案,就是你的游戏完美支持的分辨率方案,一般根据图片资源的尺寸来定,自适配时会按照这个分辨率计算出缩放因子。因此,这个值也应该是动态的,如果是横屏游戏则高度肯定是铺满屏幕的,宽度也要尽可能的铺满屏幕,因此应该选择宽高比最大的作为设计分辨率,下面的demo会给出使用方法。

    (4)设置相对位置
      在游戏中使用相对位置设置坐标的好处是显而易见的,这样就不需要为每个分辨率都定义一套坐标了。首先得定义一些参考点,引擎的TestCpp例子中就提供了一种方法,以屏幕上可视区域的9个点作为参考点,相当于在该矩形内写一个米字,这9个点分别是:左上、左、左下、下、右下、右、右上、上、中心。

2.代码实现:

      代码实现较为简单,直接在AppDelegate.cpp的applicationDidFinishLaunching方法,添加如下代码:

      CCEGLView::sharedOpenGLView()->setDesignResolutionSize(640 , 960, kResolutionNoBorder);
但看了无间落叶博客后,他做了调整,代码实现:
CCSize frameSize = CCEGLView::sharedOpenGLView()->getFrameSize();
// 设置 LsSize 固定值
CCSize lsSize = CCSizeMake(480, 320);

float scaleX = (float) frameSize.width / lsSize.width;
float scaleY = (float) frameSize.height / lsSize.height;

// 定义 scale 变量
float scale = 0.0f; // MAX(scaleX, scaleY);
if (scaleX > scaleY) {
// 如果是 X 方向偏大,那么 scaleX 需要除以一个放大系数,放大系数可以由枞方向获取,
// 因为此时 FrameSize 和 LsSize 的上下边是重叠的
scale = scaleX / (frameSize.height / (float) lsSize.height);
} else {
scale = scaleY / (frameSize.width / (float) lsSize.width);
}

CCLog("x: %f; y: %f; scale: %f", scaleX, scaleY, scale);

// 根据 LsSize 和屏幕宽高比动态设定 WinSize
CCEGLView::sharedOpenGLView()->setDesignResolutionSize(lsSize.width * scale,
lsSize.height * scale, kResolutionNoBorder);


效果,就由你们亲自尝试吧。

还有提醒的,若使用cocosbuilder3.0的网友们,也可以参考这篇博文http://www.cocoachina.com/applenews/devnews/2013/0809/6766.html,来调整多适应分辨率,同时,大家也可以参考下前辈的文章。

前辈们的文章:

1.官网上的这篇:http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Multi_resolution_support

2.Alex Zhou的程序世界上的这篇:http://codingnow.cn/cocos2d-x/975.html

3.我是妖怪大大的这篇:http://dualface.github.io/blog/2012/08/17/cocos2d-x-2-dot-0-multi-resolution/

4.无间落叶大大的这篇:http://blog.leafsoar.com/archives/2013/05-10-19.html

5.还有K.C大大的讲cocosbuider的这篇:http://i.kimiazhu.info/?p=119
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  cocos2d-x c++