从零学习cocos2d-x之一：屏幕适配

感谢：

 http://blog.youkuaiyun.com/u014075575/article/details/21333407

 http://luoposhusheng.blog.51cto.com/8148702/1322544

 http://blog.youkuaiyun.com/andy_quan/article/details/27201383

 http://blog.youkuaiyun.com/cm_do2/article/details/50038851

 http://www.cocoachina.com/game/20130513/6180.html

一、FrameSize、WinSize、ViewPortSize

1）FrameSize:     屏幕的实际分辨率

2）WinSize :        设计分辨率（逻辑分辨率）

3）ViewPortSize: 视口的大小(可能会超过FrameSize), FrameSize 、WinSize 、适配模式三者换算以后 决定了 视口的大小。

我们在WinSize下的逻辑点 经过矩阵变换后映射到屏幕视口里和视口一样的大，但不是一定都能在屏幕上见到，因为我们能看见的点一定在屏幕上（容易理解），同时一定在视口里，2者共同决定。（具体理解请往下看）

二、cocos2d-x的适配

1）showAll模式

如果设计分辨率和实际的分辨率 宽高比不相同，则视口肯定在某一边是小于屏幕的，则会使得逻辑点映射到屏幕上的时候肯定会出现黑边，而这种由于视口原因形成的黑边是无法调和的。

 WinSize: 480*320

 FrameSize: 1136*640 上图黑框显示

 ViewPortSize：960*640，上图红框显示

所有WinSize中的逻辑点映射到屏幕以后为红框的大小==视口大小,完全可见。但是注意（视口宽<小于实际分辨率宽）

特点：设计的逻辑点都能见到，但是有黑边（绿框之外黑框之内）

2）NoBoard模式

如果设计分辨率和实际的分辨率 宽高比不相同，则视口肯定在某一边是大于屏幕的，则会使得逻辑点映射到屏幕上的时候，有一些逻辑点肯定是没法在屏幕上看到的，而这种由于视口原因形成的不可见也是无法调和的。VisibleSize，则是能可见的映射到屏幕上的在winSize范围内的逻辑点的大小。很显然，其大小小于WinSize，其宽高比等于FrameSize的宽高比。

 WinSize: 480*320

 FrameSize: 1136*640 上图黑框显示

 ViewPortSize：1136*757，上图红框显示

所有WinSize中的逻辑点映射到屏幕以后为红框的大小==视口大小，但是超出了实际屏幕的大小(757>640)，所以可见的只是绿色的部分，超出的部分则是VisibleSize之外的。

特点：可见的点需要使用visibleSize，和VisibleOrg来确定，不方便使用。

     小结： 以上2种适配 都是 等比的拉伸，只是取得系数不一样，如果在实际和设计的分辨率宽高比不一样的情况下，这2种适配模式都会使得最终的视口会超出或者小于实际分辨率的大小，但是我们也能从中得到启示，即如何使得最后的（视口大小==实际分辨率），那就得到了一种完美的适配方案。其实我们也能很容易发现 之所以上面2个值不相等是因为使用了等比拉伸系数的原因。很自然我们想到使用非等比拉伸。

3) EXACT_FIT 非等比拉伸模式

 WinSize: 480*320

 FrameSize: 1136*640 上图黑框显示

 ViewPortSize: 1136*640，上图红框显示

特点：看似完美 ，然而设计的图形会因为非等比的拉伸而变形，所以不可取。

小结：由上分析，要想完美的适配，必须经过等比的拉伸使得 视口的大小==实际分辨率的大小，而 实际分辨率是固定死了的，如果实际分辨率的宽高比与设计分辨率不一致，同时又想使用等比拉伸，则最终势必不能使得 视口的大小==实际分辨率， 仿佛已经陷入了怪圈。所以我们最终只能改变一个，那就是 设计分辨率。    

4）FIXD_HEIGHT

虽然我们最终需要去改变设计分辨率，但是只能改变设计分辨率中的一个，如果都改变了那设计分辨率也就没有意义了，故FIXD_HEIGHT就是锁定设计分辨率的高度，重新计算一个新的设计分辨率的宽度

 WinSize: 480*320

 FrameSize: 1136*640 上图黑框显示

 ViewPortSize：1136*640，上图红框显示

注意：此图乍一看，它与showall很像，但是很明显他的视口==实际的分辨率的，绿色区域之外虽然也有黑边，但是与showall产生的黑边是不一样的，此处黑边的形成是因为我们最初美术出图是按照我们原始设计的480*320出的图，而因为适配调整的原因我们最后的设计分辨率实际是568*320.即适配后系统认为你初始的时候应该以568作为设计分辨率的高，但是我们美术在出图的时候是按照480*320的图出的， 如此就出现了黑边，这个黑边是可以被我们搞掉的。