cocos2d-js 新手入门 2.屏幕适配

我希望下面所说的，通俗易懂，能让你们明白的很透彻，请耐心看下去。

1.为啥要屏幕适配

因为他喵的，手机屏幕分辨率五花八门，千奇百怪，应有尽有。等等，还有平板，pc浏览器（做h5游戏，能不在pc浏览器上跑跑么）。

屏幕适配，说通俗些，就是所做的游戏界面，能在大部分手机上能全屏显示，上下或者左右没有黑边，界面元素不会显示不全，而且没有拉伸变形。

首先要说设计尺寸，就是设计游戏效果图的尺寸，比如说 320*480（竖屏游戏）。设计尺寸一旦定好，所有的游戏图片资源则需要根据设计尺寸定大小。

暂定 设计尺寸为 designWidth,designHeight

然后再来说说实际尺寸，实际尺寸很好理解，就是手机屏幕分辨率（微信要减去顶部栏高度，手机部分不能全屏的浏览器要减去 地址栏的高度）

暂定 实际尺寸为 realWidth,realHeight

接下来就是所谓的适配了，适配就是在设计尺寸基础上 分别乘上一个缩放比例

暂定为 scaleW，scaleH

scaleW = realWidth / designWidth

scaleH = realHeight / designHeight

现在说说适配方法：

1.基于宽度适配： 缩放因子为 宽度比例

scaleW = scaleH = realWidth / designWidth

2.基于高度适配： 缩放因子为 高度比例

scaleH = scaleW = realHeight / designHeight

3.等比适配：缩放因子为 高度比例，宽度比例中 较小的一个

scaleW = scaleH = Math.min(realWidth / designWidth,realHeight / designHeight)

4.全屏平铺：缩放因子不等，高度缩放因子为高度比例，宽度缩放因子为宽度比例

scaleW = realWidth / designWidth; scaleH = realHeight / designHeight

多屏适配最基本用法：

1.手机h5游戏：

竖屏游戏 ： 基于宽度适配

横屏游戏 ：基于高度适配

2.平板和pc h5游戏：

横 | 竖屏游戏 ： 等比适配

至于为什么这么用，不懂的可以细问，这里不做累赘。同一套代码，可以实现绝大部分手机屏幕的全屏显示，何乐而不为呢？

2.cocos2d-js适配

回到webstorm项目，打开index.html 和 main.js文件，对应下面2个

<span style="white-space:pre">	</span><canvas id="gameCanvas" width="640" height="960"></canvas>

    <span style="white-space:pre">	</span>cc.view.setDesignResolutionSize(640,960,cc.ResolutionPolicy.<span style="font-family: 宋体; font-size: 9pt; background-color: rgb(228,228,255);">FIXED_WIDTH</span><span style="font-family: Arial,Helvetica,sans-serif;">);</span>

如果想兼容pc端的，那么修改main.js代码为

 if(cc.sys.isMobile) {
    		cc.view.setDesignResolutionSize(640,960,cc.ResolutionPolicy.FIXED_WIDTH);
	} else {    
    		cc.view.setDesignResolutionSize(640,cc.ResolutionPolicy.SHOW_ALL);
	}

3.怎么定设计尺寸大小，以及背景图尺寸大小
首先你要想好你项目 要适配哪些设备（不要说所有机型屏幕你都要适配，那是扯蛋，我遇到过设计尺寸640*960，然后boss说要适配更小屏幕的，没办法，很忧伤的在代码里面进行了再次适配，已哭晕……），然后找到这些设备的分辨率大小，找到最大分辨率和最小分辨率。通常设计尺寸按照最小的来做（注意要考虑retina屏，如果最小的320*480，那可以做成640*960的）

至于背景图，可以分为两种，一种是随便拉伸都没啥问题的(比如纯色背景)，这种大小就随便定一个，到时候全屏拉伸显示就好了；另一种则是带花纹的，不能拉伸的，这种就按照上面所选机型最大的分辨率设计，就不怕屏幕显示不全了。

这里我可以给个设计尺寸和带花纹背景图的尺寸，绝对够用，而且满足绝大部分手机。

设计尺寸640*960（也可以480*800），然后背景图 就640*1336

总结：定设计尺寸640*960（或480*800），背景图640*1336， 修改index.html 和main.js设计尺寸，然后 竖屏，横屏，以及pc都对应好适配类型，剩下的就是开发了。

    cc.view.setDesignResolutionSize(640,cc.ResolutionPolicy.SHOW_ALL);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!