本文转自：http://www.2cto.com/kf/201409/333604.html，感谢作者分享！
1.解决方案
先直接给出解决方案，再慢慢解释，当然这个解决方案也不是完全完美的。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//如果是横屏游戏:
auto visibleSize = Director::getInstance()->getVisibleSize();
auto Bg = Sprite::create(
"Bg.png"
);
this
->addChild(Bg);
Bg->setPosition(visibleSize.width /
2
);
//Bg->setPosition(visibleSize.width / 2,320);//等价上面的
Bg->setScaleX(visibleSize.width /
);
//右上角显示一个精灵
auto Spr = Sprite::create(
"test.png"
);
->addChild(Spr);
Spr->setPosition(visibleSize.width -
50
);
//因为是固定高度，所以visibleSize.height永远都是640，所以下面的写法也是可以的
//Spr->setPosition(visibleSize.width - 50,590);
//如果是竖屏游戏:
|
enum
class
ResolutionPolicy
{
EXACT_FIT,
NO_BORDER,
SHOW_ALL,
FIXED_HEIGHT,
FIXED_WIDTH
};
|
2.1 EXACT_FIT
EXACT_FIT是会完全投射到屏幕全屏的。这样对程序和美术来说是最完美的，但是会有拉伸的现象。
上面这张是960x540的原图，4个角我加上了参照物，总的是一张图片。
假设目标手机分辨率是1136x500(现实是不存在的)，使用EXACT_FIT就是下面的效果：
其实对于背景的拉伸，还是可以接受的，主要的问题是:精灵也会被拉伸,还有拉伸区域是不可控制的。
EXACT_FIT适用场景：个人小项目，轻微拉伸不影响游戏的展示的游戏。但公司大项目这个基本不可用。
使用EXACT_FIT的时候，visibleSize不管手机分辨率是多少，visibleSize永远都是960x640。
2.2 SHOW_ALL
先来解释下Show_All.它不会拉伸，但是左右或者上下会有黑边，没有全屏的感觉。
1136x640
1024x768
Show_ALL 能不能用呢？几乎不能用。虽然它的visibleSize也都是960x640。但是黑边的问题，苹果那边是通过不的。这里的黑边是不能用东西来覆盖的。
2.3 NO_BORDER
NO_BORDER 顾名思义就是没有黑边，且保持宽高比。这样的结果就是，会有部分被裁剪掉。
手机分辨率比较长的时候，上下不够，会被裁掉，注意看背景下面的参考物。
visibleSize width:960
visibleSize height:540.8450927734375 //不到640
IPad分辨率比较高的时候，左右不够，会被裁掉，注意看背景左边的参考物。
visibleSize height:640
使用NO_BORDER会导致visible一直变化，且会被裁掉。
2.4 FIXED_HEIGHT
FIXED_HEIGHT和FIXED_WIDTH是类似的，就讲个FIXED_HEIGHT。FIXED_HEIGHT和FIXED_WIDTH是较高cocos2d版本才有的。这个解决方案是固定一个方向上的值，且固定比例。这样会导致部分覆盖不到或者部分被裁掉，要程序进行动态适配。
图7
visibleSize width:1136 //会根据手机屏幕分辨率进行变化
visibleSize height:640 //永远固定是640
visibleSize width:854 //会根据手机屏幕分辨率进行变化
visibleSize height:640 //永远固定是640
图7虽然这里的效果看起来跟SHOW_ALL的一样，但是是完全不一样的，通过看visibleSize就知道了。这里的黑边我们是可以通过手动拉伸背景来覆盖的。有人就问了，拉伸背景不就跟EXACT_FIT的一样了？不一样的！EXACT_FIT是拉伸整个区域，场景放置的精灵也是会被拉伸的。FIXED_HEIGHT就不会拉伸精灵了。
精灵放置的位置就有讲究了，在纵向，完全可以使用魔鬼数字，320肯定是垂直居中的。横向就要斟酌了，比如要把一个精灵放在右上角就要考虑visibleSize了。
setPosition(visibleSize.width - 50,640 - 50);
var visibleSize = cc.Director.getInstance().getVisibleSize();
var scaleRate = visibleSize.width /
;
var bg = cc.Sprite.create(
"res/bg.jpg"
);
.addChild(bg);
bg.setPosition(visibleSize.width /
);
bg.setScaleX(scaleRate);
var sp = cc.Sprite.create(
"res/menu1.png"
);
.addChild(sp);
sp.setPosition(
100
* scaleRate,0)!important">320
);
