[Unity] 해상도 변경과 UI 배치
유니티 게임 씬에서 해상도를 변경하면 정성껏 만들어둔 UI 배치가 이상해질 때가 있습니다.
이럴 때 사소하지만 잊지 말아야 하는 방법을 남겨봅니다.
먼저 이러한 캔버스가 있다고 가정합니다. 해상도는 1080*1920으로 설정되어있습니다. UI 배치가 보기 좋은 상태네요.
그러나 해상도를 바꾸는 순간 배치가 이상해집니다.
1. 같은 비율로 해상도를 바꿀 때
먼저 9:16 비율인 1080*1920 해상도를 같은 비율인 1440*2560 해상도로 바꾸면 아래와 같은 결과가 나옵니다.
같은 비율로 해상도를 바꾸는 경우 각 UI요소 위치는 다행히 잘 있지만, 화면 크기가 커진 만큼 UI가 어딘가 더 축소된 느낌이 듭니다.
이 문제를 해결하는 것은 꽤나 간단합니다.
Canvas의 CanvasScaler컴포넌트에서 UI Scale Mode-Scale With Screen Size 를 처음 맞춰주었던 해상도로 만들면 같은 비율로 해상도를 바꾸었을 때
이렇게 1080*1920 해상도에서 설정한 것처럼 예쁘게 배치가 된 것을 확인할 수 있습니다.
참고: https://docs.unity3d.com/kr/current/Manual/script-CanvasScaler.html
캔버스 스케일러 - Unity 매뉴얼
캔버스 스케일러(Canvas Scaler) 컴포넌트는 캔버스 내 UI 요소의 전체적인 스케일과 픽셀 밀도를 제어하는 데 사용됩니다. 스케일은 글꼴 크기와 이미지 경계 등 캔버스 아래의 모든 요소에 영향을
docs.unity3d.com
2. 같지 않은 비율로 해상도를 바꿀 때
위의 캔버스 스케일러를 사용해도 비율이 같지 않은 해상도로 바꾸면 아래와 같이 문제가 생깁니다.
이처럼 캔버스 스케일러를 사용해도 해상도 비율이 다르면 UI가 의도대로 되지 않고 잘리는 모습을 확인할 수 있습니다.
이 문제를 해결하는 방법도 꽤 간단합니다. 바로 캔버스 하위 객체 각 오브젝트의 앵커 프리셋을 조정하는 방법입니다.
캔버스 요소에는 Rect Transform이라는 컴포넌트가 있는데, 사진의 표시된 부분을 클릭하면 앵커 프리셋이 나타납니다. 이는 ui요소가 캔버스의 어디에 위치해야 하는지를 지정해주는 기능입니다.
앵커 프리셋의 파란색 화살표는 stretch기능으로 해상도에 맞게 UI크기도 늘어나고 줄어들게 조절되며,
파란색 화살표가 아닌 9개로 나뉜 점 부분은 UI의 크기는 그대로이며 위치를 지정해주는 역할을 합니다.
바꿀 오브젝트를 선택하고 앵커 프리셋을 열어 Alt키를 누르며 원하는 것을 클릭하여 앵커를 바꾸면 즉시 UI 요소가 어디에 위치할지 확인이 가능합니다.
예를 들어 나가기 버튼이 우측 상단에 있어야 한다고 하면, 앵커 프리셋을 열고 Alt 키를 누른 후 우측 상단의 앵커를 눌러주면 됩니다.
그리고 앵커를 바꾸었다면 세부적으로 자신이 원하는 위치에 따라 Rect Transform의 좌표값을 변경해 주면 됩니다.
앵커를 신경쓰지 않고 있다가 해상도를 바꾸면 캔버스 요소의 앵커를 일일이 변경해주어야 해서 번거로울 수 있습니다.
캔버스 요소를 처음 만들 때 부터 위치를 고려해 앵커를 잘 지정해주도록 합니다.
이렇게 앵커를 잘 지정해두면 해상도의 변경에 따라 알맞은 UI를 확인할 수 있습니다.
앵커를 설정할 때는 여러 해상도로 바꾸어보며 위치가 잘 지정되어 있는지 확인하면서 바꿉니다.
참고: https://docs.unity3d.com/kr/current/Manual/HOWTO-UIMultiResolution.html
여러 해상도의 UI 설계 - Unity 매뉴얼
최신 게임과 애플리케이션은 아주 다양한 스크린 해상도를 지원해야 하는 경우가 많고, 특히 UI 레이아웃을 여러 해상도에 맞게 조정할 수 있어야 합니다. Unity의 UI 시스템에는 이 용도로 사용하
docs.unity3d.com
3. 해상도를 특정 해상도로 지정하고 싶을 때
기기에 따라 해상도가 매우 다양하여 원하는 UI가 적용되지 않을 수 있습니다. 이때 자동 해상도가 아닌 특정 해상도를 지정하기 위해 사용하는 것이 SetResolution함수입니다.
게임을 플레이 할 때 가장 먼저 실행되는 스크립트의 Start함수에
Screen.SetResolution(가로 픽셀, 세로 픽셀, full screen 유무);
출처: https://prosto.tistory.com/185 [Prosto]
유니티 해상도 설정(SetResolution & UI)
유니티로 만든 게임을 특정 해상도로 지정해주고 싶을 때가 있습니다. 다양한 해상도가 있는 스마트 폰에 게임을 만들 때도 만들 때 특정 해상도가 있겠죠? (자동 해상도면 휴대폰에 따라 보이
prosto.tistory.com
를 작성해줍니다. 이때 위의 1번인 캔버스 스케일러를 같이 사용하여 해상도를 특정 해상도로 지정해줍니다.