我希望下面所说的,通俗易懂,能让你们明白的很透彻,请耐心看下去。
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;
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);