cocos2dx-jsweb适配（重点在后⾯）
⼀、 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)
;
RunningScene().on_resize();
});
这⾥我们使⽤ SHOW_ALL，这样我们在 PC 上总能显⽰正确，⽽在⼿机上，⼀般不能像 PC ⼀样⾃由的改变
⼤⼩；
这样修改后，发现原来的游戏内容不是出现在正确的位置上，因为我们的坐标全局不都基于开始时候的适配
和坐标⽅式⽽达到的。为了应对这个问题，我们在应⽤层做响应的处理。因为我们需要重排所有的游戏元素。
3：重排所有的游戏元素
当我们的⼤⼩改变后，我们要重排我们的游戏元素，看上去很复杂，我们需要将我们的所有的节点重新调
整⼀次。其实很简单，我们在做代码设计的时候，将我们的游戏场景分为⼏个固定的参考点，⽐如，四个⾓
+中⼼点，在每个地⽅放⼀个⼤的 root，其它所有的元素都基于这些 root，作为这些 root 的孩⼦。当有 resize
的时候，调⽤ RunningScene().on_resize();
然后每个场景编写 on_resize ⽅法，然后根据新的 size，重新调整 这些参考点的 root，就能达到修改适应屏幕的
⽬的。
*去除⿊边的较优策略：*
关于不要⿊边的策略，建议使⽤NO_BORDER和SHOW_ALL结合的⽅式。
这⾥提供的思路是：背景缩放使⽤NO_BORDER，canvas上⾯所有的元素都放在⼀个容器上（可以是layer），然后对此layer在setResizeCallback的回调时做对应⽐例的缩放。（缩放⽅式参考SHOW_ALL的源码），然后对需要调整位置的元素做on_resize()的调整。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。