iPhone X notch in screen

Screen.safeArea works for iPhone X but what about other devices? When used and applied you get a space above across all devices even if the status bar is disabled. If that space is supposed to be the status bar height, there should be an API to access this value to account for it (Screen.statusBarHeight) or Screen.safeArea should account for it when needed.

 

You can start with something like this: https://gist.github.com/Abuki/7b6e36c44519f422d5d69a07f5ba9bc8
This is my script that works on iPhone X portrait mode (you can easily adjust it).
You create empty transform in the canvas, then you add this script to it and all other objects as child of this transform so they are children of this safe rect.

 

Hi jason,

I check this json file didn't find any iPhoneX settings but the build app still not has the black area. I want the black area because I want to keep the layout resolution design before. Would you please show me how to show the black area? Thanks.

 

If you're using a storyboard option for the launch images, so basically any option other than None for the Launch Screen Type in Unity, then you will automatically have X support. I'm sorry I'm not sure how to filter the X support when using these kinds of storyboard options.

 

Can anyone list the actual values iPhoneX returns for Landscape and Portrait? Would save having to go buy the device, just to test...

Also, I found a snippet that seems a little more readable than the example above.

Code (CSharp):

1. void ApplySafeArea(Rect area)
2.     {
3.         var anchorMin = area.position;
4.         var anchorMax = area.position + area.size;
5.         anchorMin.x /= Screen.width;
6.         anchorMin.y /= Screen.height;
7.         anchorMax.x /= Screen.width;
8.         anchorMax.y /= Screen.height;
9.         rectTransform.anchorMin = anchorMin;
10.         rectTransform.anchorMax = anchorMax;
11.     }

 

I am interested in those numbers as well. They seem like such a mystery.

 

It's probably me but I don't understand how to apply this script and rectTransform.anchorMin fails to compile.
I suppose I should add a script for detecting orientation change of the screen? And add this script to a UI Panel?

 

If you want a iPhone X specific solution, you can detect iPhone X devices using the following variable:
https://docs.unity3d.com/ScriptReference/iOS.Device-generation.html

 

That looks like it's broken (2017.2p1).

 

Made this a while back hope it helps some people:
https://github.com/qoobit/viewport-mask

 

I actually WANT the black bars for my game. Can you tell me how you got them please!?

 

The way to force this is by not providing any default splash screen images for the iPhoneX, and also not using any storyboard based splash screen either (because a storyboard based approach usually covers all screensizes).... HOWEVER.. and I kinda mean a big HOWEVER.... there's really no point even entertaining this idea. Apple have stated this:

iOS 11 delivers innovative features and the redesigned App Store to hundreds of millions of customers around the world. Your apps can deliver more intelligent, unified, and immersive experiences with Core ML, ARKit, new camera APIs, new SiriKit domains, Apple Music integration, drag and drop for iPad, and more. Starting July 2018, all iOS app updates submitted to the App Store must be built with the iOS 11 SDK and must support the Super Retina display of iPhone X.

So.... if even you did force the black bars your app is not going to pass the submission and review process come July and you would not be able to release your app if it does not support the iPhone X.

 

Hi, I’m currently trying to figure out the best way to support iPhone X atm. The game is poorly made so I can’t really fill out the entire screen so I need to keep it at 4.7. I was wondering if Apple won’t have a problem if I add the safe area for my landscape and some background images instead of black letterbox style.
Currently have an 1136x640 canvas and black walls.

 

I have also noticed that some new games after April does have black bars and have been accepted and released. Does this mean that it would be possible to have black bars? I have also found letterboxed games.

 

I am hoping games are given a little bit more leeway rather than general use applications. There have been plenty of games on the app store to use bars around the screen, even pre iPhone X.

My fingers are crossed. I really don't want to have to completely overhaul my UI, especially as a solo dev, just because Apple wants to throw down the iron fist.

 

Thanks! I didn't know that one!

But it seems the notch problem is now easy to solve also without detecting the type of phone, I'll post a new script soon.

 

I just updated an app with a UI that doesn't take care of the iPhone X safe zones at all (to be honest, it's horrible when used in landscape, buttons go behind the notch..) and it got accepted.
I'm not sure what they'll say about letterboxing though..

 

Thanks a lot qoobit, you saved me some time !
You did a very nice work.

 

For anyone googling etc., this is what Screen.safeArea returns on an iPhoneX device:

Rect for portrait mode: {x:0.00, y: 102.00, width: 1125.00, height: 2202.00}
Rect for landscape mode: {x: 132.00, y: 63.00, width: 2172.00, height: 1062.00}

 

If anyone searching this thread is also looking to demystify how the iPhone X safe area works (and soon other Android notched phones such as the Google Pixel 3 XL) - I've written a detailed article here with sample code and screenshots: https://connect.unity.com/p/updating-your-gui-for-the-iphone-x-and-other-notched-devices. Hope it helps!

 

A bit late to the party but I made a yet another set of scripts "Notch Solution". It can drive the RectTransform's padding according to the reported safe area.

https://github.com/5argon/NotchSolution



(@Firemaw found your article before coming here and helped me made it! Thanks!)

 

Thanks a bunch, that looks awesome! Dealing with the notch is always a hassle.
I'm getting a bunch of compilation errors upon import. Any idea what's up?
Also, do you allow for commercial use?

 

The license is MIT so that's fine. For error I am guessing it is related to C# 7.0? I am not intended to support .NET 3.5 sorry.. if that is not the case, you can use the Issue section in the github instead of here to keep issue organized. Thank you!

 

That was it. Thanks for the info.

 

Some good solutions in this thread, but all deal with UI. I also needed a way to constrain the gameplay camera within the SafeArea. For example, maybe you always want your gamegrid to appear within the safearea, which may be a little left/right/below center depending on the notched device and orientation.

There are some suggestions out there about using a RenderTexture with the gameplay camera, but that approach ignores inputs. I personally tried some direct manipulation of the gameplay camera Orthographic size and transform.position, but the maths made my brain hurt.

Then I remembered that the Gameplay camera viewport can be set, so I set it to match the safearea. You will need to convert the SafeArea in pixel coordinates to the normalized viewport coordinates. But then it's pretty easy to just set the appropriate Camera.rect to that normalized rect.

Note of caution if you rely on Camera.aspect that this will no longer match Screen.width / Screen.height since it will be related to the new viewport values.

Note of caution (#2) There's also some weirdness with working with viewports where height adjustments are simpler than width adjustments. So portrait modes look correct, but landscape modes don't. If you change viewport width, you also need to compensate height if you want the full camera view to be shown. For portrait safe areas, set viewport height to the safearea height. For landscape safe areas, set viewport width to safearea width and then set viewport height to the same viewport width ( a 1:1 ratio).

 

I have recently add what I called Adaptation Component which could interpolate anything that Animator could bind to according to the size of notch. I think you can adapt it for your needs? There is an example that the camera moves backward the more notch take the area. And then the input still works as long as you use EventSystem and GraphicRaycaster/PhysicsRaycaster/PhysicsRaycaster2D properly, since the ray came from camera and would be able to hit the same spot anywhere it moves.

https://github.com/5argon/NotchSolu...umentation/Components/AdaptationComponents.md

Here both the stage and camera changes in a presence of aspect change. There is an another component which change according to cutout % screen taken.

 

This was the 2nd approach I tried. The downside is that some of the notch adjustments require camera shifts to the left/right/down in addition to the orthosize adjustment. That math is much harder, which is why I moved on to Camera viewport