게임을 만들면 필히 해상도 관련 문제를 겪는데 진짜 이 해상도 문제가 골치가 매우 아프다.
(원래 나와야 할 정상적인 해상도의 게임)
한 번에 내가 생각한 것처럼 게임이 보이면 참 좋겠지만,
UI 크기가 안 작아져서 화면을 다 가리기도 하고
갑자기 혼자 작아지기도 한다.
정말 다양한 방법으로 게임 화면이 망가지곤 하는데,
이러한 상황을 피하기 위한 해상도 설정 방법을 알아보자!
( 2D 기준 )
1. 레퍼런스
기본적으로 대부분의 게임은 해상도 설정을 할 수 있도록 되어있다.
(최근 재미있게 하고 있는 나인킹즈)
설정을 통해 해상도를 바꾸면,
해상도에 맞게 위치 혹은 크기가 조절된다.
(나인 킹즈의 화면 비율에 따른 요소 위치 변화)
화면 비율에 따라 UI 요소 위치가 조절되는 경우도 있고,
(나인 킹즈의 해상도에 따른 요소 크기 변화)
비슷한 비율에서 전체적인 크기가만 조절되는 경우도 있다.
이것을 보면, 해상도를 고려할 때 중요하게 보아야 할 요소가 두 가지가 있음을 알 수 있다.
UI 위치, 화면 크기
이러한 두 가지 요소를 바탕으로
모든 해상도를 하나하나 고려하는 것이 아닌
대표적인 비율로 UI 레이아웃 구성 고려 => 구성한 레이아웃 구성을 같은 비율의 해상도에 적용
과 같은 느낌이다!
2. UI 위치 (레이아웃)
UI 위치는 대표적인 화면 비율들을 고려하여 짜는 수밖에 없다!
2-1. 대표적인 비율
PC 게임 기준으로는 대표적으로 4:3, 16:9, 16:10, 21:9 정도를 고려하면 된다!
필자는 처음에 1920x1080 기준으로 작업을 해서, 그거에 맞춰서 각각 비율을 샘플을 설정했다!
이제 UI 레이아웃을 짤 때, 저 4개만 바꿔보면서 체크해주면 된다는 뜻
2-2. 레이아웃 구성
UI 레이아웃에서 제일 중요한 것은 바로
가려지지 않는 것이다!
(640x480, 4:3 비율의 최저 해상도 상태의 나인 킹즈)
위의 예시를 보면 가로가 가장 좁은 화면 비율에서도
중앙 상단 지도와 우측 상단 옵션 설정 버튼이 겹치지 않는다.
즉, 해상도를 고려해서 레이아웃을 짤 때,
UI 요소들이 의도치 않게 겹치는 것만 신경쓰면 된다는 뜻.
2-3. UI 요소 설정
간단한 예시를 들자면
(제작 중인 게임 SAMUKID의 시작 화면)
타이틀 로고와 시작 버튼들을
각각 위 아래 기준으로 50 떨어지게 설정해놓으면
설정해놓은 비율에서 확인 결과 큰 문제가 없다!
이러한 방식으로 만들어놓은 UI 화면들을 체크하면서 조절하면 끝.
3. 화면 크기 (해상도 대응)
비율 별로 대응되도록 UI를 구성해놓은 다음
같은 비율의 더 높거나 낮은 해상도로 바꾸면,
( 동일한 16:9 비율인 3840x2160 해상도 )
( 동일한 16:9 비율인 960x540 해상도 )
지나치가 비대해지거나 왜소해진 자신의 몸집을 감추지 못하는 모습을 볼 수 있다.
이러한 경우를 방지하기 위해 유니티에서는 기가막힌 기능을 제공해준다.
3-1. Canvas Scaler
먼저 사용하는 UI, Canvas의 Render Mode를 Camera로 바꿔준 뒤
Render Camera에 사용하는 메인 카메라를 할당하면
아래의 캔버스 스케일러 설정이 가능해진다!
그리고 캔버스 스케일러를 다음과 같이 설정해준다
UI Scale Mode - Scale With Screen Size, 스크린 사이즈에 맞게 확장/축소
Reference Resolution - 대표 해상도, 필자의 경우 1920x1080 기준으로 게임 제작
Screen Match Mode - 가로, 세로 어느 쪽 기준으로 확장/축소 할 지 결정,
3-1-1. Screen Match Mode와 UI 레이아웃 스타일
( Expand 예시, 세로 기준으로 캔버스 크기 결정)
( Shrink 예시, 가로 기준으로 캔버스 크기 결정)
Shrink는 가로 기준, Expand는 세로 기준으로 캔버스 크기를 조절한다
사진 속 설정은 가로 세로 비율을 반반으로 가져가는 설정.
설정은 본인 게임 레이아웃 스타일에 따라서 편한 거로 고르면 된다, 필자는 Expand가 편했음
이렇게 설정하고 나면
크거나 작은 해상도에서도, UI 요소들의 크기가 적절히 조정되는 것을 확인할 수 있다!
4. 해상도 변경 기능
해상도 변경은 Screen.SetResolution을 통해 간편하게 할 수 있다!
4-1. 해상도 변경 UI
일반적으로 해상도는 목록 형태로 표시하기 때문에
드롭다운을 활용해 해상도 설정 UI를 만들어 준다.
참고로, Screen에서 해상도 데이터를 제공하기 때문에 적극적으로 가져다 쓰자!
물론, 필자는 4:3, 16:9, 16:10, 21:9 비율만 걸러서 사용.
Screen.SetResolution(가로, 세로, 전체화면 여부)
이제 UI와 실제 해상도 변경 기능까지 연결해서 적용해주면 완성!
이렇게 잘 적용되는 걸 볼 수 있다!!
굉장히 만족스럽다!
5. 마치며
해상도 때문에 찾아보다가 해상도 설정의 기본에 대한 정보가 별로 없어서 한 번 써봤습니다!
처음 스크린샷 보면 알겠지만,
사실 시작은 피드백 받으려고 itch.io 데모를 올리는 것이었습니다,,,
따라서, 조심스레 피드백 부탁드려보겠습니다... (_ _)
Play in your browser
ttobing3.itch.io
게임에 대해 간략하게 설명하면
이름 : SAMUKID / 장르 : 로그라이트 덱빌딩
( 사무라이 + 꼬마 )
플레이어가 맹인 사무라이를 돕는 꼬마가 되어 함께 스테이지를 진행하는 게임입니다!
( 사무키드 플레이 이미지 )
혼자서만 플레이 하다 보니까 플레이어에게 어느 정보가 전달되지 않는지도 모르겠고,
내겜구려병이 도져서 재미가 없는 것 같은데 어느 부분을 어떻게 고쳐야 할 지도 안 떠오르더라구요...
그래서 부족하거나, 불편한 부분 혹은 제안하고 싶은 개선 사항에 대해서 거침없이, 가감없이 던져주시면 정말 감사히 받겠습니다,,,
궁금한게 있는데, 만약 사용자 모니터가 16:9일 때 해상도 선택 옵션에는 16:10, 21:9 비율은 안 보이게 해야 해는게 맞을까요?
보통 해상도 변경을 창모드에서만 가능하게 하고, 전체화면으로 해놓으면 해상도 바꾸는 드롭다운을 비활성화 해버리더라구요