Cocos2d-JS的屏幕适配方案

Cocos2d引擎为游戏开发者提供了屏幕适配策略（Resolution Policy）解决方案。

使用方式

1. 设置屏幕适配策略（Resolution Policy）

　　若是你尚未用过Resolution Policy，只须要在游戏载入过程完成以后（cc.game.onStart函数回调中），调用下面的代码：

cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL);

　　setDesignResolutionSize函数的前两个参数是你想要在你的代码中使用的游戏分辨率，第三个参数就是你选择的适配方案。引擎中内置了5种适配方案

　　若是你已经设置了设计分辨率，那么你能够直接设置你的Resolution Policy：

cc.view.setResolutionPolicy(cc.ResolutionPolicy.NO_BORDER);

 　　原生游戏中游戏老是使用所有屏幕空间，可是在WEB端你的网页中也许除了游戏还有别的视觉或文字元素，或者也许你须要给你的游戏设计一个漂亮的边框。因此 Cocos2d-JS中Web引擎的适配方案会默认适配游戏Canvas元素的父节点，若是你但愿游戏场景适配浏览器屏幕，那么只须要将Canvas直接 放置到body下就能够了

 

2. Resolution Policy的意义

使用Resolution Policy的好处很明显，不论设备屏幕大小如何，也不论浏览器窗口的宽高比，你的游戏场景都会被自动放缩到屏幕大小。更重要的是，在游戏代码中，你将永 远使用你所设计的游戏分辨率来布置游戏场景。好比说，若是你将设计分辨率设置为320 * 480，那么在游戏代码中你的游戏窗口右上角坐标将永远是(320, 480)(在FIXED_WIDTH模式高度可能会被缩放，一样在FIXED_HEIGHT模式下宽度可能存在缩放的状况，具体看下文说明)。

3. 监听浏览器窗口大小变化事件

新的适配方案容许在浏览器大小变化的时候自动从新尝试适配。好比说，当用户拖拽来改变浏览器大小，或者更有用的状况，当他们转动本身手机方向的时候。游戏中任意时刻均可以开启这种行为，只须要调用cc.view的resizeWithBrowserSize函数：

cc.view.resizeWithBrowserSize(true);

 

 为了更灵活得应对变化，咱们为cc.view提供了一个新的函数，你能够经过setResizeCallback函数注册一个回调函数来监听浏览器窗口大小变化事件：

cc.view.setResizeCallback(function() {
    // 作任何你所须要的游戏内容层面的适配操做
    // 好比说，你能够针对用户的移动设备方向来决定所要应用的适配模式
});

 

 

4. Fullscreen API

Fullscreen API是浏览器容许Web页面在得到用户全屏幕的一个新的制定中的API。

Cocos2d-JS在移动端浏览器中会尝试自动进入全屏幕来给用户更好的游戏体验（须要指出并非全部浏览器都支持这个API）。

另外一方面，桌面端几乎全部现代浏览器都支持Fullscreen API，若是你但愿使用这个API，Cocos2d-JS也简化了它的使用方式：

• 尝试进入全屏模式（须要用户交互）: cc.screen.requestFullScreen(targetElement, onFullScreenCallback);
• 检测是否处于全屏模式: cc.screen.fullScreen();
• 退出全屏模式: cc.screen.exitFullScreen();

重要概念

　　1. 游戏外框 Frame

　　　　游戏外框是你的游戏Canvas元素的初始父节点，通常状况下，它是html文档的body元素。可是若是你愿意，它能够是DOM结构中的任意容器节点。Canvas元素的初始大小并不重要，屏幕适配过程当中它会被自动放缩来适应你设置的外框大小。 再次提醒，若是你但愿游戏窗口适应整个浏览器窗口，那么只须要将Canvas元素直接放在body下。

　　2. 游戏容器 Container

　　　　在Cocos2d-JS的初始化进程中，引擎会自动将你的Canvas元素放置到一个DIV容器中，而这个容器会被加入到Canvas的原始父节点（游戏外框）中。这个游戏容器是实现屏幕适配方案的重要辅助元素，你能够经过cc.container来访问它。

