Search Unity

  1. We've closed the job boards. If you're looking for work, or looking to hire check out Unity Connect. You can see more information here.
    Dismiss Notice
  2. We're running great holiday deals on subscriptions, swag and Asset Store packages! Take a peek at this blog for more information!
    Dismiss Notice
  3. Check out our Unite Austin 2017 YouTube playlist to catch up on what you missed. More videos coming soon.
    Dismiss Notice
  4. Unity 2017.2 is now released.
    Dismiss Notice
  5. The Unity Gear Store is here to help you look great at your next meetup, user group or conference. With all new Unity apparel, stickers and more!
    Dismiss Notice
  6. Introducing the Unity Essentials Packs! Find out more.
    Dismiss Notice
  7. Want to see the most recent patch releases? Take a peek at the patch release page.
    Dismiss Notice
  8. Unity 2017.3 beta is now available for download.
    Dismiss Notice

iPhone X notch in screen

Discussion in 'iOS and tvOS' started by moonjump, Sep 12, 2017.

  1. moonjump

    moonjump

    Joined:
    Apr 15, 2010
    Posts:
    2,120
    I just watched the Apple keynote that launched the iPhone X. It appeared that app content flows around the notch (and video has a bit missing for the notch). It looks like it could be an issue if you have GUI elements across the top of the screen (as I do). Are they going to go missing in the notch?
     
  2. _Daniel_

    _Daniel_

    Joined:
    Feb 28, 2007
    Posts:
    2,490
    Maybe we'll have to custom design our UI's to account for it and the rounded corners.
     
  3. aihodge

    aihodge

    Joined:
    Nov 23, 2014
    Posts:
    108
    You’ll also need to consider the area at the bottom of the screen for the home screen gesture indicator in both portrait and landscape orientations. Apple has posted Human Interface Guidelines for iPhone X, which recommends adapting your app’s UI to a “safe area” on the screen.
     
  4. Mantas-Puida

    Mantas-Puida

    Unity Technologies

    Joined:
    Nov 13, 2008
    Posts:
    1,805
    Pre-existing apps will have black bars in non-safe parts of the screen.
    You will have to rebuild with new Xcode and re-submit it to the app store to get access to full screen. You should be able to experiment with that in Simulator.
     
    _Daniel_ likes this.
  5. moonjump

    moonjump

    Joined:
    Apr 15, 2010
    Posts:
    2,120
    So I'm going to have to layout the top of the screen differently to account for this device, and it looks like I will have to totally change my game at the bottom because you drag pieces from near the bottom.
     
  6. Pix10

    Pix10

    Joined:
    Jul 21, 2012
    Posts:
    843
    There go all the screen-corner-pixel hidden debug menus :)
     
    christophergoy and hippocoder like this.
  7. justdizzy

    justdizzy

    Joined:
    Mar 8, 2016
    Posts:
    34
    It would be great if Unity added an Player Setting option to clip the screen rect to exclude the "horns" on the iPhone X.

    A quick and dirty manual fix for landscape only apps is to edit the UnityAppController.mm file in the Xcode project, replace the line:

    Code (csharp):
    1.     _window = [[UIWindow alloc] initWithFrame: [UIScreen mainScreen].bounds];
    with:

    Code (csharp):
    1.     CGRect winSize = [UIScreen mainScreen].bounds;
    2.     if (winSize.size.width/winSize.size.height > 2) {
    3.         winSize.size.width -= 32;
    4.         winSize.origin.x = 32;
    5.     }
    6.     _window = [[UIWindow alloc] initWithFrame: winSize];
    Although this does misalign the splash screen and first scene, which might be an issue for some.
     
    Last edited: Sep 13, 2017
    _Daniel_ likes this.
  8. AcidArrow

    AcidArrow

    Joined:
    May 20, 2010
    Posts:
    4,215
    Yeah... although... they didn't really bother when they showed examples in the keynote.

    clipping.jpg
     
    aihodge and _Daniel_ like this.
  9. _Daniel_

    _Daniel_

    Joined:
    Feb 28, 2007
    Posts:
    2,490
    That is a good idea. It would save tons of developer's time tweaking their UI's just for iPhone X.
     
  10. Ferazel

    Ferazel

    Joined:
    Apr 18, 2010
    Posts:
    278
    It's not just the horns (we can live with the status bar in our portrait view), but the swipe indicator as well.
    Watching the video explains the problems.
    https://developer.apple.com/videos/play/fall2017/801/

    What we really need is a way for Unity to feed us the "Safe Area" of the screen via an API call that we can then set RectTransforms in the UI to and do our best to try to accommodate the spacing as best we can in the app. Apple... I love you and hate you. I REALLY hate that swipe indicator overlapping all of my applications. I really wish they would have just put the home button on the side.
     
    justdizzy likes this.
  11. _Daniel_

    _Daniel_

    Joined:
    Feb 28, 2007
    Posts:
    2,490
    I wonder what happens to the status bar in landscape orientation.
     
  12. Ferazel

    Ferazel

    Joined:
    Apr 18, 2010
    Posts:
    278
    I do too, based on what I've been able to find out, there no longer is a landscape status bar in the iPhone X simulator.
     
  13. Jde

    Jde

    Joined:
    Oct 2, 2011
    Posts:
    125
    What aspect ratio will the safe area be for existing apps? 16:9?
     
  14. Jde

    Jde

    Joined:
    Oct 2, 2011
    Posts:
    125
    and will it be the same aspect ratio in portrait and landscape? Or will it change like this...
    upload_2017-9-14_12-31-41.png
     
  15. dckumawat

    dckumawat

    Joined:
    Sep 16, 2017
    Posts:
    1
    The notch on the iPhone X has been the subject of a great deal of debate even before the keynote.

    [​IMG]
     
  16. HenriqueGomez

    HenriqueGomez

    Joined:
    Dec 13, 2012
    Posts:
    63
    Maybe use those "notch sides" to place UI elements like a pause button or something else?
     
  17. Jde

    Jde

    Joined:
    Oct 2, 2011
    Posts:
    125
    @Mantas-Puida Can you tell me the aspect ratio of the safe area for existing Unity apps please?
     
  18. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    129
    Hi all ... if this is helpful to anyone, I've been able to work out the exact pixel values for the safe area for iPhone X using Xcode 9.0, assuming you don't use native UI Kit views. So this is for landscape orientation:

    iPhone X overall dimensions
    2436 x 1125 pixels

    Overall safe area
    2172 x 1062 pixels

    Left & right insets (accounts for the notch and curved corners, plus a margin)
    132 pixels each

    Bottom inset (accounts for the bottom nav bar)
    63 pixels

    Top inset
    zero pixels
     
  19. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    129
    using my previous post you could work out the ratio from that.
     
  20. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    129
    Hi @Mantas-Puida =) I was just wondering if you know roughly when the device generation enum might be updated with the latest iPhone models, particularly the X to help make X only UI tweaks. I can pipe in my own detection if need be, but if it's expected in an upcoming patch version that'd be great to know, thanks! =)
     
  21. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    129
    If anyone wants to pipe in their own solution, you could use the good old uidevice-extenision:
    https://stackoverflow.com/questions...evice-make-and-model-on-ios/11197770#11197770

    New model codes are apparently this, they are untested though obviously... so take care to research further if you're relying on them:
    iPhone10,1 - iPhone 8 CDMA
    iPhone10,4 - iPhone 8 GSM
    iPhone10,2 - iPhone 8 Plus CDMA
    iPhone10,5 - iPhone 8 Plus GSM
    iPhone10,3 - iPhone X CDMA
    iPhone10,6 - iPhone X GSM
     
  22. Jde

    Jde

    Joined:
    Oct 2, 2011
    Posts:
    125
    That tells us the safe area of the device, but not necessarily the safe area that existing Unity apps will use. It would be a bit crazy for all existing Unity apps to use 2172 x 1062 pixels when in landscape!
     
    elhispano likes this.
  23. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    129
    @Jde When you're saying existing apps, do you mean apps that have not been built using the latest iOS SDK? Sorry my info was in relation to apps built with the latest SDK. Are you more wondering what the letterboxed area will be if you've not built using the latest SDK? using the term 'safe area' confused me because this has just become the new way to describe the area that we're not meant to add anything interactive outside of or show any UI that gets cut off on the notch or rounded corners otherwise your app is likely to be rejected.

    I just did a quick test to try and find out the letterboxed area for apps that have not been prepared to support the X. I created a new project using single app template. Changed the launch storyboard to use the older launch image asset catalogue and deliberately did not add anything to support the new iPhone X, this would simulate an old app that has not been prepared for the X. After running the app and seeing the black letterboxing and printing out the UIScreen.main.bounds I'm getting width of 536@3x and 320@3x. So resolution of 1704 x 960 which is pretty close to 16:9. But that seems like a lower resolution than I expected, which suggests that there's could be some hardware upscaling going on when run on the X. Adding the default launch.storybaord back in ie. so that the app is appearing to support the X, then the screen bounds prints at the expected X res of 812@3x and 375@3x.
     
  24. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    129
    @Jde Update: Adding to my previous post. So in my hasty test, I'd only added a single image to the old style launch assets catalogue which happened to be an iPhone5 sized launch image. So that's why the app was running 536@3x and 320@3x... ie. iPhone 5 runs at 536@2x and 320@2x and the results I posted above for 1704x960 res is probably what happens if you have really old iOS app that hasn't been updated to even support iPhone 6 or 7. So for a much better test I've add launch images for every resolution / iOS generation except for the X, and now the view is printing values of 667@3x and 375@3x. This is looking much better, so again this is pretty much a 16:9 ratio at 2001x1125 pixels for the letterboxed area, and it also matches the resolution difference that are in apples guidelines where they mention how the X is 145@3x taller/wider than 6-8 non-plus models. https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
     
    aihodge likes this.
  25. Jde

    Jde

    Joined:
    Oct 2, 2011
    Posts:
    125
    Thanks for that Jason! That's very useful info. I was assuming it would be 16:9 so thanks for confirming.
     
  26. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    129
    No worries :)
     
  27. BAIZOR

    BAIZOR

    Joined:
    Jul 4, 2013
    Posts:
    54
    Any idea how to fix in Unity way UGUI for the notch?
     
  28. PixelEnvision

    PixelEnvision

    Joined:
    Feb 7, 2012
    Posts:
    428
  29. warren-miller-maltd

    warren-miller-maltd

    Joined:
    Jul 26, 2012
    Posts:
    26
    hi - is there a way to force the "black bars in non-safe parts" with Xcode 9 and Unity 5.6.4p1 please?
     
  30. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    129
    I do know that if you’re using a launch asset catalogue, simply built excluding iPhone X launch images it will run in letterboxes mode. But if you’re using a storyboard/xib launch asset I’m not sure how you specify or control device support, by default when building using Xcode 9.1 this method would run in on the full screen of X. Without looking in to it further I’m sure there must be a way to either set a property or provide a list of exclusions on what devices are supported by the launch storyboard/xib.
     
  31. mehradmbs

    mehradmbs

    Joined:
    Sep 7, 2013
    Posts:
    11
    i build it with latest xcode version, and run it on simulator, but i get black in non-safe areas again... what i must do! i use 2017.2.0f3
     
  32. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    129
    You need to use launch assets sized for the iphone x (portrait and landscape) and listed in your launch asset catalogue.. OR.. you need to use a launch XIB/Storyboard ie. in Unity using one of the options like Relative/Constant sized splash/launch image.
     
  33. mehradmbs

    mehradmbs

    Joined:
    Sep 7, 2013
    Posts:
    11
    do you answer my question?!
     
  34. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    129
    Yes.. but sorry I should check. Are you wanting to 'have' black bars? or are you wanting to support the iPhone X? if you want to support the X you need to follow my suggestion ^
     
  35. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    129
    Everyone should be aware that you most definitely should be building with Xcode 9.1 or newer for ensured X support.
     
  36. mehradmbs

    mehradmbs

    Joined:
    Sep 7, 2013
    Posts:
    11
    i use latest xcode, install it today, and i don't want black bars. and i don't really understand your suggestion. would you please tell it more clear?
     
  37. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    129
    No worries. Ok so what setting do you use in the iOS Player Settings for iPhone Launch screen type? Do you use None?
     
  38. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    129
    If you use None, then I'm guessing you're relying on the Legacy launch images, and you will need to change this setting so you're using a launch xib/storyboard... OR... you will need to modify the legacy launch asset catalogue that's referenced in xcode so that it includes iPhone X launch assets.
     
  39. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    129
    So for example... you will need to modify the file in the xcode project: LaunchImage.launchImage/Contents.json to include some entries for the iPhone X launch assets:

    Code (CSharp):
    1. {
    2.             "orientation" : "portrait",
    3.             "idiom" : "iphone",
    4.             "extent" : "full-screen",
    5.             "filename" : "Default-Portrait-812h@3x.png",
    6.             "minimum-system-version" : "11.0",
    7.             "subtype" : "2436h",
    8.             "scale" : "3x"
    9.         },
    10.         {
    11.             "orientation" : "landscape",
    12.             "idiom" : "iphone",
    13.             "extent" : "full-screen",
    14.             "filename" : "Default-Landscape-812h@3x.png",
    15.             "minimum-system-version" : "11.0",
    16.             "subtype" : "2436h",
    17.             "scale" : "3x"
    18.         }
     
    aihodge likes this.
  40. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    129
    The more recommended way of supporting the iPhone X is to use a storyboard option which will make your app more future proof. But ^ this is considered the old school way of doing it, and you probably won't even find that code example anywhere on the iOS developer guidelines unless it's been added recently. I had to work that out the hard way by following conventions and testing in the simulator.
     
    aihodge likes this.
  41. mehradmbs

    mehradmbs

    Joined:
    Sep 7, 2013
    Posts:
    11
    Thanks man, its perfect answer, i use storyboard and it works :D thanks again, i find the link for this too:
    https://oleb.net/blog/2014/08/replacing-launch-images-with-storyboards/
     
  42. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    129
  43. mehradmbs

    mehradmbs

    Joined:
    Sep 7, 2013
    Posts:
    11
    and a question about iPhone-X in unity, i use this code to find out if its iphone X or not:
    if(SystemInfo.deviceModel == "iPhone10,3" || SystemInfo.deviceModel == "iPhone10,6")...
    you think it works?
     
  44. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    129
    Latest versions of Unity have this now: Device.generation == DeviceGeneration.iPhoneX

    Another way could be the res. It's not recommended, but if this code only runs on iOS then there's no other devices at the moment with that resolution. if ( (Screen.width == 2436 && Screen.height == 1125) || Device.generation == DeviceGeneration.iPhoneX ){
     
    aihodge likes this.
  45. JelmerV

    JelmerV

    Joined:
    Nov 29, 2012
    Posts:
    92
    If was thinking to implement the safe areas by using a panel as a parent of all UI elements.
    Normally, the panel is set to: stretch and left top right bottom to: 0,0,0,0, so it won't do anything. But if the device is an X, I will adjust the size of the panel by script, so that it leaves some safe area. This is theoretically.
     
    Last edited: Nov 14, 2017
    jason_yak likes this.
  46. jason_yak

    jason_yak

    Joined:
    Aug 25, 2016
    Posts:
    129
    That is great idea. Plus Unity have recently added an API to return the safe areas. It'd be a good idea to setup a UI framework that reads the values from these API methods, you could set some UI Layout Elements or some other kind of container UI elements to reflect the safe areas and then the rest of your UI can anchor off them. I'm most certainly going to be looking at this setup on my next project. Nice suggestion! =)
     
  47. JelmerV

    JelmerV

    Joined:
    Nov 29, 2012
    Posts:
    92
    It tried it, even though I don't have an X to test it, it does seem to work. As long as
    Code (CSharp):
    1.  if ( (Screen.width == 2436 && Screen.height == 1125)
    works

    all in all I have this script attached to a panel (works only in landscape I think):

    Code (CSharp):
    1. using System.Collections;
    2. using System.Collections.Generic;
    3. using UnityEngine;
    4. using UnityEngine.iOS;
    5.  
    6.  
    7. public class iPhoneXFix : MonoBehaviour {
    8.  
    9.     // Use this for initialization
    10.     void Start () {
    11.         if ((Screen.width == 2436 && Screen.height == 1125)) {
    12.             Debug.Log ("iPhone X detected!");
    13.             // [ left - bottom ]
    14.             gameObject.GetComponent<RectTransform>().offsetMin = new Vector2(20f, 10f);
    15.             // [ right - top ]
    16.             gameObject.GetComponent<RectTransform>().offsetMax = new Vector2(-20f, 0f);
    17.         }
    18.     }
    19. }
    20.  
     
    Demanuele likes this.
  48. makaqo

    makaqo

    Joined:
    Sep 16, 2015
    Posts:
    8
    What are the apis added? I do not find them.
    Unity 2017.2.0p2 :(
     
  49. makaqo

    makaqo

    Joined:
    Sep 16, 2015
    Posts:
    8
    I already found what I was looking for !!
    Screen.safeArea
     
  50. JelmerV

    JelmerV

    Joined:
    Nov 29, 2012
    Posts:
    92
    Ah great, but how do you use that with a UI in Unity?