유니티 노치, 펀치홀 디자인

게임을 만들 때 고려해야 할 사항이 많습니다.

UI, 화면 레이아웃, 종횡비와 같은 시각적 측면도 매우 중요한 요소입니다.

요즘 스마트폰의 화면 비율을 보면 다들 다채로운 개성을 보여주기 때문에 그 부분도 눈여겨볼 필요가 있다.

노치 및 구멍 패턴과 같은 요소도 고려해야 합니다.

'추천 관련글,

개인적으로 요즘 나온 게임인데도 불구하고 화면 양쪽에 거대한 우편함이 있는 게임이 조금은 구식이라는 느낌이 듭니다. 나는 그렇게 느낀다.

특히 제 폰은 Z플립3라서 세로폭이 길어서 우체통이 엄청나게 큽니다.

그러면 유저들이 조금 답답함을 느낄 수도 있을 것 같아요.

아무튼 노치와 펀치홀이 있는 휴대폰을 처리하는 방법은 두 가지가 있습니다.

1. 레터박스 없이 전체 화면을 사용하되 UI를 약간 들여씁니다.

2. 노치 및 펀칭 면에만 레터박스를 사용하십시오.

만약 너라면 플레이, 요즘 조금씩 하고 있는 모바일 게임,

위 스크린샷과 같이 펀치홀 부분만 살짝 레터박스 처리된 것을 확인할 수 있습니다.

안전 지역 도우미 | GUI 도구 | 유니티 에셋 스토어

다음 프로젝트에서 Crystal Pug의 안전 영역 도우미를 사용하십시오. Unity 에셋 스토어에서 이 GUI 도구 등을 찾아보세요.

assetstore.unity.com

위의 내용을 구현하려면 단순히 자산을 사용할 수 있습니다.

그런데 제가 스스로 장점으로 쓸 수 없는 기능을 쓰면 뭔가 불편한 점이 있어서 공부를 했어요.

쉬운 목차

안전한 지역?

Unity 게임 씬에서 게임 부분을 누르면 시뮬레이터가 있습니다.

만들려는 게임 화면이 휴대폰에서 어떻게 나타날지 미리 볼 수 있는 기능입니다.

현재 사용하고 있는 21.3.18f1 버전이 제 휴대폰을 지원한다는 사실에 상당히 놀랐습니다.

그러나 테스트가 필요한 모델로 변경하면 전화기에 화면이 어떻게 표시되는지 보여줍니다.

우측의 “Safe Afea”를 클릭하시면,

이렇게 하면 펀치 구멍을 제외한 부분이 노란색으로 표시됩니다.

위의 모델을 변경하면 안전 영역이 설정되어 있음을 알 수 있습니다.

이름에서 직관적으로 느껴지지만 안전영역의 중요성은 UI를 표시하기에 적합한 영역이라는 느낌이 강합니다.

이제 이 안전 영역을 가져와서 설정해야 합니다.

기본 설정

이 방법으로 캔버스를 만들고 그 바로 아래에 Parent라는 빈 개체를 만들었습니다.

Glygo는 Alt 키를 눌러 세로 및 가로로 늘이는 방식으로 Parent라는 개체의 앵커 사전 설정을 늘렸습니다.

그리고 내부에는 흰색 배경 이미지가 고르게 분포되어 있고 중간에 단순한 이미지가 배치되어 있습니다.

닻

가로 세로로 늘린 흰색 배경 앵커를 터치해 봅시다.

현재는 앵커가 각 사이트에 적절하게 배치되도록 수직 및 수평으로 확장되었습니다.

(X 값은 왼쪽이 0, 오른쪽이 1)

(Y 값은 아래 0, 위 1)

이 상태에서 Y 값의 최대값을 0.8 정도로 변경하면 어떨까?

게임 내 실제 화면에는 변화가 없으나 앵커 프리셋의 모양이 변경되고 Top의 값이 변경됩니다.

이 상태에서 Top을 0으로 바꾸자

