- 浏览: 26306 次
最新评论
本文为 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 702本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 依赖注入
2016-09-28 17:10 638本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— Select(选择框)
2016-09-23 17:14 820本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 控制器
2016-09-21 17:22 590本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 简介(10)
2016-09-14 17:41 525本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— 与php服务器
2016-09-12 17:49 1286本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS自动JSB绑定规则修改
2016-09-09 18:08 1181本文为 H5EDU 机构官方 HT ... -
JavaScript强化教程 —— 资源打包工具的使用及资源的异步加载处理
2016-09-08 17:45 766本文为 HTML5培训 机构官方 HTML5培训 教程,主要介 ... -
JavaScript强化教程 —— Cocos2d-JS极速调试技巧
2016-09-05 16:18 859本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS游戏快速接入微信JS-SDK
2016-09-02 16:07 1039本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程—— 内置粒子系统
2016-08-29 16:00 761本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——JavaScript Math(算数) 对象
2016-08-26 16:33 552本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 -- cocosjs场景切换
2016-08-24 16:11 1372本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
CSS基础教程 -- 媒体查询屏幕适配
2016-08-22 15:15 1097本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JQuery强化教程 —— jQuery Easing
2016-08-18 14:54 805本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
fullPage教程 -- 整屏滚动效果插件 fullpage详解
2016-08-17 15:21 831本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——获取内容和属性
2016-08-15 15:35 463本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——jQuery 动画2
2016-08-12 14:12 627本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
bootstrap教程(二) —— 列表组listgroup
2016-08-11 14:46 637本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
bootstrap教程(二)——导航条
2016-08-08 16:22 546本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ...
相关推荐
资源名称:Cocos2d-x实战:JS卷——Cocos2d-JS开发内容简介:本书是介绍Cocos2d-x游戏编程和开发技术书籍,介绍了使用Cocos2d-JS中核心类、瓦片地图、物理引擎、音乐音效、数据持久化、网络通信、性能优化、多平台...
由于Cocos2d-x支持多种编程语言(包括C++、JavaScript和Lua),Cocos2d-JS意味着开发者可以采用JavaScript来构建游戏项目。 4. PDF电子书下载:这是提供给读者的下载格式,即PDF(便携式文档格式),它是一种通用的...
这个高级开发教程的源代码旨在帮助开发者深入理解Cocos2d-x的内部工作原理,掌握其高级特性,并提升游戏开发技能。Cocos2d-x基于C++,并提供了Lua和JavaScript的绑定,使得开发者可以选择适合自己的编程语言进行游戏...
Cocos2d-JS是一款强大的2D游戏开发框架,它结合了JavaScript的灵活性与Cocos2d-x的高效性能,让开发者能够轻松地创建跨平台的游戏。本篇将深入探讨Cocos2d-JS的游戏开发知识,从基础到进阶,帮助你掌握这一利器。 ...
本篇将围绕"iOS游戏应用源代码——cocos2d-cocos2d-iphone-Release.zip"这一主题,深入探讨cocos2d框架的核心特性以及如何利用它来构建游戏。 cocos2d是基于Objective-C的开源游戏框架,特别针对iPhone和iPad平台...
"cocos2d-cocos2d-iphone-extensions.zip"这个压缩包包含了cocos2d-iphone的一个特定版本(e42002b)的源代码及其扩展,对于想要深入了解cocos2d-iphone的工作原理、优化游戏性能或者自定义功能的开发者来说,这是一...
《Cocos2d-x实战 JS卷 Cocos2d-JS开发》是一本深入探讨Cocos2d-x游戏引擎JavaScript版本使用的专业书籍。Cocos2d-x是全球范围内广泛采用的游戏开发框架,尤其适用于2D游戏的制作,而Cocos2d-JS则是其JavaScript接口...
Cocos2d-JS是Cocos2d-x引擎的一个分支,它结合了JavaScript的易用性和C++的高性能,为游戏开发提供了一个高效、便捷的解决方案。 首先,Cocos2d-JS的核心概念包括场景(Scene)、层(Layer)、精灵(Sprite)、动作...
总的来说,"Cocos2d-js项目教程和Cocos2d-JS开发之旅"涵盖了从基础概念到高级技术的全面内容,无论你是初学者还是有一定经验的开发者,都能从中受益。通过学习,你将能够熟练运用Cocos2d-js开发出富有创新和吸引力的...
Cocos2d-JS 是一个基于 JavaScript 的游戏开发框架,它是 Cocos2d-x 的 JavaScript 版本。这个“Cocos2d-JS---demo”压缩包包含的是使用 Cocos2d-JS 开发的游戏或应用的示例,用于展示其功能和效果。通过将这些 demo...
Cocos2d-Js是Cocos2d-x家族的一员,是一个跨平台的、基于JavaScript的开源游戏引擎,支持创建2D游戏、交互式图书和其他富媒体应用。通过Cocos2d-Js,开发者可以用一种语言编写代码,然后在多个平台上运行,包括Web、...
《Cocos2d-JS开发之旅》是一本深入讲解Cocos2d-JS框架的完整版教程,适合希望使用HTML5技术开发原生手机游戏的开发者。这本书详细介绍了Cocos2d-JS 3.10版本及其与CocosStudio 1.6版本的兼容性,为读者提供了一个无...
《Cocos2d-x实战 JS卷》是一本深入探讨Cocos2d-x游戏开发的专著,主要聚焦于使用JavaScript语言进行游戏编程。Cocos2d-x是一个开源的游戏开发框架,广泛应用于移动设备和桌面平台,支持iOS、Android、Windows等多...
cocos2d-x 是一个跨平台的游戏开发框架,它基于C++,同时提供了Lua和JavaScript的绑定,让开发者可以方便地在多种操作系统上创建2D游戏、演示程序和其他图形交互应用。这个“cocos2d-x-3.8.zip”压缩包包含的是cocos...
《Cocos2d-x实战 JS卷 Cocos2d-js开发》是一本专注于使用JavaScript进行Cocos2d-x游戏开发的专业书籍。随书源码包含了从第13章到第24章的示例代码,由于文件大小超出上传限制,源码被分为两个压缩包。在这些章节中,...
通过对"iOS游戏应用源代码——cocos2d-CleverBumblebee-d9b2612.zip"的分析,我们可以深入了解Cocos2d的使用方法以及iOS游戏开发的关键技术。 Cocos2d是一款开源的2D游戏引擎,广泛应用于iOS、Android等平台。它...
cocos2d-x 是一个开源的游戏开发框架,使用 C++ 语言编写,支持多平台发布,包括 iOS、Android、Windows、macOS、Linux 和 Web。cocos2d-x v3.16 是该框架的一个版本号,本文档主要介绍了该版本的安装流程以及环境...
打开浏览器,输入 cocos2d-x.org,然后选择 Download,本教程写作时最新版本为 cocos2d-1.0.1-x-0.9.1。下载完成后,解压到当前文件夹,双击打开文件夹,查看里面有什么东西,红圈部分就是我们要安装使用的文件。 ...
《cocos2d-js/lua游戏解密套件详解》 在移动游戏开发领域,cocos2d-js和cocos2d-lua是常见的游戏引擎,它们为开发者提供了便捷的跨平台开发工具,使得游戏可以在iOS、Android等多个平台上运行。然而,随着游戏市场...
《Cocos2d-x实战Lua卷》是一本深入探讨Cocos2d-x游戏开发与lua脚本结合使用的专业书籍。Cocos2d-x是一个开源的游戏引擎,广泛应用于2D游戏开发,而Lua则是一种轻量级的脚本语言,以其简洁易学、高效灵活的特点,常被...