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的屏幕适配方案