Unity) Notch Design(Safe Area)

Unity- Notch Design(Safe Area)

개발을 하는 과정에서 기본 중에 기본은 해상도 대응이다.

디스플레이되는 화면 해상도에 따라 어떻게 보일 것인지를 정해야 한다.

모바일 해상도 대응하는 과정에서 Notch Design이라는 카메라가 전면부로 나오게 되면서 생기는 이슈에 대한 대응이 필요하게 되었다. Safe Area라고 하기도한다.

 

 

반응형

 

이런 과정에서는 스크린 사이즈와 뷰 사이즈가 다르게 표현되어야 한다. 

그래야 Notch Design 영역에 가려지는 화면이 생기지 않게 된다.

Sfae Area의 영역(Notch Design)이 해당되지 않는 영역에서 화면을 그려져야 한다.

이론으로는 배경(전체 화면)을 제외한 나머지 오브젝트들이 [Root]를 기반으로 하위에 포함되고 

Root는 Notch Design 영역만큼 Margin이 처리되면 된다.

Unity에서는 Device Simulator가 포함될 예정이라고 한다.

 

URL :https://blogs.unity3d.com/2019/09/27/speed-up-mobile-iteration-with-the-new-device-simulator/?_ga=2.100572573.2030695223.1580782415-1084609172.1578270273

Speed up mobile iteration with the new Device Simulator - Unity Technologies Blog

 

 

유니티에서 적용되어야 할 Notch Design에 대한 코드 설명은 아래 글 참고하면 된다. 

URL : https://connect.unity.com/p/updating-your-gui-for-the-iphone-x-and-other-notched-devices

Updating your GUI for the iPhone X and other “Notched” Devices - Unity Connect

반응형

실제 적용 됬을때의 상태는 다음과 같다.

 

Hierarchy 상으로는 최상위 루트 에 포함되고 Stretch를 위치를 기준으로 셋팅되어야한다.

<Notch가 적용된 화면/ Notch가 적용되지 않은 화면>

 

반응형

 

링크가 삭제된듯해서 해당 관련된 코드 추가한다.

public class NotchDesign : MonoBehaviour
{

    public enum SimDevice { None, iPhoneX }
    public static SimDevice Sim = SimDevice.None;
    Rect[] NSA_iPhoneX = new Rect[]
    {
            new Rect (0f, 102f / 2436f, 1f, 2202f / 2436f),  // Portrait
            new Rect (132f / 2436f, 63f / 1125f, 2172f / 2436f, 1062f / 1125f)  // Landscape
    };
    RectTransform Panel;
    Rect LastSafeArea = new Rect(0, 0, 0, 0);

    void Awake()
    {
        Panel = GetComponent<RectTransform>();
        Refresh();
    }



    void Refresh()
    {
        Rect safeArea = GetSafeArea();

        ApplySafeArea(safeArea);

    }

    Rect GetSafeArea()
    {
        Rect safeArea = Screen.safeArea;

        //Logger.LogFormat("Screen.safeArea :{0}",Screen.safeArea);
        if (Application.isEditor && Sim != SimDevice.None)
        {
            Rect nsa = new Rect(0, 0, Screen.width, Screen.height);

            switch (Sim)
            {
                case SimDevice.iPhoneX:
                    if (Screen.height > Screen.width)  // Portrait
                        nsa = NSA_iPhoneX[0];
                    else  // Landscape
                        nsa = NSA_iPhoneX[1];
                    break;
                default:
                    break;
            }

            safeArea = new Rect(Screen.width * nsa.x, Screen.height * nsa.y, Screen.width * nsa.width, Screen.height * nsa.height);
        }

        //Logger.LogFormat("change - Screen.safeArea :{0}",Screen.safeArea);

        return safeArea;
    }

    void ApplySafeArea(Rect r)
    {
        LastSafeArea = r;

        Vector2 anchorMin = r.position;
        Vector2 anchorMax = r.position + r.size;
        anchorMin.x /= Screen.width;
        anchorMin.y /= Screen.height;
        anchorMax.x /= Screen.width;
        anchorMax.y /= Screen.height;
        Panel.anchorMin = anchorMin;
        Panel.anchorMax = anchorMax;
    }

    #region Private Method
    #endregion

    #region Public Method
    #endregion
}

 

Unity Screen.safeArea : [링크]

Unity - Scripting API: Screen.safeArea

 

 

★★★★☆