如何在iPhoneX安全区(SafeArea)内适配？

Cocos2d-x
#1

如何在iPhoneX安全区(SafeArea)内适配游戏？老游戏如果全屏的话会被遮挡！
之前看了这个https://github.com/cocos2d/cocos2d-x/pull/18276解决方案，现在游戏能全屏了，但是试用SafeArea对游戏界面没有效果。咨询大神cocos2d-x游戏如何实现SafeArea适配！

#2

关注。。最好官方能适配下。。

#3

帮不上忙，只是吐槽一下，苹果是不是他妈的抽风了，所有应用，软件最好都不兼容iPhoneX，让他卖不出去。

1赞
#4

关注下

#5

马赛克，马赛克

#6

改内部节点的wiget 的左右上下相距边界的间距，就可以了，可能还需要美工修图，将UI边界线外补图，额，要判断一下是否为iphoneX，是，采取改wiget的left…等值

#7

这是多大的怨气。。。

#8

这样算一个解决方案。。
https://github.com/biganans/cocos2x-adaptation

#9

感觉最好不要用安全区适配两边留黑。
全面屏的意义就是不留黑边，所以app应该保证全屏显示。

WechatIMG37.jpeg893×274 20.1 KB

参考苹果开发者官网指导
https://developer.apple.com/ios/update-apps-for-iphone-x/

  1. 业务层判断是否为iPhone X，是则对交互组件做如按钮、输入框） 上下左右约束布局。

  2. UI、场景背景可以设计成全屏，交互性的组件（如按钮、输入框）建议设约束值

  • top : 44.0
  • left : 21.0
  • bottom : 34.0
  • right : 21.0

  1. 如果是creator项目，适配应该会很省很多时间。

  2. 买不到真机可以用xcode模拟器跑下每一个UI界面

#10

如果是已有的项目，资源很多，一时无法重新制作相关背景图和动画的话，是无法在iphoneX上全屏幕显示的

#11

Creator PR:

https://github.com/cocos-creator/cocos2d-x-lite/pull/1008

Cocos2D-X PR:

https://github.com/cocos2d/cocos2d-x/pull/18489

使用方法：

JS:

var safeArea = cc.director.getSafeAreaRect();

CPP:

Rect safeArea = cocos2d::Director::getInstance()->getSafeAreaRect();

安全区域只是个区域，不会修改你原来游戏的全屏适配方式。
保证UI元素在SafeArea内即可。即UI布局要依据safe area。

1赞
#12

为啥我拿到的framesize 是 2001x1125

#13

加iphoneX的启动图

#14

启动图用默认的2208*1242大小就可以的

#15

你好 dumganhar. 我cherry-pick 之后发现 js绑定没有。 怎么弄？

#16

你需要重新运行一下自动绑定生成工具：https://github.com/cocos2d/cocos2d-x/blob/v3/tools/tojs/README.mdown

或者你直接拷贝一下：

https://github.com/cocos2d/cocos2d-x/blob/v3/cocos/scripting/js-bindings/auto/jsb_cocos2dx_auto.cpp

中 getSafeArea 相关的绑定代码。

1赞