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

一 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 由左辺到右边的时候,大小变了,只要重新调整参考点的位置,那么这样,所有的内容都调整到中
心处了;

相关文章

    本文实践自 RayWenderlich、Ali Hafizji 的文章《...
Cocos-code-ide使用入门学习地点:杭州滨江邮箱:appdevzw@1...
第一次開始用手游引擎挺激动!!!进入正题。下载资源1:从C...
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发...
1.  来源 QuickV3sample项目中的2048样例游戏,以及最近《...
   Cocos2d-x3.x已经支持使用CMake来进行构建了,这里尝试...