　　3. 游戏世界 Content

　　　　游戏世界表明游戏内使用的世界坐标系。

　　4. 视窗 Viewport

　　　　视窗是游戏世界相对于游戏Canvas元素坐标系中的坐标及大小.

　　5. 容器适配策略 Container Strategy

　　　　容器适配策略负责对游戏容器和游戏Canvas元素进行放缩以适应游戏外框。

　　6. 内容适配策略 Content Strategy

　　　　内容适配策略负责将游戏世界放缩以适应游戏容器，同时也会计算并设置视窗。

 

系统预设适配模式

　　在Cocos2d-JS中预设了5种适配模式，下面将图解每种适配模式的行为。图中红色方框指示的是游戏世界的边界，而绿色方框指示的是Canvas元素的边界。

全部适配模式都是由一个容器适配策略搭配一个内容适配策略所组成的，括号中显示的是每一个模式的构成方式。

　　1. SHOW_ALL (PROPORTION_TO_FRAME + SHOW_ALL)

 　　　　SHOW_ALL模式会尽量按原始宽高比放大游戏世界以适配外框(Frame)，同时使得游戏内容所有可见，因此浏览器宽高比不一样于游戏宽高比时，窗口中会有必定的留白。留白部分的颜色或背景能够经过设置外框的CSS属性来修改。

 　  

　　2. NO_BORDER (EQUAL_TO_FRAME + NO_BORDER)

　　　　NO_BORDER模式会尽量按原始宽高比放大游戏世界以适配外框，而且保证不留空白。因此浏览器宽高比不一样于游戏宽高比时，游戏世界会被部分切割。同时，在这种状况下，cc.visibleRect表明的就是Canvas在游戏世界中的视窗，大小比cc.winSize要小一些。

　　3. EXACT_FIT (EQUAL_TO_FRAME + EXACT_FIT)

　　　　EXACT_FIT模式会忽略原始宽高比放大游戏世界以彻底适应外框，因此浏览器宽高比不一样于游戏宽高比时，游戏世界会被必定程度拉伸。　　　　

　　　　FIXED_WIDTH模式会横向放大游戏世界以适应外框的宽度，纵向按原始宽高比放大。结果有两种可能，相似与SHOW_ALL模式的结果（如 图），或者类于NO_BORDER模式。它与前面两种模式的差异在于，在FIXED_WIDTH模式下游戏世界坐标系等同于Canvas元素坐标系，而且 Canvas元素必然占满整个外框。

　　　　注意下与SHOW_ALL模式的区别，此时Canvas大小是整个外框大小，因此可显示内容区域实际上比SHOW_ALL模式更多。

　　5. FIXED_HEIGHT (EQUAL_TO_FRAME + FIXED_HEIGHT)　　　　

　　　　与前一个模式相反，FIXED_HEIGHT模式会纵向放大游戏世界以适应外框的高度，横向按原始宽高比放大。结果同上。

　　　　在这个模式下，与NO_BORDER模式的区别是此时游戏世界坐标系和大小等同于Canvas坐标系。

 

用系统预设策略来构建适配模式

如你所看到的，全部预设模式都是预设策略的组合，你也能够作到一样的事情，系统预设策略以下所示：

　　Container strategies: 容器适配策略

    cc.ContainerStrategy.EQUAL_TO_FRAME // 使容器大小等同于外框
    cc.ContainerStrategy.PROPORTION_TO_FRAME // 使容器大小按原始宽高比放大以适应外框
    cc.ContainerStrategy.ORIGINAL_CONTAINER // 原始容器大小

 

　　Content strategies 内容适配策略

    cc.ContentStrategy.SHOW_ALL
    cc.ContentStrategy.NO_BORDER
    cc.ContentStrategy.EXACT_FIT
    cc.ContentStrategy.FIXED_WIDTH
    cc.ContentStrategy.FIXED_HEIGHT