유니티 UI 팁 Canvas 로 넓은 화면과 좁은 화면 둘다 맞춰봅시다.

힌색 반투명 박스를 넓은 화면과 좁은 화면 둘다 맞출 예정입니다.

세로화면은 보통 9:16 비율로 맞추죠

Canvas 에 2,3 을 설정을 따라합니다.

3번은 9:16 에 맞는 해상도를 넣으면 되는데 저는 UI 크기를 맞추다 보니 이렇게 되었습니다.
1080 x 1920 이런 식으로 넣으셔도 됩니다.

 

힌색 박스를 중앙에 맞추고 width 와 height 를 동일하게 넣으시면 CanvasScaler 에 딱맞는 크기로 나옵니다.

 

540 x 960 도 9:16 이기 때문에 꽉차게 표시됩니다.

 

3번에 width or height 를 설정해야 4번 UI 가 표시됩니다.

이 방식은 width 에 맞추둔 height 엣추든 하겠다는 뜻입니다.

width 에 맞추고 싶으면 0
height 에 맞추고 싶으면 1

인데 0.5 같이 애매한 값을 넣으면 이해할 수 없는 이상한 형태가 됩니다.

그래서 프로그램으로 해결할 것입니다.

 

 

3:4 화면 처럼 옆으로 넓으면 위아래를 꽉채워서 좌우가 남게되고

 

9:21 같이 좁은 화면은 좌우를 꽉채워서 위아래를 남기게 할 예정입니다.

 

보시면 아시겠지만 특별히 화면 가장자리에 배치될 것들은 이상식을 따를 필요는 없습니다.
게임 전에 표시할 메뉴 UI 나 팝업 같은 것에 사용됩니다.

이러면 의도한 모든 내용이 화면에 표시되고 밖으로 튀어 나가지 않습니다.

코드

public class CanvasHelper : MonoBehaviour
{
     void Awake()
     {
          var scaler = GetComponent<CanvasScaler>();
          var aspect = Camera.main.aspect;
          var aspect_9_16 = 9.0f / 16.0f;
          if (aspect > aspect_9_16)
          {
               scaler.matchWidthOrHeight = 1;
          }
          else
          {
               scaler.matchWidthOrHeight = 0;
          }
     }   
}

코드를 설명하자면 9:16 의 비율보다 크다면 넓은 화면이라 1을 넣고
작다면 0을 넣는다.

화면이 9:16 이라면 뭘 넣어도 상관 없으니 이러면 긑이다.

이제 이 스크립트를 Canvas 에 붙이고

흰색 사각 바스안에 UI 를 배치하면 될것이다.

SafeArea 라고 아이폰의 상단 노치 (검게 튀어나온 부분) 을 피해서 작업하는 방법도 있다.

내 블로그엔 내용이 없으니 다른 사람 내용을 링크 걸어두겠다.

https://mingyu0403.tistory.com/310

[Unity] SafeArea로 모바일 Notch 디자인 대응하기

화이팅!