cocos2d——屏幕自适应（转）

开始很不理解DesignResolutionSize和ContentScaleFactor是怎么使用的，看了比较多资料和图，把整理的理解记录以下：

pEGLView->setDesignResolutionSize(designResolutionSize.width,designResolutionSize.height, kResolutionNoBorder);
我的理解的意思是设计资源时是：
1.按这个大小来设计各个部件的，也以此来决定部件的位置。
2.对于屏幕大小不同的时候，根据FrameSize的大小和designsize（visiblesize）的大小比例进行拉伸（部件的大小和位置都会根据比例），拉伸的策略是后面的policy参数：
kResolutionNoBorder:等比拉伸，图片不变形，不允许上下左右有黑边，按高度或者宽度占满屏幕，超出的部分截取
kResolutionExactFit:图片高度按和宽度按格子和屏幕的比例拉伸，即不等比拉伸，图片会变形，宽度占满屏幕，高度也沾满屏幕
kResolutionShowAll:等比拉伸，图片不变形，整个图形需要在屏幕中能看到，屏幕上面或者下面会有黑边
3.注意计算比例都是按designsize-》framesize时的比例来进行，显示成什么样子则需要看通过下面的contentScaleFactor函数设置的比例从原图中获取到的大小部分跟designsize的大小情况。

pDirector->setContentScaleFactor(floatscaleFactor)
从资源图按什么比例缩放到designresolutionsize中，如果不设置就是1.0f，如果需要整张图都可以看得到，一般需要设置宽比和高比中大的那个。
如果获取的比例图在designsize不是完全吻合，则会在design中出现黑边（长和宽比design size小的情况）或者部分被截取（长或宽都比designsize大的情况）的情况，那后面在framesize里根据policy显示出来的图也是会有相应的情况。

计算最后屏幕显示成什么样，
第一步应该先按scaleFactor计算出从原图缩放后的中间图大小
第二步是看这个图在desigzsize中的显示情况
第三步按policy把designsize缩放到frame size


下面就用插图的方式来说明一下，我们这里使用的高度来计算这个比例值。 

图表1：资源大小=960*640，设计分辨率大小=480*320，目标设备屏幕大小=800*480，RH/DH=RW/DW=2.0f，第三个参数选择的是NoBorder模式。 

当使用NoBorder模式的时候，有一些背景区域显示到屏幕以外去了。假如你使用绝对坐标在设计分辨率大小（480*320），你游戏的一些UI可能会显示不全。为了解决这个问题，你不得不设置这个坐标依据’visiblerectangle’（可见矩形）的。你可以得到可见矩形的起点，通过CCDirector::sharedDirector()->getVisibleOrign()方法。调用CCDirector::sharedDirector()->getVisibleSize()方法你就可以确定屏幕上面的9个点，左边，右边，上面，下面，中间，左上角，右上角，左下角，右下角。 
假如你的游戏的所有坐标就是依靠这9个点，那么你的游戏就可以全屏展示了。 
关于怎么计算这些点，你可以参考TestCpp项目里面的“VisibleRect”类。 

图表2：资源大小=1024*768，设计分辨率大小=480*320，目标设备屏幕大小=800*480，RH/DH！=RW/DW=，第三个参数选择的是NoBorder模式。 

当RH/DH不等于RW/RH的时候，你就需要选择的是相对于设计分辨率的宽度比例还是高度比例。 

在图表2中，我们仍然使用高度比例来计算contentScaleFator，因此资源背景的高度将会适应设计分辨率 
在将设计分辨率绘制到屏幕上之后，标记① –> 标记②,和标记③将会在屏幕外面。 

现在，你有两个选择来让你的游戏全部显示出来。一种是让你的背景图变宽点。另外一种是去设置contentScaleFactor为宽度的比例。 

模式现在cocos2d-x支持三种模式 
Exactfit整个应用程序的内容都会在特殊区域可见，并且不用提供这些比例系数。可能会出现形变，所有的应用程序看起来可能会是拉伸或者压缩的。 
Noborder当设置了屏幕高宽比之后，整个应用程序将会显示在这个特殊区域，但是没有形变，但是可能一些裁剪。 
Showall当设置了屏幕高宽比之后，整个应用程序也是会显示在这个特殊的区域内，没有形变，不过可能会出现两条黑边。 

图表3：资源大小= 1024*768；设计分辨率大小 = 480*320；目标设备屏幕大小 = 800*480；RH/DH != RW/DW;ShowAll Policy 
标记②和标记③都是黑色的矩形区域。但是他们不同的，标记③是在Opengl可视区域外面的，因此你不能把任何的游戏元素放在上面。标记②的出现是因为RW/RH不等于DW/DH，但是在Opengl可视区域，你可以放置你的游戏元素在那里。