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

前端之家收集整理的这篇文章主要介绍了cocos2d-js 新手入门 2.屏幕适配前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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个

<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>
 
 理论不多说了,这两个地方改成你的设计尺寸, 如果竖屏采用 
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-x相关文章