유니티) 화면 해상도 대응
최근 간단한 미니 게임을 만들어 공유하였으나
제가 작업한 해상도와 유저의 화면 해상도의 차이가 있어
버튼이 겹치거나 이미지가 삐져나오는 등 UI 배치에 문제가 발생하였습니다.
이를 해결한 과정을 정리해보겠습니다.
뭐가 잘 안될 때는 공식 메뉴얼부터 보는 습관을 들이면 좋습니다.
기능에 대한 이해를 바탕으로 활용에 어려움을 겪을 때 스텍 오버플로우, 유튜브, 블로그 등 다른 정보를 참고하는 방향이 좋더군요.
https://docs.unity3d.com/kr/2023.1/Manual/script-CanvasScaler.html
캔버스 스케일러 - Unity 매뉴얼
캔버스 스케일러(Canvas Scaler) 컴포넌트는 캔버스 내 UI 요소의 전체적인 스케일과 픽셀 밀도를 제어하는 데 사용됩니다. 스케일은 글꼴 크기와 이미지 경계 등 캔버스 아래의 모든 요소에 영향을
docs.unity3d.com
https://docs.unity3d.com/kr/2021.3/Manual/class-RectTransform.html
사각 트랜스폼 - Unity 매뉴얼
Rect Transform 컴포넌트는 Transform 컴포넌트의 2D 레이아웃 버전입니다. 트랜스폼은 포인트 하나를 나타내지만, Rect Transform은 UI 요소를 안에 넣을 수 있는 사각형을 나타냅니다. 사각 트랜스폼의 상
docs.unity3d.com
메뉴얼에서 찾은 정보를 기반으로
1. Canvas 설정 변경 : 화면 크기가 바뀌더라도 UI들의 크기를 그에 맞게 바꾸어주는 작업
1) UI Scale Mode > Scale With Screen Size : 화면 크기의 변화에 따라 UI 크기 변경
2) Reference Resolution : 기준이 되는 해상도로 UI 작업한 해상도를 입력
3) Match : 가로, 세로 비율에 맞게 줄이도록 0.5로 설정
이제 배치하고 싶은 위치에 UI를 배치하는 방법을 알면 끝납니다.
2. 각 UI의 배치 위치에 맞게 Pivot 적절히 배치 &이격 위치 조정
예시로 2가지만 들어보겠습니다. 나머지는 해당 포스트의 내용만으로 응용이 가능하다 생각합니다.
1) 화면 구석에 위치해야 하는 UI
Rect Transform > Pos X, Y, Z, Pivot
위의 UI 그룹을 예시로 들어보겠습니다.
화면 오른쪽 위 끝에 위치한 삼각형 4개가 꽂혀있는 것이 pivot입니다.
이를 드래그해서도 이동할 수 있고, 인스펙터 창에서 수치로 조절할 수도 있습니다.
pivot은 x축 0: 화면 가장 왼쪽 ~ 1 : 화면 가장 오른쪽
y축 0: 화면 가장 아래 ~ 1 : 화면 가장 위
예시처럼 pivot을 1, 1 (오른쪽 위)로 세팅하고 각 축 pos을 원하는 만큼 띄워준다면 화면 오른쪽 위 구석에 UI가 붙습니다.
그 후 Pos X~Z를 조절하여 끝에서부터 이격을 줄 위치를 만들어줍니다.
이렇게 세팅한다면 화면 오른쪽 위에서 세팅한 위치만큼 이격이 있는 상태로 해상도를 바꿔도 위치가 유지됩니다.
부모 오브젝트가 캡슐로 만들어 회전시켰기에 pivot 위치가 저렇게 보입니다.
하나 볼만한 건 pivot 값이 부모 UI 오브젝트인 Time_panel 위치를 기준으로 정해집니다.
이전에 UI가 Canvas의 자식 오브젝트인 Time_panel이 pivot으로 위치한 것과 동일한 개념으로 보시면 됩니다.
텍스트는 부모 오브젝트 Time_panel의 중앙에 위치해야 하므로 pivot을 0.5, 0.5 , Pos 값을 모두 0으로 맞춰줍니다.
여기서 주목하여 할 내용은 Auto Size입니다.
위의 Canvas 설정대로 화면의 크기가 바뀌면 UI가 축소/확대됨에 따라
그 안의 모든 UI 오브젝트의 Rect Transform의 Width, Height 값도 확대/축소되니
그에 맞게 텍스트 사이즈의 변경도 자동으로 해주도록 Auto Size 항목을 체크하고
Auto Size Option으로 최소/최대 글자 크기만 조정해주었습니다.
WD% : 글자 폭 상한 (글자 사이즈 조절보다 우선)
Line : 음수 값만 사용 가능. 줄 간격을 줄임 (글자 사이즈 조절보다 우선)
이라고는 설명에 되어있으나 아직 쓸 일은 없어 이런 기능이 있는지만 공부해뒀습니다.
2) 특정 위치에 배치할 UI
위와는 다르게 pivot의 삼각형이 각각 박스의 꼭짓점 위치에 있습니다.
드래그하여 박스 크기에 맞게 배치하면 수월하게 위치를 맞출 수 있습니다.
위의 텍스트와 같은 방법으로 버튼 중앙에 오도록 조절
좌우의 버튼 문양위에 겹치지 않도록 텍스트 박스 크기를 그 이하로 조절하였습니다.
<< 결과 >>
마지막은 획득 창 위에 약간 걸치긴 하나 이건 Grid Layout Group의 간격, 이미지 스케일을 조절하여 해결하였습니다.
버튼 텍스트가 문양 위로 침범하는 현상도 보이는데
이는 Auto Size Option의 글자 크기 최소를 줄인다면 해결 가능하나
너무 작아지면 가시성이 떨어지기에 지금의 옵션을 유지하기로 했습니다.
그 외 포스트 내에 조치한 UI들은 의도한 대로 나옴을 확인했습니다.