cocos2dx-js web适配(重点在后面)

一、 cocos 手机游戏常用的屏幕适配方式:
1、ResolutionPolicy::SHOW_ALL

屏幕宽、高分别和设计分辨率宽、高计算缩放因子，取较(小)者作为宽、高的缩放因子。保证了设计区域全部显示到屏幕上，但可能会有黑边。

2、ResolutionPolicy::EXACT_FIT

屏幕宽

与设计宽比作为X方向的缩放因子，屏幕高与设计高比作为Y方向的缩放因子。保证了设计区域完全铺满屏幕，但是可能会出现图像拉伸。

3、ResolutionPolicy::NO_BORDER

屏幕宽、高分别和设计分辨率宽、高计算缩放因子，取较(大)者作为宽、高的缩放因子。保证了设计区域总能一个方向上铺满屏幕，而另一个方向一般会超出屏幕区域。

ResolutionPolicy::NO_BORDER是之前官方推荐使用的方案，他没有拉伸图像，同时在一个方向上撑满了屏幕，但是新加入的两种策略将撼动ResolutionPolicy::NO_BORDER的地位。

ResolutionPolicy::FIXED_HEIGHT和ResolutionPolicy::FIXED_WIDTH都是会在内部修正传入设计分辨率，以保证屏幕分辨率到设计分辨率无拉伸铺满屏幕。

4、ResolutionPolicy::FIXED_HEIGHT

保持传入的设计分辨率高度不变，根据屏幕分辨率修正设计分辨率的宽度。

适合高方向需要撑满，宽方向可裁减的游戏，结合setContentScaleFactor(RH/DH)使用。

5、ResolutionPolicy::FIXED_WIDTH

保持传入的设计分辨率宽度不变，根据屏幕分辨率修正设计分辨率的高度。

适合宽方向需要撑满，高方向可裁减的游戏，结合setContentScaleFactor(RW/DW)使用。

二、传统的手机游戏 app 适配需求
传统的手机游戏 app 按照包的适配，都是全屏游戏，所以屏幕的大小是固定的，顾通常选取 1, 2, 3 适配
方式。使用SHOW_ALL的适配策略可能会产生黑边，要解决黑边可以用填充背景或是修饰边的方法，这里不具体阐述。

三、 cocos-html5 的网页游戏适配需求
1:在手机上有可能全屏打开网页游戏,也有可能在微信里打开网页游戏,微信内置的浏览器会留出一个工具栏
出来;
2:在 PC 上打开网页游戏，浏览器的窗口可以任意变化，任意缩放大小;

四 、如果我们能够忍受网页游戏在手机上有黑边，可以直接采用 SHOW_ALL ;

五 、如果我们不能忍受在网页游戏在手机上运行的时候有黑边，又要兼容 PC 上打开网页游戏后可以任意的改变大小:
1:我们只在初始化的时候 只能采用固定高度与固定宽度;
cc.view.setDesignResolutionSize(DESIGN_WIDTH, DESIGN_HEIGHT, cc.ResolutionPolicy.FIXED_
WIDTH);
这样一启动屏幕区域会充满全屏;
2:应对 PC 上浏览器大小随时改变的情况:
cc.view.setResizeCallback(function() {
cc.view.setDesignResolutionSize(DESIGN_WIDTH, DESIGN_HEIGHT, cc.ResolutionPolicy.SHOW_ALL)
;
cc.director.getRunningScene().on_resize();
});
这里我们使用 SHOW_ALL,这样我们在 PC 上总能显示正确，而在手机上，一般不能像 PC 一样自由的改变
大小；
这样修改后，发现原来的游戏内容不是出现在正确的位置上，因为我们的坐标全局不都基于开始时候的适配
和坐标方式而达到的。为了应对这个问题，我们在应用层做响应的处理。因为我们需要重排所有的游戏元素。
3:重排所有的游戏元素
当我们的大小改变后，我们要重排我们的游戏元素，看上去很复杂，我们需要将我们的所有的节点重新调
整一次。其实很简单，我们在做代码设计的时候，将我们的游戏场景分为几个固定的参考点，比如，四个角
+中心点，在每个地方放一个大的 root,其它所有的元素都基于这些 root,作为这些 root 的孩子。当有 resize
的时候，调用 cc.director.getRunningScene().on_resize();
然后每个场景编写 on_resize 方法,然后根据新的 size,重新调整 这些参考点的 root,就能达到修改适应屏幕的
目的。

*去除黑边的较优策略：*
关于不要黑边的策略，建议使用NO_BORDER和SHOW_ALL结合的方式。
这里提供的思路是：背景缩放使用NO_BORDER，canvas上面所有的元素都放在一个容器上（可以是layer），然后对此layer在setResizeCallback的回调时做对应比例的缩放。（缩放方式参考SHOW_ALL的源码），然后对需要调整位置的元素做on_resize()的调整。