因为现有的版本屏幕设计为1280 * 720,可在登陆场景内解决全面屏适配问题
在游戏的登陆界面首先获取屏幕宽高比:
cc.MyWinSize = cc.size(1280, 720); // 当前的屏幕设计尺寸
定义一个变量使用全面屏适配 var CONFIG = {} CONFIG.enableLongScreen = true;
setupLongScreen: function () {
cc.MyWinSize = cc.size(1280, 720);
// iphone6: 1334*720 - 1280*750 > 0
// ipad: 2048*720 - 1280*1536 < 0
// iphone xs max: 2436*720 - 1280*1125 > 0
// cc.view.getFrameSize().width 当前手机的屏幕尺寸宽、.height 当前手机的屏幕尺寸高、
// 如果屏幕尺寸是全面屏手机则使用全面屏变量enableLongScreen,小屏手机不使用全面屏策略。
if (CONFIG.enableLongScreen && cc.view.getFrameSize().width * 720 > 1280 * cc.view.getFrameSize().height) {
// 多分辨率适配方案,全面屏适配方案设置 NO_BORDER(没有边界)
cc.view.setDesignResolutionSize(1560, 720, cc.ResolutionPolicy.NO_BORDER);
cc.winSize.offsetX = Math.floor((720 / cc.view.getFrameSize().height * cc.view.getFrameSize().width - 1280) / 2);
}
else {
CONFIG.enableLongScreen = false;
cc.winSize.offsetX = 0;
}
},
为了兼容长短屏幕、背景还是要用1560 * 720的尺寸
因为设计是在1280*720 的尺寸做的,只需在全面屏的手机做适配策略就可以了。
这时候我们可以根据当前的屏幕尺寸比例,调整界面元素的位置,使其看起来更合理。
if (CONFIG.enableLongScreen) {
var offset = ((720 / cc.view.getFrameSize().height * cc.view.getFrameSize().width) - 1280) / 2;
// 处理需要设置位置的元素的位置。
}
以上这种方法在不改变原有的屏幕尺寸设计兼容全面屏手机,也是有一种偷懒的因素在里面,省了一些工作量。