Search Unity

  1. Unity 2019.1 is now released.
    Dismiss Notice

[RELEASED] Safe Area Helper for "notched" phones (iPhone X, Google Pixel 3 XL, etc.)

Discussion in 'Assets and Asset Store' started by Firemaw, Oct 15, 2018.

  1. Firemaw

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    25
    Icon516x389.png

    Safe Area Helper will help you quickly develop and simulate the Safe Area of a notched mobile device such as the iPhone X or Google Pixel 3 XL!


    For a detailed breakdown about how the Safe Area works on mobile devices, I have also written a companion "How To" article online, Updating your GUI for the iPhone X and other “Notched” Devices

    Features:
    * Simple drag-and-drop component to apply Screen.safeArea to your Unity GUI components
    * Convenient options to conform to Safe Area on X- or Y-axis only
    * Simulate the iPhone X Safe Area within the Editor in all orientations - quickly iterate your UI and save time without having to build to a physical device or Xcode Simulator
    * Convenient debug toggle button to switch between normal and Safe Area modes at runtime
    * Easily add an unlimited number of your own simulated devices

    Simulated devices included:
    * iPhone X, Xs, Xs Max, XR
    * Google Pixel 3 XL (coming soon)

    Requirements:
    * Unity 2017.2.1 or higher (needed for Screen.safeArea API)

    Screenshots contain examples of correct and incorrect implementations of the Safe Area for demonstration purposes only. (No graphical assets are included in the package.)

    Download it now from the Asset Store!
     
    Last edited: Nov 11, 2018
    hungrybelome likes this.
  2. Goldrake

    Goldrake

    Joined:
    Feb 6, 2010
    Posts:
    141
    Hello,
    does it work for unity 2017.4?
     
  3. Firemaw

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    25
    Hi @Goldrake, yes it works on 2017.4. It’s compatible with 2017.2.1 and up (latest tested on 2018.2).
     
  4. ferretnt

    ferretnt

    Joined:
    Apr 10, 2012
    Posts:
    292
    Works fine on 2017.4 for me.

    Does anyone have the rect values for Pixel 3 XL or any other Android devices handy?
     
  5. Firemaw

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    25
    I haven’t been able to find any values for the Pixel 3 XL yet. Was hoping they would release the AVD for Android Studio soon! Would love it if anyone can post the safe area coords here so I can add them to the package.
     
  6. MonsterPlanet1

    MonsterPlanet1

    Joined:
    Feb 3, 2017
    Posts:
    2
    Thank you! Asset working is awesome!

    I have some question.
    Apple introduced new resolution devices, iPhone XR and iPhone XSMax. They have another safe area zone?
     
  7. CodeBombQuinn

    CodeBombQuinn

    Joined:
    Apr 17, 2018
    Posts:
    2
    I have an XR, and it seems to be the same as the X. This asset works great btw!
     
  8. Firemaw

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    25
    Thank you @MonsterPlanet1 and @CodeBombQuinn for the feedback! Much appreciated and glad its worked well for you both!

    @MonsterPlanet1 - I have done a thorough investigation into the new iPhone X model variations - Xs, Xs Max and XR - using the Xcode Simulator. For the most part, they are pretty much the same. The full screen aspect ratios remain the same across the board: ~19.5:9. In terms of their safe areas, the iPhone X and Xs are identical. The Xs Max and XR are pretty close, but do have a very slightly larger safe area (less than 1% difference). For the sake of completeness and thorough testing, I will add these to the package and publish it within the next couple of days. If you can't wait, here are the normalised safe area ratios for the iPhone Xs Max (of which the ratios are identical to the XR):

    Code (CSharp):
    1.  
    2. Rect[] NSA_iPhoneXsMax = new Rect[]
    3. {
    4.     new Rect (0f, 102f / 2688f, 1f, 2454f / 2688f),  // Portrait
    5.     new Rect (132f / 2688f, 63f / 1242f, 2424f / 2688f, 1179f / 1242f)  // Landscape
    6. };
    7.  
     
    hungrybelome likes this.
  9. Firemaw

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    25
    Asset store package has been updated to 1.0.2 which contains new SimDevice for iPhone Xs Max / XR
     
    hungrybelome likes this.
  10. MonsterPlanet1

    MonsterPlanet1

    Joined:
    Feb 3, 2017
    Posts:
    2
    Thank you very much!
     
  11. hungrybelome

    hungrybelome

    Joined:
    Dec 31, 2014
    Posts:
    230
    Thank you for this awesome tool!
     
  12. Firemaw

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    25
  13. Kultie_Kaopiz

    Kultie_Kaopiz

    Joined:
    Jun 13, 2018
    Posts:
    13
    Shout-out for the dev for making this assets. Saved my team a tons of extra work for the forsaken notch thingy.
    Just import it and it work like a charm.
    But still there something might off for that one of my device (Iphone 7 plus) is making very weird layout. Checking the layout that safe area return rect with value width = 1242 and heigh = 2208 altho iphone 7 doesn't have safe area and original are 1080x1920. Currently it's only effect that device (we don't have much iphone lying around) Any idea of this situation?
    Thank you
     
  14. Firemaw

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    25
    Hi @Kultie_Kaopiz thanks for the kind words! I have tested the safe area on a regular iPhone 7 but not the iPhone 7 Plus. I'll take a look on the Xcode simulator to try and see what's going on. What is your version of Unity and iOS?
     
  15. Firemaw

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    25
    Hi @Kultie_Kaopiz I ran it through the Xcode Simulator with iPhone 7 Plus in iOS 12.1. I couldn't see any errors with the safe area occurring. It always stayed at full screen with 1242x2208 or 2208x1242 pixels. I can suggest a couple of things to check:

    (1) the safe area script is on a panel that is not stretched to full screen (Anchor 0,0 to 1,1; Pivot 0.5,0.5);

    (2) the safe area script is on a child whose parent is not stretched to full screen.

    Either of the above can cause the safe area code to do weird things.

    Some versions of Unity 2017 also have bugs related to the safe area not showing correctly on startup for some devices (search the Issue Tracker for details), but are generally related to the X-series so shouldn't affect the 7 Plus.
     
    Last edited: Feb 26, 2019
  16. Thirty9

    Thirty9

    Joined:
    Apr 6, 2015
    Posts:
    16
    Hello!
    i'm experiencing a bug on the device. Everything works fine in editor, but the panel that has the script and all its children were out of the screen ( i could not even see them).

    Attached is my canvas settings
    upload_2019-1-30_14-45-20.png
     
  17. Thirty9

    Thirty9

    Joined:
    Apr 6, 2015
    Posts:
    16
    NVM, I attached SafeAreaDemo to the object
     
    Firemaw likes this.
  18. Kultie_Kaopiz

    Kultie_Kaopiz

    Joined:
    Jun 13, 2018
    Posts:
    13
    @Firemaw thanks for the suggestions, the problem is resolved now when i only calculate the safe area once at the initial scene and user that for all of other scene.
     
    Firemaw likes this.
  19. Firemaw

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    25
  20. JohnnyFactor

    JohnnyFactor

    Joined:
    May 18, 2018
    Posts:
    109
    It's working very well except for one scenario. When enabling the status bar from Player Settings for iOS devices, the safe area overlaps the status bar on non-iPhone X devices in portrait mode.

    I have tested this on iPhone 5S, iPhone 6 Plus, iPhone 8 Plus, iPad Mini 2 and iPad Pro 12.9. All devices exhibit this behaviour, except the 8 Plus (no idea why, the 6 Plus is the same aspect and resolution). Even stranger, the safe area will suddenly jump into place below the status bar right after showing a Unity Ad.

    Edit: Unity 2018.3.7 on macOS 10.14.3
     
  21. Firemaw

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    25
    Hi @JohnnyFactor, is it a problem where the device is not starting up with the safe area, but it will activate correctly after an ad playback or an orientation change (portrait -> landscape -> back to portrait)? I do recall a bug in 2017, which was fixed, where this was a similar case. Maybe that bug has resurfaced? https://issuetracker.unity3d.com/is...rait-mode-until-screen-orientation-is-changed. It would be worth logging your case to the Issue Tracker as I believe it might be to do with Unity Screen.safeArea code itself.
     
    Last edited: Mar 9, 2019
  22. JohnnyFactor

    JohnnyFactor

    Joined:
    May 18, 2018
    Posts:
    109
    Ok after some proper testing, it seems this is a problem with iOS 11. It works on iPhone 8 Plus and iPad Pro 12.9 (both iOS 12.1.4) but not on the other devices (iOS 11.4.1).

    I have no idea how to troubleshoot this so I have submitted a bug report (case 1135203).
     
  23. Firemaw

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    25
    Thanks @JohnnyFactor, could you link the report here so I can give it an upvote?
     
  24. JohnnyFactor

    JohnnyFactor

    Joined:
    May 18, 2018
    Posts:
    109
    Thanks for your support but I won't do that. I'm not keen on sharing my entire bug report communication history-- complete with my plain text email address-- on a public forum. Maybe I should report that as a bug.

    Update: I tracked down this bug to Player Settings-->Orientation. When set to anything other than 'Auto Orientation', it seems to bypass the screen inits and doesn't see the status bar. I set it to 'Auto Orientation' and unchecked the landscape options.
     
    Last edited: Mar 15, 2019
  25. pistoleta

    pistoleta

    Joined:
    Sep 14, 2017
    Posts:
    4
    Hi. I dont know if I'm the only one but on my XRMax the safe area is not taking all the available space, or at least thats what I feel like. I inserted a red layer on the safe area so you can see it better.
    Is this normal?
     

    Attached Files:

  26. pistoleta

    pistoleta

    Joined:
    Sep 14, 2017
    Posts:
    4
    Trying the demo with the emulator and it's the same... there's still space on top and bottom....
     

    Attached Files:

  27. Firemaw

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    25
    Hi @pistoleta could you describe the issue in more detail please? Your screenshots look correct to me. The safe area will never expand over the notch (top) or Home indicator (bottom) in portrait mode on the iPhone XR. There are also two slightly different safe areas for iPhone X models using the sim toggle hotkey (described at the bottom of the article linked in the original post).
     
  28. pistoleta

    pistoleta

    Joined:
    Sep 14, 2017
    Posts:
    4
    Okay if you say so, but I thought the safe area would be more accurate, on top theres a 1% that could still be used, but I guess this is good enough. Thank a lot for your great asset and for answering my question.
    Regards
     
  29. henriqueranj

    henriqueranj

    Joined:
    Feb 18, 2016
    Posts:
    125
    Hello @Firemaw I found a bug in the Safe Area Helper code when the device orientation changes. It is related to how Unity updates their Screen.safeArea, Screen.height and Screen.width across different frames.

    I have a use-case in the app I developed where it changes from one Scene in Landscape into another that forces Portrait. With this, Unity updates the Screen.safeArea in 2 frames (first is Landscape, and second is Portrait), and updates the Screen.height and Screen.width in 3 frames (first is Landscape resolution, then is Highest Width/Highest Height, then it finally becomes Portrait resolution). Therefore, this causes the Safe Area Helper anchor calculations to be wrong.

    I fixed this by also checking for the last resolution, instead of just the last safe area. The code is as follows:
    Code (CSharp):
    1. void Refresh ()
    2. {
    3.     Rect safeArea = GetSafeArea ();
    4.  
    5.     if (safeArea != LastSafeArea
    6.         || LastScreenSize.x != Screen.width
    7.         || LastScreenSize.y != Screen.height)
    8.    {
    9.         LastSafeArea = safeArea;
    10.         LastScreenSize.x = Screen.width;
    11.         LastScreenSize.y = Screen.height;
    12.         ApplySafeArea(safeArea);
    13.     }
    14. }
    This happens in an iPhone X with iOS 12.2, built with Unity 2018.3.1. Also, I have animated orientation rotation turned off.
     
    Last edited: Apr 26, 2019
  30. Firemaw

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    25
    Thanks @henriqueranj I will investigate and look into including this in the next release. When you say you are "forcing" portrait mode in the second scene, how are you doing that?
     
  31. henriqueranj

    henriqueranj

    Joined:
    Feb 18, 2016
    Posts:
    125
    Forcing is probably not the best word for it, I just tell the app to go in Portrait through code. Here's the code I use (the Coroutine is due to some issues we had with properly locking the app to a portrait/landscape in iOS):

    Code (CSharp):
    1.  
    2.        private IEnumerator SwitchAfterFrame(bool isPortrait) {
    3.             _isPortrait = isPortrait;
    4.             Screen.autorotateToLandscapeLeft = Screen.autorotateToLandscapeRight = !_isPortrait;
    5.             Screen.autorotateToPortrait = Screen.autorotateToPortraitUpsideDown = _isPortrait;
    6.             // force orientation to portrait or landscape
    7.             Screen.orientation = _isPortrait ? ScreenOrientation.Portrait : ScreenOrientation.LandscapeLeft;
    8.             // then set it back to auto rotation so user can have orientation freedom within landscape or portrait
    9.             yield return new WaitForEndOfFrame();
    10.             Screen.orientation = ScreenOrientation.AutoRotation;
    11.             _switchRoutine = null;
    12.             yield return null;
    13.         }
    14.