浅谈全面屏适配

####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 这种刘海屏的话, 则只需要将两侧节点相应的调整位置就好了!

8赞

mark

canvas组件的fit Height打钩就行了,效果就是横屏的时候固定高度

我非常好奇崩坏3是如何做适配的

动态选择适配, 如果是在非全面屏的情况下, 用的是fixWidth适配.

这句应该是:var isFullScreen = cc.view._frameSize.width / cc.view._frameSize.height > 1136/640;漏了个height

但是 原生打包不用这个引擎呢,还没找到该怎么改

这样处理不就是showall么?fixed width和fixed height全勾就行了

1赞

这个只是 拉伸背景

mark

mark

mark

mark

崩坏三是u3d做的,适配比cocos操作简单很多

mark

我感觉全面屏适配最困难的地方是怎么区分出哪些手机有刘海…

1赞

适配简单啦:wink:

为啥我谷歌调试用IPHONE X模式, 打印出来的寛高有时候是375812然后转换横屏就变成19201080了

mark.