cocos2d-js 老项目全面屏手机 游戏端适配

因为现有的版本屏幕设计为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;
           // 处理需要设置位置的元素的位置。
       }
以上这种方法在不改变原有的屏幕尺寸设计兼容全面屏手机,也是有一种偷懒的因素在里面,省了一些工作量。

猜你喜欢

转载自blog.csdn.net/W_han__/article/details/93884225