앵커의 최대 Y 값이 감소함에 따라 흰색 배경은 0.8까지만 보입니다.

이를 사용하여 화면을 안전 영역에 맞게 조정합니다.

Rect 및 RectTransform

대부분의 사용자는 RectTrasfrom을 여러 번 사용했을 것입니다.

RectTrasfrom의 Rect 구조에 익숙하지 않을 수 있습니다.

RectTrasfrom 만 사용했습니다. 직사각형 ~에서 한 번도 사용하지 않은

설명을 봐 변환의 로컬 공간에서 계산된 사각형으로 나타납니다.

RectTrasfrom이 값을 인스펙터에 있는 그대로 가져오도록 하려면

Rect는 변환 사각형의 로컬 값을 가져옵니다.

실험을 위해 아까 만든 아이콘을 확대해봤습니다.

    void Start()
    {
        RectTransform rectTransform = GetComponent<RectTransform>();

        Debug.Log(rectTransform.rect.size);
        Debug.Log(rectTransform.sizeDelta);
    }

start 함수에서 rect.size와 RectTransfrom.sizeDelta의 실험적 비교

rect 변환은 inspector의 값을 그대로 가져왔지만 rect.size는 실제 크기를 보고했습니다.

오늘의 주제는 그 두 가지가 아니므로 나머지 속성을 실험해보면 차이를 알 수 있습니다.

screen.safeArea

따라서 safeArea로 필요한 비율을 조정하기 위해 Screen.SafeArea를 통해 값을 가져올 수 있습니다.

Screen 클래스의 safeArea를 보면 rect 타입입니다.

여기서 필요한 속성은 Rect.min 및 max입니다.

직사각형 최소 및 최대

Rect.min은 피벗에서 왼쪽 하단으로 이동할 좌표를 반환합니다.

Rect.max는 피벗에서 오른쪽 위 모서리까지의 좌표를 반환합니다.

너비가 100이고 피벗이 (0.5, 0.5)인 정사각형에서 최소값과 최대값을 얻는 경우.

분: (-50,-50)

최대: (50.50)

나올거야

기준이 피벗이므로 피벗을 변경하면 값도 변경됩니다.

안전 영역 최소, 최대

iPhone 12 Pro는 SafeArea가 하단과 상단 모두에서 제거되었기 때문에 테스트하기 쉬웠습니다.

이 상태에서 Safeareas min, max 사진을 찍었습니다.

내가 말했듯이 Min과 Max는 피벗 포인트에서 왼쪽 하단과 오른쪽 상단의 거리입니다.

min의 y 값은 102이며, 이는 피벗 포인트가 안전 영역의 왼쪽 하단 모서리가 아니라 실제 화면의 왼쪽 하단 모서리임을 의미합니다.

실제 코드 시도

앵커 설명 부분에 적용한 것처럼 실제 화면과 이 SafeArea의 비율을 사용하여 화면에 맞춥니다.

빨간색 사각형은 실제 화면의 크기이고 노란색 부분은 안전 영역입니다.

현재 실제 화면과 SafeArea 사이에는 가로 간격이 없습니다.

앵커의 최소 및 최대 y 값만 변경해도 상관 없습니다. (하늘색 부분)

하지만 여러 휴대폰에 답장을 해야 하기 때문에 다음과 같이 코드를 작성했습니다.

    Vector2 minAnchor;
    Vector2 maxAnchor;


    private void Start()
    {
        var Myrect = this.GetComponent<RectTransform>();

        minAnchor = Screen.safeArea.min;
        maxAnchor = Screen.safeArea.max;

        minAnchor.x /= Screen.width;
        minAnchor.y /= Screen.height;

        maxAnchor.x /= Screen.width;
        maxAnchor.y /= Screen.height;
        

        Myrect.anchorMin = minAnchor;
        Myrect.anchorMax = maxAnchor;

    }

현재 화면의 너비와 높이에 대한 safeArea의 비율이 계산되어 앵커에 적용되었습니다.