cocos 手游开发与 cocos-html5 页游的屏幕适配

概述  一 cocos 手机游戏常用的屏幕适配方式:     1:FIXED_WIDTH 固定宽度 (竖屏游戏常用)     2:FIXED_HEIGHT 固定高度(横屏游戏常用)     3:SHOW_ALL 会按照设计时的比例显示出来,如果目标屏幕和设计屏幕的比例不一样，会留黑边；     4:其它,我们这里不在讨论  二传统的手机游戏 app 适配需求     传统的手机游戏 app 按照包的适 一 cocos 手机游戏常用的屏幕适配方式: 1:FIXED_WIDTH 固定宽度 (竖屏游戏常用) 2:FIXED_HEIGHT 固定高度(横屏游戏常用) 3:SHOW_ALL 会按照设计时的比例显示出来,如果目标屏幕和设计屏幕的比例不一样，会留黑边； 4:其它,我们这里不在讨论 二传统的手机游戏 app 适配需求 传统的手机游戏 app 按照包的适配，都是全屏游戏，所以屏幕的大小是固定的，顾通常选取 1,2,3 适配 方式。 三 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,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,就能达到修改适应屏幕的

目的。

当 resize 由左辺到右边的时候，大小变了，只要重新调整参考点的位置，那么这样，所有的内容都调整到中 心处了； 总结

以上是内存溢出为你收集整理的cocos 手游开发与 cocos-html5 页游的屏幕适配全部内容，希望文章能够帮你解决cocos 手游开发与 cocos-html5 页游的屏幕适配所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。