cocos2d-x屏幕适配原理

原文地址：http://m.blog.csdn.net/article/details?id=50827766

一、适配简介

如今市面上的手机种类越来越多，分辨率是千变万化的。但是我们做游戏开发，喜欢自己的游戏可以在各个手机都能合适的运行，那么就需要做多分辨率的适配。

二、retain屏幕概念

之前，苹果手机对480*320和960*640的手机适配策略是这样的，当分辨率是480*320时，寻找的图片是1.png。当分辨率是960*640时，寻找的图片是[e-mail]。这个图片是1.png的2倍大小，这样就能保证在不同的分辨率手机上都能很好的运行。但是，这给我们的美工增加了不小的工作量，而且安装包的大小也会大很多。

cocos2d-x里也有这种策略，它的做法是把图片放在不同的文件夹中。程序运行时，根据接口获取屏幕分辨率，然后进行判断，再设定图片的搜索路径，这样程序中读取图片就会从这个指定的路径读取。

if(Director::getInstance()->getWinSize().width > 480){        std::vector<std::string>s;        s.push_back("lagre");    }else{        std::vector<std::string>s;        s.push_back("small");    }
1
2
3
4
5
6
7

三、cocos2d-x适配策略

cocos2d-x在2.0.4版本开始提出了自己的适配策略。提出了设计分辨率这样的一个概念。
相关概念：
资源分辨率：就是我们的图片分辨率。
设计分辨率：我们将这个游戏放在这个分辨率的设备上，我们的游戏将完美展示。
设备分辨率：我们手机的分辨率。

那么具体的做法是什么呢？
这个适配过程可以分为两个部分。
1.第一个部分，就是资源分辨率到设计分辨率。但是我们一般在准备资源时，会让其一致，那么久可以省略这一步，但是如果不一样，cocos2d-x也提供了相应的接口。

    Director::getInstance()->setContentScaleFactor(2.0);
1

我们可以设置图片的缩放银子，这个设置之后，就相当于将我们的图片资源缩小了4倍。因为这个的算法是（资源）/（设计分辨率）。
2.第二部分，就是从设计分辨率到设备分辨率。我们刚开始说我们将我们这么的设计的游戏，放在设备分辨率等于设计分辨率的手机上，我们的游戏将完美展示，但是，当放在手机分辨率不等于我们设备分辨率的手机上，那么它会怎么显示呢？
其实，设计分辨率的单位是点，而屏幕分辨率是像素。cocos2dx就是为了让我们的程序，可以不用直接关注手机分辨率，而提出了设计分辨率这样的一个概念。在最后绘制的时候，我们设计分辨率的一个点，可能对应好几个像素。

在代码上，我们的屏幕适配就只有下面这点代码：

    GLView* gl  = Director::getInstance()->getOpenGLView();    gl->setDesignResolutionSize(800, 400, ResolutionPolicy::FIXED_HEIGHT);
1
2

这里的三个参数分别是：设计分辨率的宽，设计分辨率的高，和适配策略。适配策略是cocos2d-x已经给我们写好的，现在有5种。

策略1：SHOW_ALL

根据屏幕的宽高与设计分辨率的宽高分别计算缩放因子，然后取较小的作为缩放因子。保证了设计区域全部显示到屏幕上，但是屏幕上可能有黑边。

策略2：NO_BORDER

根据屏幕的宽高与设计分辨率的宽高分别计算缩放因子，然后取较大的作为缩放因子。保证了设计区域在一个方向上铺满，而另一个方向一般会超出屏幕区域。

策略3：EXACT_FIT

根据屏幕的宽与设计分辨率的宽作为x方向上的缩放因子，根据屏幕的高与设计分辨率的高作为y方向上的缩放因子，保证了屏幕完全铺满，但是可能会出现图像的拉伸。

策略4：FIXED_HEIGHT

根据屏幕的的宽高比，保证设计分辨率的高不变，修改设计分辨率的宽。
就是根据屏幕的宽高比，来调整设计分辨率的宽高比，使其一直，在此过程中，不对高做调整。
例如：资源分辨率800*400->设计分辨率800*400->设备分辨率480*320。
首先，我们求出其设备分辨率的宽高比。
480/320 = 1.5。
其次，我们保持设计分辨率的高不变，调整宽，使其比例一致。
400*1.5 = 600。
我们的设计分辨率为800*400，然而我们计算得出这个策略使用后只需要600*400的分辨率，那么宽多出了200，则图片在x方向上有部分被截取了，且铺满了屏幕。

策略5：FIXED_WIDTH

根据屏幕分辨率的宽高比，保证设计分辨率的宽不变，修正设计分辨率的高。
同样使用上面那个例子：
首先，求出设备分辨率的宽高比。
480/320 = 1.5。
其次，我们保持设计分辨率的宽不变，调整高，使其比例一致。
800/1.5 = 533。
那么，可知，设计分辨率的高是400，比533小。那么最后图片在展示时在y方向上会有黑边。