Cocos2d-JS屏幕适配

有终端开发经验的读者应该对屏幕适配问题深感痛恶，因为这个世界实在有太多类型的手机和平板了，各种尺寸

首先，我们来认识三个术语：

WinSize

：设计尺寸，我们设计游戏时预定的目标尺寸，可以在工程中的

main.js

文件中设置

VisibleSize

：游戏画面实际能显示到屏幕的范围。要引入一个新的术语–可视起点(VisibleOrigin)，表示当前屏幕左下角在整个游戏画面中的坐标。

FrameSize

：手机/设备的分辨率。

Cocos2d-JS为我们提供的屏幕适配方法有如下几种：

1.自适应拉伸

cc.ResolutionPolicy.EXACT_FIT

该方案下，游戏刚好铺满整个屏幕，但画面的比例会失调。在

main.js

中：

cc.view.setDesignResolutionSize(400, 450, cc.ResolutionPolicy.EXACT_FIT);

在该模式下，WinSize和VisibleSize是相等的，可视起点就是原来设计的原点，即VisibleOrigin为(0,0)。

2.全显示

cc.ResolutionPolicy.SHOW_ALL

这种方案跟自适应拉伸类似，但游戏画面拉伸时会等比例进行。这个方案虽然保持了画面的比例，但也带来了缺陷，也就是导致画面有黑边。在main.js中设置：

cc.view.setDesignResolutionSize(400, 450, cc.ResolutionPolicy.SHOW_ALL);

该模式下，游戏画面会全显示，且可视起点仍然为(0,0)

3.无黑边

cc.ResolutionPolicy.NO_BORDER

在这个方案下，游戏画面会等比例拉伸，但跟全显示不一样的是，无黑边方案会让游戏画面的短边刚好占满屏幕为准，此时相应的长边将超出屏幕(两侧超出部分的长度一致)。在main.js中设置：

cc.view.setDesignResolutionSize(400, 450, cc.ResolutionPolicy.NO_BORDER);

此种模式下，VisibleSize就是屏幕的尺寸，而左下角是可视起点，但坐标不是(0,0)。

游戏画面的坐标起点(0,0）始终是设计尺寸的左下角坐标。

注意:前面三个方案在实际应用中都不尽人意，所以Cocos团队后来推出了两个方案，一个是固定高度，一个是固定宽度。

固定高度和固定宽度还做了一个很大的变化–让VisibleOrigin设置为0，也就是说，可视区域不再区中对齐，而是靠左或者下对齐。

4.固定高度

cc.ResolutionPolicy.FIXED_HEIGHT

固定高度，让高度这一边固定，让另外一边等比(高度缩放的比例)缩放。如果缩放后宽度大于设备宽度，则多余部分会不显示；如果缩放后宽度小于设备宽度，可能造成两侧出现黑边。但是WinSize和VisibleSize值相同，宽高比例跟FrameSize一致。

5.固定宽度(与固定高度相似)