Handling of Safe Area in IOS

Why do we need this? iOS doesn’t allow Unity to be rendered in the safe area as android does. So there is a requirement to handle Notch manually in the games.

What needs to be done?

Winzo’s game timer remains in the safe area in case All the UI elements that might 1. Overlap with the notch or dynamic island in case of IOS Devices. 2. Overlap with Winzo’s time when it is moved to the safe zone.

How does Winzo’s time work when moved to the safe area? Winzo’s game timer is moved to the safe area in case of iOS devices with a notch. Hence we have to make sure that the UI elements do not come in the top section (10 percent of the screen).

Example:

• This is the case how the game elements look in a default case. Please note, the timer and back button are provided by Winzo.

• This is the case when your game elements are rendered in iOS, here, the game timer has been moved to the safe area in case of iOS but because no handling is done in the game’s UI elements, they tend to overlap with the Winzo’s time leading to a bad UI/UX.

• This is the case how the game should be handled. In this case, Winzo’s timer is moved downwards but along with that notch is also handled for the in-game elements too leading to a better user experience.

How to Implement?

• The simplest solution to implement is to make an empty object inside your scene hierarchy. Stretch it to the canvas in both x and y axis so that it acts as the new canvas for your gameObjects.

• Next, all the elements that are to be moved to the safe area (Mostly UI elements), are to be made its child. The below mentioned image can be referred to for better understanding.

• Next, you have to attach the safearea script (Do not forget to add namespace to your new script, and you can also modify it as per your use)

Script to be used

public class SafeArea : MonoBehaviour
    {
        RectTransform Panel;
        Rect LastSafeArea = new Rect(0, 0, 0, 0);


        void Start()
        {
            Panel = GetComponent<RectTransform>();
            Init();
        }


        void Init()
        {
            Rect safeArea = Screen.safeArea;
            if (Screen.width > Screen.height)  //if landscape
                return;
            if (safeArea != LastSafeArea)
                ApplySafeArea(safeArea);
        }


        void ApplySafeArea(Rect r)
        {
            LastSafeArea = r;


            // Convert safe area rectangle from absolute pixels to normalized anchor coordinates
            Vector2 anchorMin = r.position;
            Vector2 anchorMax = r.position + r.size;
            anchorMin.x /= Screen.width;
            anchorMin.y /= Screen.height;
            anchorMax.x /= Screen.width;


            if (Screen.height - anchorMax.y >= 25) //in case of notch
                anchorMax.y /= Screen.height - 60;             
            else
                anchorMax.y /= Screen.height;  //normal case


            Panel.anchorMin = anchorMin;
            Panel.anchorMax = anchorMax;
        }
    }

For better understanding of the same, you can also refer to the GameScoreUI prefab in the Winzo’s SDK (Unity Project). Everything that is needed to be moved to the safe zone has been made a child of the SafeAreaContainer which is first stretched to fit the parent canvas and now acts as the new parent. The safe area container has the SafeArea script attached to it.