Adding an iPhone X/XS/XR Screen Layout / Safe Zones Overlay in the Unity Editor

UPDATE: I just found a Unity asset that seems to make this blog post redundant for anyone on the Unity with .net > 3.5, and like a much better solution. Check it out Notch Solution! For anyone stuck with an older version, this post could still be helpful.

Original Post:

Today’s post is a quickie and more of a resource than the usual tutorials!

For anyone building a Unity game for iPhone, I made a semi-transparent overlay version of the iPhone X/XS/XR screen layout that shows exactly where the camera notch is, and the safe zones for UI elements and anything else on screen.

It is based on Apples SVG Version from their Human Interface Guidelines, but optimised such that you can just drop a PNG into your scene.

… a lot to do here!

… a lot to do here!

Using the iPhone X Save-Zones Overlay in Unity

Screenshot 2019-02-08 at 08.43.37.png
Screenshot 2019-02-08 at 08.46.05.png
  1. Download the picture below and drop it into your Assets folder. On the new asset, change Texture Type to “Sprite (2D and UI)”, and make sure that “Alpha is Transparency” is checked.

  2. Create a new Canvas in the scene with your UI/game and give it the “EditorOnly” tag so you don’t accidentally ship it with your build. I called it “Screen Overlay”. Leave the Render Mode as “Screen Space - Overlay” and the UI Scale Mode as “Constant Pixel Size”

  3. Set your Game viewport to either iPhone X Portrait or iPhone X Landscape. If those don’t exist, you can add them - the resolutions for iPhone X are 1125 x 2436 and 2436 x 1125, respectively.

  4. Add a new UI>Image on this new canvas, call the new Game Object “Portrait”, and on the image component click “Set Native Size” - This should Scale the image correctly to match the Game View’s size. Make sure to center it, e.g. by setting the anchor to “Middle Center” and setting X/Y of the image to 0.

  5. Duplicate the “Portrait” object, rename it to “Landscape”, and set the RectTransform’s rotation to Z=90. Switch your Game View to “iPhone X Landscape”. The overlay should fit as-is.

  6. If you want to be able to see the layout at any time during play mode etc., set the new canvas’ Sort Order to something high, like 200!

Screenshot 2019-02-08 at 08.46.15.png
Whoops! My current layout does not respect the safe zones at all, and even overlaps with the home bar at the bottom!

Whoops! My current layout does not respect the safe zones at all, and even overlaps with the home bar at the bottom!