Search Unity

  1. Unity 2020.1 has been released.
    Dismiss Notice
  2. Good news ✨ We have more Unite Now videos available for you to watch on-demand! Come check them out and ask our experts any questions!
    Dismiss Notice

Add iPhone X Screen Layout in Unity Editor!

Discussion in 'iOS and tvOS' started by DanarKayfi, Nov 6, 2017.

  1. DanarKayfi

    DanarKayfi

    Joined:
    Aug 27, 2012
    Posts:
    69
    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)

    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

    02.png

    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

    03.png

    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 ^_^
     

    Attached Files:

    Last edited: Nov 6, 2017
  2. IvyKun

    IvyKun

    Joined:
    Sep 28, 2013
    Posts:
    97
    Nice!
     
    DanarKayfi likes this.
  3. HonorableDaniel

    HonorableDaniel

    Joined:
    Feb 28, 2007
    Posts:
    2,965
    I set the Canvas's tag to EditorOnly. This way it shows up in the editor, not in build.
     
    quangtqag, werstein and DanarKayfi like this.
  4. CrankyPeacock

    CrankyPeacock

    Joined:
    Jul 3, 2012
    Posts:
    16
    Thank you for this, very helpful in re-jigging my UI :)
     
    DanarKayfi likes this.
  5. MyrDovg

    MyrDovg

    Joined:
    Jul 13, 2016
    Posts:
    1
    Thank you so much!!!!!!!!!!!
     
    DanarKayfi likes this.
  6. Fonserbc

    Fonserbc

    Joined:
    Aug 7, 2012
    Posts:
    6
    I inverted your image, and added a landscape version.
    I leave here for anyone to use.

    Thanks
     

    Attached Files:

  7. DanarKayfi

    DanarKayfi

    Joined:
    Aug 27, 2012
    Posts:
    69
    Great Tip! Thank you ^_^
     
  8. DanarKayfi

    DanarKayfi

    Joined:
    Aug 27, 2012
    Posts:
    69
    You awesome! Thanks ^_^
     
  9. juyujuyu

    juyujuyu

    Joined:
    Nov 23, 2015
    Posts:
    2
    你是一个天才!在项目里用上了!
     
    DanarKayfi likes this.
  10. DanarKayfi

    DanarKayfi

    Joined:
    Aug 27, 2012
    Posts:
    69
    Thanks ^_^
     
  11. JackJick

    JackJick

    Joined:
    Jun 24, 2013
    Posts:
    8
    That's nice, but how can I get the corners black? They are transparent.
     
  12. DanarKayfi

    DanarKayfi

    Joined:
    Aug 27, 2012
    Posts:
    69
    No need for the black frame... this is the dimension of the real visible screen part only.
     
  13. Lelon

    Lelon

    Joined:
    May 24, 2015
    Posts:
    76
    What settings do you have on the other game canvas?
     
  14. swenson5559

    swenson5559

    Joined:
    Oct 11, 2010
    Posts:
    10
    Ahh thank you for this! Super helpful.
     
  15. DanarKayfi

    DanarKayfi

    Joined:
    Aug 27, 2012
    Posts:
    69
    I'm not sure if i understood your question...
     
  16. Firemaw

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    44
    sama-van likes this.
  17. zmirli_6

    zmirli_6

    Joined:
    Mar 15, 2018
    Posts:
    7
    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. zmirli_6

    zmirli_6

    Joined:
    Mar 15, 2018
    Posts:
    7
    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. rsherzod

    rsherzod

    Joined:
    Oct 30, 2016
    Posts:
    5
    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
     
unityunity