全面屏手机适配指引

Creator 2.x
#1

最近把公司游戏做了下全面屏的适配，在这里简单写下方案，供大家参考下

我们游戏以1280*720分辨率为设计原型，即16：9
需要做适配的比列为
2:1(现在的全面屏手机的比例大概在这个范围左右)
4:3(主要考虑好些人在拿着ipad玩游戏）

从上图可以看出
1. 从16:9到2:1，屏幕宽度变得更长了，所以宽度有富余，适配高度，即Canvas的FitHeight。
2. 从16:9到4:3，屏幕宽度减少，所以需要适配宽度FitWidth,保证界面UI可以排的下。
当我们选择一种适配方式时，屏幕的width或height会等比列的缩放，所以会留出许多空白，这时候就需要根据界面元素，使用widget组件进行自适应调整。

刘海屏适配方案：
1.安卓，安卓系统可以选择不使用刘海区域（一般系统会自动填平刘海）。
<meta-data android:name="android.max_aspect" android:value="2.4" />
安卓手机需要在配置文件中添加以上参数，才能使游戏全屏显示，value值自行填写，意思是app可支持的最大屏幕比例。
2.苹果，强制要求使用刘海区域，所以需要在屏幕左右两端留出一定的宽度（刘海的宽度）。
3.苹果x下方有虚拟home键，对于需要从下方滑动的UI会造成冲突,根据使用场景自行调整。
4.因为矩形圆角屏幕，需要考虑4个角是否会遮挡UI元素，留出相应距离。

判断iPhone刘海高度的简单方法
let v2 = cc.winSize
let rect = cc.director.getSafeAreaRect() //忘了啥时候支持的api，1.9.0是支持的
刘海高度=Math.ceil(v2.width - rect.width)/2

以上只是粗略的写了下实现方案，其实适配还是蛮简单的，主要工作还是UI的搭建，多多使用widget组件，实现自适应UI。

15赞
#2

感谢分享

1赞
#3

横屏这样判断是可以的，但竖屏的时候，刘海与上滑区域的大小是不一样的，例如iPhone X
横屏的safeAreaInsets = (0, 44, 21, 44)
竖屏的safeAreaInsets = (44, 0, 34, 0)

#4

mark

1赞
#5

mark

#6

mark

#7

适配的完美吗？在刘海屏上黑边总是在右边，左边的刘海遮住部分游戏界面…

#8

适配的工作其实就是UI的调整，这个需要根据自己游戏调整。
例如可以在UI上加上widget组件，可以自己写脚本，判断是否是刘海屏，如果是刘海屏，就将widget左/右距离调大，避开刘海就行了。

#9

那竖屏的该如何呢？

#10

是自己定4个点吗, 不是很懂

#11

竖屏的话，也差不多。无特殊需求，一般勾选Fit Width，在高度上使用Widget组件来适配即可。

#12

每个手机的刘海屏高度不一样，我怎么知道这个刘海屏多高呀？

#13

其实需要单独适配的只有iphone的刘海（工作量很小），Android可以不用管，其它正常适配即可。

#14

小米八也有刘海，不需要单独配置吗

#15

不需要，Android默认不会使用刘海区域。

#16

我刚刚在小米八试了，和iphonx效果一样的，难道小米八不是安卓吗

#17

能不能给我下你说单独适配的iphone刘海的代码给我参考下呢

#19

如果你在Android设置了允许window扩展到刘海区，那么你就得进行适配了，可以按照和Iphone全面屏一样的适配。

#20

是不是要知道市面上面有刘海屏的机子，然后统一适配？这个是iphonex 的，小米八也是这样的，我打算将蓝色区域的移到刘海屏下面，这样就出现了，我该怎么知道该机型是否有刘海屏了？

#21

不需要搞这么麻烦的，Android直接设置不允许window扩展到刘海区，只处理iphone的全面屏就行。