JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案

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

 
     
 
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 

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