Add iPhone X Screen Layout in Unity Editor!

Unity Engine
,
1

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)

3278724--253552--01.png

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

3278724--253553--02.png
3278724--253553--02.png677×677 114 KB

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

3278724--253557--03.jpg
3278724--253557--03.jpg1554×1309 212 KB

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 :slight_smile:

3278724–253558–iPhoneX_screenLayout.zip (10.3 KB)

17 Likes
2

Nice!

1 Like
3

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

3 Likes
4

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

1 Like
5

Thank you so much!!!

1 Like
6

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

Thanks

3291186--254878--iPhoneX_screenLayout_inverted_landscape.png
3291186--254878--iPhoneX_screenLayout_inverted_landscape.png2436×1125 17.9 KB

3291186--254879--iPhoneX_screenLayout_inverted_portrait.png
3291186--254879--iPhoneX_screenLayout_inverted_portrait.png1125×2436 16.3 KB

10 Likes
7

Great Tip! Thank you :slight_smile:

8

You awesome! Thanks :slight_smile:

9

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

1 Like
10

Thanks :slight_smile:

11

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

12

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

13

What settings do you have on the other game canvas?

14

Ahh thank you for this! Super helpful.

15

I’m not sure if i understood your question…

16

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: Unity Live Help. Hope it helps!

1 Like
17

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.

18

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.

19

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