How to adapt the game on Unity for iPhone X to April

A month ago, Apple warned all developers that since April, all applications that are uploaded to the App Store should be built using the latest iOS 11 SDK. How to properly position content using the new API has long been available in the official documentation and the Human Interface Guidelines . And we are not happy with good and detailed articles on the adaptation of games on Unity in either Russian or English. And since in War Robots, support for the new UI appeared with the February release of version 3.6.0, I decided to write my own guide with scripts and screenshots.

Theory

Let's begin with the fact that any game on Unity gathers under iOS at first system of the assembly of the engine. At the exit, you get a regular Xcode project. Suppose now is September 2017, you are familiar with Xcode 8.3 and successfully send your game releases to the App Store. What will happen if, at this moment, a device with a screen that did not exist before goes on sale? Everything is trivially simple: a project assembled in old Xcode versions, namely, version 9.0 below, will receive large black bars above and below. And in landscape-orientation as a bonus to the two lanes on the sides, there will also be the same black indent from the bottom to provide enough free space for the new element of the iOS interface, exclusive for iPhone X - a contrasting horizontal bar replacing the Home button.
')
Thus, Apple has carefully protected users from the unthinkable number of applications that cannot be used because of the buttons drawn in the corners or under the visor. But it doesn’t look sexy at all, not the Human Interface Guidelines at all.

Then a seductive idea comes to mind: install Xcode 9 and build your project using it. It would seem that this is the same silver bullet, but alas, in many cases the result can be even worse.



The fact is that in this case you are already taking responsibility, and Apple does not prevent you from making a non-usable application. Important interface elements, which were previously located comfortably in the corners and along different sides of the screen, were now cut off and closed by the Face ID or the Home button. Of course, no magic happened, the iPhone's screen is still rectangular, and the video card does not care about these design innovations.

Practice

But there is a solution. In iOS 11, Apple introduced a new property UIView, which allows you to get UIEdgeInsets. It will contain the values ​​of safe indents from each side of the screen:

@property(nonatomic, readonly) UIEdgeInsets safeAreaInsets; 

The whole thrill is that for all devices except the iPhone X, zero indents will return, which means you will not have to enclose the code with conditions for any particular cases, everything will work equally well on the entire park of devices. Knowing about it, you need to receive the required values ​​in the Unity project.

First, Apple recommends adapting the games so that the information content takes up all the available space and only interactive controls are shifted. Most likely, at you they are already in a separate Canvas and it makes sense to select them in the RectTransform, separate from the decorative elements and requiring the entire screen plane. The remaining changes are not difficult. The workaround solution from Unity from their repository on BitBucket will help in implementing this.



We slightly refined the SetCanvasBounds script, replacing the call to the Update () method with the Awake () call, since the values ​​of the indents do not change, and the elements of the UI in our game are always in the same places. It is enough to set the necessary indents only once to the RectTransform component and everything will look right in any situation.

 private void Awake() { var safeArea = GetSafeArea(); if (safeArea != _lastSafeArea) { ApplySafeArea(safeArea); } } 

In this script, the native C-method is called in the GetSafeArea () method.

 void GetSafeAreaImpl(float* x, float* y, float* w, float* h) { ... } 

declared in the SafeAreaImpl.mm file. It is here, in a nearby method, that you can find the very API that was mentioned above.

 UIEdgeInsets insets = UIEdgeInsetsMake(0, 0, 0, 0); if ([view respondsToSelector: @selector(safeAreaInsets)]) { insets = [view safeAreaInsets]; } 

Use the Screen.safeArea API instead of calling the native method if your version of Unity supports it. In the script SetCanvasBounds carefully left a corresponding comment.

Having thus obtained the values ​​of indents, we set them to our RectTransform, which contains and correctly positions UI elements. It remains only to repeat this on every UI element that requires such changes.

 private void ApplySafeArea(Rect area) { var anchorMin = area.position; var anchorMax = area.position + area.size; anchorMin.x /= Screen.width; anchorMin.y /= Screen.height; anchorMax.x /= Screen.width; anchorMax.y /= Screen.height; _panel.anchorMin = anchorMin; _panel.anchorMax = anchorMax; _lastSafeArea = area; } 

What it looks like with us

To demonstrate the result on the example of a real project, we made screenshots of three different builds of our game: Xcode 8, Xcode 9 without iPhone X support and Xcode 9 with iPhone X support.



Xcode 8



Xcode 9 without iPhone X support



Xcode 9 with iPhone X support

On the screenshots of the assembly from the old version of Xcode, stripes appeared along three sides of the screen. To the naked eye, you can see that the margin to the left and to the right is unreasonably great. Playing a dynamic shooter with such a framework was not very convenient. We had to get rid of them.

Then, when we just put together a game in Xcode 9, the stripes disappeared like a bad dream. But now it will become noticeable that some of our buttons have drowned under the visor of the new iPhone. Others fell victim to corners. It was necessary to save the UI from the bizarre forms of the flagship Apple.

We used the techniques described in this article and collected the game for the third time. Again in Xcode 9. This result fully met our expectations. The buttons in the hangar are in place and do not hide behind the corners, and the battle interface has become more convenient without losing its appeal. We stopped at this option, as it fully complies with the requirements of the Human Interface Guidelines, and then sent another release to the App Store, which I wish you, if you have not done so yet.