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

概述我希望下面所说的，通俗易懂，能让你们明白的很透彻，请耐心看下去。 1.为啥要屏幕适配 因为他喵的，手机屏幕分辨率五花八门，千奇百怪，应有尽有。等等，还有平板，pc浏览器（做h5游戏，能不在pc浏览器上跑跑么）。 设备 屏幕尺寸 分辨率(pt) Reader 分辨率(px) 渲染后 PPI iPhone 3GS 3.5吋 320x480 @1x 320x480   163 iPhone 4/4s 3

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

1.为啥要屏幕适配

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

设备	屏幕尺寸	分辨率(pt)	Reader	分辨率(px)	渲染后	PPI
iPhone 3GS	3.5吋	320x480	@1x	320x480		163
iPhone 4/4s	3.5吋	320x480	@2x	640x960		330
iPhone 5/5s/5c	4.0吋	320x568	@2x	640x1136		326
iPhone 6	4.7吋	375x667	@2x	750x1334		326
iPhone6 Plus	5.5吋	414x736	@3x	1242x2208	1080x1920	401

这仅仅是苹果的分辨率，安卓的我就不说了。

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

首先要说设计尺寸，就是设计游戏效果图的尺寸，比如说 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个

@H_746_419@<span > </span><canvas ID="gameCanvas" wIDth="640" height="960"></canvas> @H_746_419@

    <span >	</span>cc.vIEw.setDesignResolutionSize(640,960,cc.ResolutionPolicy.<span >FIXED_WIDTH</span><span >);</span>

@H_746_419@ 理论不多说了，这两个地方改成你的设计尺寸， 如果竖屏采用 cc.ResolutionPolicy. FIXED_WIDTH,横屏则采用cc.ResolutionPolicy.FIXED_HEIGHT;

如果想兼容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);

总结

以上是内存溢出为你收集整理的cocos2d-js 新手入门 2.屏幕适配全部内容，希望文章能够帮你解决cocos2d-js 新手入门 2.屏幕适配所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。