Cocos2d-x屏幕适配原理分析

摘要：Cocos2d-x是Cocos2d游戏开发框架C++的实现，随着近几年游戏开发的火热，越来越多的APP开发者使用Cocos2d-x实现快速多平台部署，从最初的Android、iOS、Win32、HTML5，再到移动、客户端到浏览器的全方位覆盖，其发展势头不容小觑呀。

 

开发移动应用的屏幕适配的根本目的是实现在不同设备上用户体验的统一，而Cocos2d-x在Cocos2d-2.0-x-2.0版本之前都没有提供解决方案，对于开发者来说都只能自己解决。而从Cocos2d-2.0-x-2.0.4开始，勤劳的Cocos2d-x团队终于着手开始解决这个问题了。 

下面就跟随小编用一个实例分析一下其实现的原理~

新建一个带helloworld例子的工程

窗口尺寸为480x320，背景火蓝精灵的图片原始大小就是480x320，正好铺满屏幕。

首先，模拟分辨率为960x640的屏幕，看看程序会是什么样子的。亲会修改win32下窗口尺寸吗？如果你是从2.0-x-2.0.4之前的版本直接跳过来的，比如我(源自1.0.1-x-0.11.0)，第一反应就是到AppDelegate.cpp里去找设置win32窗口大小的代码，但是很遗憾，你找不到熟悉的"CC_TARGET_PLATFORM == CC_PLATFORM_WIN32"，因为新版本把设置win32窗口尺寸移到了main.cpp里面了，如下图：

从代码结构来讲，这样更合理，因为AppDelegate.cpp是与平台无关的程序逻辑入口，里面不应该还包含大量不同平台的适配代码。交给win32自己的main.app去设置，理应合情合理。

接上述，把eglView->setFrameSize(480,320)改为eglView->setFrameSize(960, 640)，模拟分辨率为960x640的屏幕，运行效果：

背景图尺寸是480x320，在960x640屏幕下自然就填不满，很合理。现在，需求来了：我们想要的结果是不论在什么分辨率下，用户都应该看到背景图填满了屏幕~ 

解决方案：

1、使用不同的资源适配不同的屏幕，可以通过判断屏幕的分辨率来设置加载不同目录的资源。

2、使用一套资源，在不同的分辨率下匹配屏幕进行缩放。

先来看方案一，既然要为不同分辨率使用不同资源，那就再做一张图案一样的火蓝精灵背景图，尺寸为960x640，用于分辨率为960x640的屏幕。在工程Resources目录下新建两个目录：

"iphone"目录存放480x320的背景图和按钮图标，"iphone-retina"存放960x640的背景图和按钮图标。这两个目录名字随意，再看到AppDelegate.cpp，修改代码如下：

运行程序：

框架就按照设置找到了960x640的背景图，屏幕又恢复了不空虚不寂寞的状态，这里要注意：想获取设备屏幕实际分辨率需要使用CCSize szFrame = pEGLView->getFrameSize();而不是之前版本的CCDirector::sharedDirector()->getWinSizeInPixels();

但是，面对全世界那么多的移动设备，那么多的分辨率，你能hold住吗？一种分辨率就出了一套匹配的美术资源。就算真有以做地老天荒牌游戏为荣的团队，出来的安装包之大，也会让用户下载到地老到天荒~so，这不是个好办法。

那看看第二种方案，对资源进行缩放，还原Resources目录的结构：

现在还是只有一张480x320的背景图，怎么改？AppDelegate.cpp里修改：

再次运行，屏幕再次不空虚不寂寞~

分析：

designResolutionSize是一个新的概念，它让一切与坐标、尺寸相关的数据彻底摆脱了屏幕分辨率的羁绊，或者说，

由框架层来帮开发者完成转换，开发者需要的只是设置designResolutionSize，告诉框架你在什么样尺寸的场景下做的资源。比如此例，背景图原始尺寸480x320，需求是刚好填满屏幕，那么框架究竟如何实现的呢？ 跟踪pEGLView->setDesignResolutionSize(480, 320, kResolutionNoBorder);

可以发现，框架是获取了实际分辨率和开发者designResolutionSize的比例，渲染的时候把图片按照这个比例来缩放绘制。

拿本例来说，屏幕960x640，designResolutionSize为480x320，缩放比例为2，那么原始大小480x320的背景图，在绘制时就会x2来绘制，也就是实际绘制成了960x640的大小，这样就填满窗口了。请注意这里对不同ResolutionPolicy的处理。

现在面对480x320和960x640的屏幕，你已经能写出自动适配的代码了，但是别高兴的太早，又来了新的需求，“那谁谁，你改一下代码，程序要能适应ipad2 ”，不要太崩溃，接下来老老实实的改吧~

于是你开始想“ ipad2分辨率1024x768，就按刚才大师教我的到main.cpp里修改”，好~修改为1024x768，看效果：

ms填满了，你很满意，但是此时此刻，右下角的按钮肿么快到屏幕外面去了？！原来不是填满是填太满的原因，背景图都超出屏幕了。

根源在于pEGLView->setDesignResolutionSize(480, 320, kResolutionNoBorder);第三个参数，找到定义：

接下来是setPosition()的变化，CC_CONTENT_SCALE_FACTOR()的变化，使用kResolutionNoBorder策略时要注意的>>>查看余下全文