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下就可以了：

<body>

    <canvas id="gameCanvas"></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();

4.4.3 重要概念

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

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

本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍：JavaScript强化教程​ —— Cocos2d-JS的屏幕适配方案
 

JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案的更多相关文章

  1. JavaScript强化教程 -- cocosjs场景切换

    场景切换 在main.js,将StartScene作为我们初始化运行的场景,代码如下: cc.LoaderScene.preload(g_resources, function () { cc.dir ...

  2. JavaScript强化教程——jQuery AJAX 实例

    什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...

  3. JavaScript强化教程 - 六步实现贪食蛇

    1.首先创建div 并且给div加样式 <div id="pannel" style="width: 500px;height: 500px;z-index: 1; ...

  4. JavaScript强化教程——JavaScript 总结

    本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使得网站的动态性和交互性更强. 你已经学习了如何创建对事件的响应,验证表单,以及如何根据不同的情况运行不同的脚本. 你也学到了如 ...

  5. JavaScript强化教程——jQuery UI API 类别

    ---恢复内容开始--- 主要介绍:JavaScript强化教程​—— jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能.jQuery UI 支持颜色动 ...

  6. JavaScript强化教程——Cocos2d-JS中JavaScript继承

    javaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求.由于Cocos2d-JS引擎是从Cocos2d-x演变而来 ...

  7. Cocos2d-JS的屏幕适配方案

    Cocos2d引擎为游戏开发者提供了屏幕适配策略(Resolution Policy)解决方案. 使用方式 1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolut ...

  8. Unity2D多分辨率屏幕适配方案（转载）

    一下内容转自:http://imgtec.eetrend.com/forum/3992 此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有 ...

  9. cocos2dx屏幕适配方案

    我们在利用cocos2dx来开发游戏时,在开始时就不可避免的会遇到屏幕适配问题,来使我们的游戏适应移动终端的各种分辨率大小.目前,大家采用的屏幕适配方案不一,网上的资料也比较丰富,下面我也将自己使用的 ...

随机推荐

  1. 浅谈ThinkPHP3.2的子域名部署和路由优化（一）

    前言:建立一个网站系统,往往包含多个子网站,例如PC官网,移动端官网,后台管理,数据源自一个相同的数据库,整个架构上,从ThinkPHP来看,可以大体理解为Model(M)是一样的,Controlle ...

  2. Security9：查询Login被授予的权限

    在给一个Login授予权限时,发现该Login已经存在,其对应的User也存在于指定的DB中,查看该Login在指定DB中已被授予的权限. 1,查看Login的Server PrincipalID s ...

  3. Sql Server系列：嵌套查询

    嵌套查询是指一个查询语句嵌套在另一个查询语句内部的查询.嵌套查询也就子查询,在SELECT子句中先计算子查询,子查询结果作为外层另一个查询的过滤条件,查询可以基于一个表或多个表.子查询中可以使用比较运 ...

  4. VS2015签名丢失解决办法

    废话少说,直接上问题和解决办法, 问题:VS2015安装后运行程序会发现这个问题 解决办法 1.下载SignTool.exe签名文件 2.将签名文件放入 C:\Program Files (x86)\ ...

  5. javascript运动系列第六篇——轨迹和投掷

    × 目录 [1]运动轨迹 [2]拖拽轨迹 [3]投掷 前面的话 一般地,不同的运动形式会产生不同的轨迹.但仅凭肉眼去识别运动轨迹,其实并不是很直观.因此,在页面中显示运动轨迹,是一个重要的问题.物体初 ...

  6. Android 之 ProgressDialog用法介绍

    布局文件测试: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" androi ...

  7. 最详细的网站改版SEO优化指南：如何让排名不降反升

    我知道,网站改版很是让人头疼.首先,这个过程需要很长时间还有大量工作要做,并且通常结果不会如你的预期.其次,改版确实有破坏之前为 SEO 所做努力的风险. 但不要因为通常网站改版带来排名下降就认为这是 ...

  8. Quartz 在 Spring 中如何动态配置时间--转

    原文地址:http://www.iteye.com/topic/399980 在项目中有一个需求,需要灵活配置调度任务时间,并能自由启动或停止调度. 有关调度的实现我就第一就想到了Quartz这个开源 ...

  9. C语言 基础练习40题

    一.题目 1.输入2个整数,求两数的平方和并输出. 2. 输入一个圆半径(r)当r>＝0时,计算并输出圆的面积和周长,否则,输出提示信息. 3.函数y=f(x)可表示为: 4.编写一个程序,从4 ...

  10. Unity之Animation动画

    Unity之Animation绘制动画 这篇文章做最简单的动画,让一个立方体从左边移动到右边. 1.创建一个Unity的新工程,名为TestAnimation,点击Create And Open按键, ...