[Unity] 모바일 디바이스 노치 영역 처리하기

 

핸드폰 전면에 있는 상단 카메라 , 그리고 아이폰의 경우 하단 막대기 부분 영역에 게임요소가 들어가지 않게 처리하는 방법에 대해 알아보자

그리고, 노치영역이 이쁘게 나왔으면 좋겠으니까 데코이미지로 꾸미는 방법도 알아보자.

참고로 , 이 노치 영역 처리는 메인 캔버스가 ScreenSpace - Camera일때 사용한다.

. 왜냐하면 이 스크립트는  Camera의 영역을 조절하는 방법을 사용하기 때문이다

노치영역 제외하기

사용하는 메인 카메라에 다음 스크립트를 붙여넣는다.

카메라가 노치영역을 아예 보여주지 않도록 설정하는 함수이다. 

using UnityEngine;

[ExecuteAlways]
public class SafeAreaCameraCrop : MonoBehaviour
{
    void Start()
    {
        ApplySafeAreaToCamera();
    }

    void ApplySafeAreaToCamera()
    {
        var safe = Screen.safeArea;

        float x = safe.x / Screen.width;
        float y = safe.y / Screen.height;
        float w = safe.width / Screen.width;
        float h = safe.height / Screen.height;

        Camera.main.rect = new Rect(x, y, w, h);
    }
}

자동으로 노치영역을 제외하고 보여준다.

 

 

노치영역 꾸미기

우선 씬에 새로운 Canvas 를 추가하고, 모드는 ScreenSpace - Overlay 로 설정한다.

캔버스에 아래 스크립트를 부착한다. 아이폰의 경우 아래 노치도 있으므로, TopUI 와 BottomUI 두개를 제작한다. 카메라보다 UI가 더 위기이때문에 , Overlay 는 카메라영역을 무시하고 이미지를 뿌린다. 이 특징을 이용해 노치영역을 꾸민다. 

using UnityEngine;
using UnityEngine.UI;

[ExecuteAlways]
public class NotchDecorator : MonoBehaviour
{
    [SerializeField] private RectTransform topUI;
    [SerializeField] private RectTransform bottomUI;

    private void Start()
    {
        var scaler = gameObject.GetComponent<CanvasScaler>();
        scaler.uiScaleMode = CanvasScaler.ScaleMode.ScaleWithScreenSize;
        scaler.referenceResolution = new Vector2(Globals.SCREEN_WIDTH, Globals.SCREEN_HEIGHT);
        scaler.matchWidthOrHeight = 0;

        Apply();
    }

    private void Apply()
    {
        Rect safeArea = Screen.safeArea;
        float screenHeight = Screen.height;

        // 상단 노치 영역 높이
        float topNotchHeight = screenHeight - (safeArea.y + safeArea.height);
        // 하단 노치 영역 높이
        float bottomNotchHeight = safeArea.y;

        if (topUI != null)
        {
            topUI.anchorMin = new Vector2(0, 1);
            topUI.anchorMax = new Vector2(1, 1);
            topUI.pivot = new Vector2(0.5f, 1);

            topUI.offsetMin = new Vector2(0, -topNotchHeight);
            topUI.offsetMax = Vector2.zero;
        }

        if (bottomUI != null)
        {
            bottomUI.anchorMin = new Vector2(0, 0);
            bottomUI.anchorMax = new Vector2(1, 0);
            bottomUI.pivot = new Vector2(0.5f, 0);

            bottomUI.offsetMin = Vector2.zero;
            bottomUI.offsetMax = new Vector2(0, bottomNotchHeight);
        }
    }
}

 

이쁘게 꾸며보자고~