####1. 添加全面屏手机的分辨率
#####打开Creator引擎的安装目录
/Applications/CocosCreator.app/Contents/Resources/static/preview-templates/boot.js
#####打开该文件, 添加相应分辨率大小.
// init device resolutions
var devices = [
{ name: ‘IPhone X’, width: 812, height: 375, ratio: 3 },
];
#####打开预览可以发现在左上角多了IPhone X 预览的分辨率项.
####2. 适配策略, 按高适配(fixedHeight)
游戏的方向 :横屏。
设计分辨率 :1136 * 640。
全面屏之前 :按宽适配, 背景图做高。
适配的缺点 :图片被拉伸,纵向被压扁,影响游戏体验。
#####正常分辨率之下:
#####全面屏分辨率之下:
我们可以明显的看到,原先适配策略在全面屏下的弊端
解决策略, 将原先的按宽适配修改为按高适配, 然后把背景图片做宽
#####打开Creator引擎的安装目录 :
/Applications/CocosCreator.app/Contents/Resources/engine/bin/cocos2d-js-for-preview.js
#####打开该文件, 找到 setResolutionPolicy方法, 并添加以下代码.
setResolutionPolicy: function(resolutionPolicy) {
//当前屏幕尺寸 > 设计分辨率的时候, 将按宽适配修改为按高适配
var isFullScreen = cc.view._frameSize.width / cc.view._frameSize.height > 1136/640;
resolutionPolicy = isFullScreen ? cc.ResolutionPolicy.FIXED_HEIGHT : cc.ResolutionPolicy.FIXED_WIDTH;
},
#####节点中添加Widget组件布局, 位置不用调整, 这样只需要将背景图做宽或者做拉伸就好了.
#####适配Iphone X 这种刘海屏的话, 则只需要将两侧节点相应的调整位置就好了!