[Unity] 해상도에 따른 화면 비율 유지(feat. Canvas Scaler)

---

안녕하세요 극꼼입니다!

지난번에 레터박스를 이용해 디폴트 해상도에서 벗어나면 남는 부분을 까맣게 처리했는데요, 

https://geukggom.tistory.com/104

[Unity] 해상도에 따른 화면 비율 유지(feat. 레터박스(Letter box))

 

이번 포스팅에서는 캔버스 내에서 배경이 되는 UI가 화면 빈 공간에 맞춰 크기가 달라지게 하는 방법에 대해 다뤄보겠습니다.

아래는 예시)

9:16 비율의 화면입니다.

.3:4

9:19.5

---

UI Canvas의 인스펙터창에는 Canvas Scaler라는 컴포넌트가 있습니다. 

여기서 UI Scale Mode를 'Scale With Screen Size'로 설정해줍니다.

해상도가 바뀌어도 화면 크기에 맞춰 UI 크기가 바뀌도록 해줍니다.

Screen Match Mode는 'Match Width Or Height'로 설정해줍니다. 디폴트 해상도(Reference Resolution) 비율보다 가로 또는 세로비율이 더 커질 경우 어디를 기준으로 둘건지를 정해줍니다. 

Width쪽으로 Match를 옮길 경우, 화면에 가로폭이 모두 보이는 방향으로 UI크기를 조절해주므로

이렇게 세로방향에 빈 공간이 생기게 됩니다.

 

반대로, Height로 설정할 경우, 화면에 세로폭이 모두 보이는 방향으로 UI 크기를 조절해주므로

위와 같이 가로에 공간이 남게 됩니다. 

이렇게 빈 공간이 생기지 않게 그때그때 Match값이 달라지도록 해줄겁니다.

 

* 그 전에, 배경 외의 UI는 

Rect Transform 컴포넌트에서 Anchor Preset을 미리 설정해줘야 화면 밖으로 밀려나지 않습니다.

 

---

코드는 간단합니다.

//Default 해상도 비율
float fixedAspectRatio = 9f / 16f; 

//현재 해상도의 비율
float currentAspectRatio = (float)Screen.width / (float)Screen.height;

//현재 해상도 가로 비율이 더 길 경우
if (currentAspectRatio > fixedAspectRatio) thisCanvas.matchWidthOrHeight = 1;       
//현재 해상도의 세로 비율이 더 길 경우
else if (currentAspectRatio < fixedAspectRatio) thisCanvas.matchWidthOrHeight = 0;

 

배경 UI의 해상도 비율보다 현재 해상도 비율의 가로 비율이 더 길 경우 Match값을 0으로,

세로 비율이 더 길 경우 Match값을 1로 설정해줍니다. 

 

코드를 적용하면 포스팅 처음에 올린 예시들처럼 배경 UI의 크기가 조절됩니다.