Please I wish have an example for safe area for iPhone X and new android phone
which new android phone ?
I just recently did some work for iPhone X. (Some example below, Android would be similar but get any ‘safeArea inset’ values from the Android libraries on Java and send back to cocos through JNI)
iOS
You will need to get the values from an iOS ViewController to be on the safe side if Apple changes anything or if new phones with different insets release in the future as opposed to making hard coded values.
Apple has some functionality to get this from iOS.
Ex:
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
if (@available(iOS 11.0, *)) {
CGFloat bottomInset = [UIApplication sharedApplication].keyWindow.safeAreaInsets.bottom;
CGFloat leftInset = [UIApplication sharedApplication].keyWindow.safeAreaInsets.left;
UIStateCache::getInstance()->iPhoneXOffset = Vec2(leftInset/2.0f, bottomInset/2.0f);
[self setNeedsUpdateOfHomeIndicatorAutoHidden];
}
}
^ I put this inside the RootViewController.mm of the cocos2d-x project, but if you have more iOS classes in your project you can do this elsewhere. Be sure to use objective-C++ so you can cache values to a C++ file for cocos. (You can also get .right, .top etc for the full safeAreaInset Rect. I use it as a Vec2 in my specific application cause it suited my needs best.
UIStateCache::getInstance()->iPhoneXOffset is where I store a Vec2 for the horizontal and lower offsets (note this is on a landscape only project, so you might need to re-cache the values on orientationChanged if you support multiple orientations etc. Note this value defaults to Vec2::ZERO for all other devices. Note UIStateCache is a custom singleton I have in my project to cache and process certain UI values etc. You will need to store the safeArea someway or another, I prefer to cache most things in specific singleton classes.
Then, in all my UI Layer classes, I use this offset value to modify some layouts.
**To clarify, I found other threads in this forum that allow the view to be adjusted to the safe area.
My example, and my goal, was to render fullscreen for iPhone X, but to adjust UI classes within certain constraints. If this is your goal, this is the way. Otherwise just render cocos inside the safe area only (but you will have black boxes on the outsides with resulted in several 1 star reviews on one of my apps)
The proper way to do these ‘awkward’ screens is to render backgrounds and art full screen, but render UI and controls inside safeAreas as seen in the image. Buttons stay in safeArea. Art renders full screen.
I tested cocos2d-x v3.17.1 on android P simulator with notch and it just adds black space to make it look like a status bar
IzzyJM - the ideal way is to never use black space on any screen. If you open any AAA or professional app it utilizes all screen space always. I noticed newer versions of cocos have a similar function to the one I pasted (In the Director class, getSafeAreaRect() or something like that, most likely cross platform as well). So you can use that, I am on an older version still so I just wrote my own functions.
This is the “compatibility mode”, if you compile against target API 27 or lower. With target API 28 and higher it shouldn’t show a black bar. And as @tdebock wrote in his last comment, the Director class has a method for retrieving the data for the safe area. It was changed in cocos v3.17.1 to include the feature from Android.
thank you all, please I wish a example of getSafeAreaRect() in java script
Please post an exemple, tanks you
what if we are targeting API 28 and the black bar still shows on android phones with a notch what could be the reason for that ?
Hmm. That’s weird. It shouldn’t. I don’t have a real device with a cutout, so I can only test it on the Pixel phones with emulated cutout.
What’s the operating system on your testing device? Is it API 28 or below? That’s the only reason, I came up with.
1 Like
its only on v3.17.1, on 3.17.2 the displays in back of cut out, example -> ( Android P Notch v3.17.2 misplacing banner )