周大帅
- 浏览: 27907 次
-
最新评论
本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍：JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
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
内容适配策略负责将游戏世界放缩以适应游戏容器，同时也会计算并设置视窗。
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
内容适配策略负责将游戏世界放缩以适应游戏容器，同时也会计算并设置视窗。
分享到：
发表评论
-
JavaScript强化教程 —— 对象创建模式
2016-10-09 17:12 795本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
AngularJs 基础教程 —— 依赖注入
2016-09-28 17:10 709本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— Select(选择框)
2016-09-23 17:14 890本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
AngularJs 基础教程 —— 控制器
2016-09-21 17:22 659本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
AngularJs 基础教程 —— 简介(10)
2016-09-14 17:41 596本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— 与php服务器
2016-09-12 17:49 1350本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
JavaScript强化教程 —— Cocos2d-JS自动JSB绑定规则修改
2016-09-09 18:08 1245本文为 H5EDU 机构官方 HT ... -
JavaScript强化教程 —— 资源打包工具的使用及资源的异步加载处理
2016-09-08 17:45 834本文为 HTML5培训 机构官方 HTML5培训 教程，主要介 ... -
JavaScript强化教程 —— Cocos2d-JS极速调试技巧
2016-09-05 16:18 1006本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
JavaScript强化教程 —— Cocos2d-JS游戏快速接入微信JS-SDK
2016-09-02 16:07 1117本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
JavaScript强化教程—— 内置粒子系统
2016-08-29 16:00 832本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
JavaScript强化教程——JavaScript Math（算数） 对象
2016-08-26 16:33 625本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
JavaScript强化教程 -- cocosjs场景切换
2016-08-24 16:11 1440本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
CSS基础教程 -- 媒体查询屏幕适配
2016-08-22 15:15 1160本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
JQuery强化教程 —— jQuery Easing
2016-08-18 14:54 852本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
fullPage教程 -- 整屏滚动效果插件 fullpage详解
2016-08-17 15:21 883本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
JavaScript强化教程——获取内容和属性
2016-08-15 15:35 500本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
JavaScript强化教程——jQuery 动画2
2016-08-12 14:12 665本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
bootstrap教程（二） —— 列表组listgroup
2016-08-11 14:46 678本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ... -
bootstrap教程（二）——导航条
2016-08-08 16:22 583本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍： ...
相关推荐
《斗地主游戏开发实战——基于cocos2d-x 3框架在iOS系统中的实现》 在游戏开发领域，斗地主是一款深受广大玩家喜爱的扑克游戏，它以丰富的策略性和娱乐性吸引了无数用户。本篇文章将深入探讨如何使用cocos2d-x 3...
本资源包聚焦于使用Cocos2d-x的JavaScript版本（cocos2d-x for js）来实现经典游戏Flappy Bird的开发。Flappy Bird是一款简单却又极具挑战性的休闲游戏，通过控制小鸟穿越由管道构成的障碍物，其简洁的设计和令人...
- Cocos2d-JS 是基于Cocos2d-x 的JavaScript版本，利用HTML5技术可以实现跨平台的游戏开发。 2. **JavaScript基本语法**： - JavaScript 是一种广泛使用的脚本语言，用于网页开发以及游戏开发。 - 学习基础语法...
开发者可能通过Cocos2d的自动适配功能来确保《旋转积木》能在各种设备上流畅运行，并保持良好的视觉表现。此外，为了吸引和留住玩家，游戏可能还包含了成就系统、排行榜、道具商店等社交和激励机制。 为了优化游戏...
由于项目最初是为PC端设计的，开发者可能使用了COCOS Creator的适配功能，允许游戏在不同分辨率的屏幕上正常显示。为了将这款游戏改编成手机端，开发者需要考虑触摸屏操作的适配，例如将键盘控制替换为触摸手势，并...
Cocos Creator 是一个强大的跨平台2D和3D游戏开发工具，它集成了编辑器、渲染引擎、物理系统、动画系统等，支持JavaScript和TypeScript编写代码。2.4.2版本是其一个稳定且功能完善的版本，优化了性能，增加了新的...
1. **Cocos Creator框架**：Cocos Creator是Cocos2d-x系列的最新版本，支持跨平台开发，提供了一整套完整的工具链，包括图形渲染、动画系统、物理引擎、音频处理、资源管理等，让开发者能够快速构建游戏逻辑和交互...
- node.js是一种基于Chrome V8引擎的JavaScript运行环境，用于开发服务器端应用程序。本文档集合了大量的中文教程和文档，方便初学者快速入门。 2. **了不起的Nodejs** - 提供了一系列英文资源链接，覆盖了node....