Add iPhone X Screen Layout in Unity Editor!

Well, im sure many of you updating their game to support the iPhone X layout, and there are many ways but this is what I do to quick things up and know how to position my UI in the iPhone X…

1- Add iPhone X screen resolution in the Game window (1125 x 2436)



2- Add a new canvas and make sure to change the UI Scale Mode to (Scale with Screen Size) and add the resolution and the Match to (0.5)

3- Add Image UI to the new canvas



4- Add the (iPhone X Screen Layout PNG) as the Source Image and modify its alpha channel to 50

Click to download the iPhoneX_screenLayout.zip



And thats it, now you see how the iPhone X screen layout will look, do your changes to the UI and just turn off or delete the canvas when you done!

Hope this small tip help you ^_^

 

Nice!

 

I set the Canvas's tag to EditorOnly. This way it shows up in the editor, not in build.

 

Thank you for this, very helpful in re-jigging my UI

 

Thank you so much!!!!!!!!!!!

 

I inverted your image, and added a landscape version.
I leave here for anyone to use.

Thanks

 

Great Tip! Thank you ^_^

 

You awesome! Thanks ^_^

 

你是一个天才！在项目里用上了！

 

Thanks ^_^

 

That's nice, but how can I get the corners black? They are transparent.

 

No need for the black frame... this is the dimension of the real visible screen part only.

 

What settings do you have on the other game canvas?

 

Ahh thank you for this! Super helpful.

 

I'm not sure if i understood your question...

 

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!

 

In the Iphone X intro video it did look as though fullscreen video/camera wrapped around the black bar. Personally I think it would be better if it did just crop off in line with bar and they had buttons or horizontal slide out menus in the remaining space. There has already been some speculation that the black bar will interfere with the function of a digital analogue stick, but only time will tell.

 

In the Iphone X intro video it did look as though fullscreen video/camera wrapped around the black bar. Personally I think it would be better if it did just crop off in line with bar and they had buttons or horizontal slide out menus in the remaining space. There has already been some speculation that the black bar will interfere with the function of a digital analogue stick, but only time will tell.

 

hi Danarkayfi, i have quesion, how you do you scale resolution of iphone 8 to iphone x, I am trying to scale it with scale with the screen and i am getting empty space on top of the GUI, I think aspect ratio of iphone 8 and below models are different then iphone 10 models, have you guys find solution for it