Cocos2d-x 屏幕适配

      为了适应移动终端的各种分辨率大小,各种屏幕宽高比,在 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,来调整多适应分辨率,同时,大家也可以参考下前辈的文章。

前辈们的文章:
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

热血枫叶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值