유니티를 기준으로 빌드할 수 있는 플랫폼도 다양하고 플랫폼별 실행환경에도 셀 수 없을만큼 다양한 기기들이 존재합니다. 다행히 어느정도 규격이 되는 해상도들이 정해져있긴 하지만 사용자가 어떤 기기에서, 어떤 해상도에서 실행할지에 따라 각각 다른 해상도로 개발을 진행하는 것 또한 사실상 불가능에 가깝습니다. 그래서 어떤 기기, 어떤 해상도에서 실행되던 개발자가 원하는대로 사용자에게 보여질 수 있도록 하는 방법에 대해 알아보도록 하겠습니다.
Canvas를 생성하고 클릭해서 인스펙터에서 보면 기본으로 추가되어있는 'Canvas Scaler' 라는 컴포넌트가 있습니다. 이 컴포넌트는 Canvas 내의 UI 요소들의 스케일과 픽셀 밀도를 제어해주는 컴포넌트입니다. 컴포넌트의 자세한 기능들은 유니티 공식 레퍼런스 docs.unity3d.com/kr/2018.4/Manual/script-CanvasScaler.html 에서 확인하실 수 있습니다.
바로 이 컴포넌트를 이용해서 여러 해상도들에 대응할 수 있도록 만들어 줄겁니다.
Canvas Scaler설정에 앞서 먼저 Canvas 컴포넌트의 설정을 바꿔주도록 합시다.
Canvas 컴포넌트의 Rander Mode가 기본 설정으로 Screen Space - Overlay로 설정되어 있을텐데요 이 설정을 Screen Space - Camera 로 바꿔주고 Render Camera에 사용할 Camera 오브젝트를 링크시켜줍니다. 그러면 설정해준 캔버스는 링크된 카메라에만 렌더되어 보여집니다. 게임 개발을 하다보면 컷신이 나온다거나, 대사 창이 나온다거나, 타격/피격 수치가 화면상에 표시되어야 하는 등 다양한 요소들이 보여지도록 해주어야 하는데 이때 렌더되는 순서나 특정 요소만 렌더링 시켜 보여주어야 하는 경우가 생기는데 이때의 제어를 캔버스와 카메라를 다양하게 사용하면 보다 더 편하게 제어할 수 있게됩니다.
카메라도 설정해줍시다.
UI 요소들은 특별한 경우가 아니라면 항상 평면공간 2D에서 표현시키기 때문에 링크시킨 카메라 오브젝트에 Projection 값을 Orthographic으로 설정시켜줍니다. Size는 원하는대로 조절하셔도 상관없습니다만, 어차피 캔버스에서 기준이 되는 해상도를 잡아줄 것이기 때문에 하지않겠습니다.
다시 캔버스로 돌아와서 처음 언급했던 Canvas Scaler 옵션을 설정해주도록 합시다.
UI Scale Mode를 기준이 되는 해상도에 맞춰 재배치가 가능하도록 Scale With Screen Size로 바꿔주고 Reference Resolution에 원하는 기준 해상도를 잡아줍니다. 저는 가로 환경 FHD로 설정해주겠습니다. 마지막으로 Screen Match Mode가 Match Width Or Height로 설정되어 있는 상태에서 Match값을 1로 설정시켜줍니다. 만약 세로 환경으로 만드실 경우 0으로 설정해주시면 됩니다.
이제 기본적인 설정을 마쳤습니다. 이제 UI를 배치해봅시다.
저는 각 모서리들에 UI가 배치되도록 설정했습니다. 만약 이게 게임이라면 저는 사용자들에게 저 버튼들이 화면에서 저렇게 배치되어서 보였으면 좋겠네요. 실제로 사용자들에게도 저렇게 보여지는지 확인해보겠습니다.
일단 게임씬을 전체화면으로 확인해봤습니다. 모두 원하는 위치에 배치되어져 보이네요. 다만 신경쓰이는 부분이 있습니다. 바로 화면에 가득차게 보여지는게 아니고 좌우의 회색부분이 화면을 잘라서 보여줍니다. 그 이유는 제가 게임씬의 해상도를 FHD 1920x1080 (16:9)로 설정해두었기 때문입니다. 유니티 에디터의 상하단에 메뉴들 때문에 게임씬에 보여지는 화면은 위아래가 더 좁아졌기 때문에 그만큼 비율을 맞추기위해 좌우도 줄여서 보여지도록 만든겁니다. 저렇게 잘라서 보여지도록 만들어주는 영역을 레터박스라고 하는데 저는 저 부분이 없이 화면을 가득 메워서 보여줬으면 좋겠습니다.
그래서 이미지에 있는 부분을 클릭해주면 게임씬의 해상도를 설정해줄 수 있는데 이걸 비율과 상관없이 화면 전체에 그려지도록 Free Aspect로 설정해주겠습니다.
[여기서 중요한 점]
만약 애초에 게임씬의 해상도 설정을 Free Aspect로 두고 UI를 배치하시면 안됩니다. 반드시 작업 전에 기준이 되는 해상도, 비율로 설정해두고 작업하셔야 합니다. 만약 Free Aspect로 설정해두고 열심히 작업하시다가 나중에 깨달으시면 UI 오브젝트들을 다 다시 설정해야하는 불상사가 일어날 수 있습니다. 반드시 작업 전 기준 해상도를 설정해주세요.
비율과 상관없이 항상 화면에 가득차서 보여지도록 설정을 바꿔줬더니 좌우에 있던 레터박스 영역은 사라졌는데 제가 배치해두었던 UI들의 위치가 이상하네요. 좌우에 위치한 UI들은 항상 좌우의 가장 끝에 위치시키고 싶은데 말입니다.
그 이유는 바로 제가 처음에 UI 오브젝트들을 생성하고 배치할 때 단순히 PosX, Y 좌표값으로만 배치시켰기 때문입니다. 빨간색으로 박스쳐드린 부분을 보시면 오브젝트의 피벗이 가운데로 설정되어 있는것을 확인하실 수 있습니다. 즉, 해당 오브젝트의 PosX, Y 값은 부모 오브젝트(캔버스=화면)의 가운데에서의 값인겁니다. 상하좌우 모서리가 넓어지던 좁아지던 아무런 관계도 상관도 없는 설정인 셈이지요.
제가 의도하고자 했던 버튼들의 상하좌우 모서리에 위치시키는 배치를 하려면 위와 같이 설정시켜주어야 합니다.
설정하는 곳에 보시면 쓰여져 있습니다만, Shift키와 Alt키를 누르고 설정하는지에 따라 설정이 바뀝니다. 만약 피벗도, 위치도 좌측 상단에 배치시키고 싶으시다면 Shift키와 Alt키를 같이 누른 상태에서 프리셋을 클릭해주시면 간단하게 설정해줄 수 있습니다.
(단 설정은 원하는 배치에 맞춰 설정해주어야 합니다. 절대적인 설정이 아닙니다.)
피벗 설정을 다시 해주고 게임씬을 전체화면으로 만들어보면 이전과 동일하게 레터박스가 생성되고 각 위치에 보여집니다. 겉으로 봐선 아까와 아무런 차이가 없습니다.
하지만 비율과 상관없이 화면에 가득 채워지도록 Free Aspect 옵션으로 변경해주면, 이전과는 다르게 각 모서리에 자동으로 배치되는 모습을 보실 수 있습니다. 이는 가운데 피벗이 아니라 각 버튼 오브젝트들의 피벗 값이 캔버스의 모서리 끝으로 설정되어 배치되기 때문입니다.
이렇게 피벗을 이용하면 실행하는 해상도에 대응해서 자동으로 배치를 시킬 수 있습니다.
테스트로 보여드리기 위해 각 비율에 따라 자동으로 설정되어 보여지는 모습들입니다.
도움이 되셨으면 좋겠습니다.
감사합니다.
'Unity (C#) > Old' 카테고리의 다른 글
| [유니티] 반복문안에서 람다식 사용시 문제 (0) | 2020.10.25 |
|---|---|
| [유니티] Canvas Group 알아보기 (2) | 2020.10.24 |
| [유니티] 팝업 창 띄우기, 끄기 (스크립트x) (22) | 2020.09.06 |
| 유니티 try, catch, finally, throw 예외처리 (0) | 2019.06.04 |
| 유니티 랜덤값 설정하기 (0) | 2019.04.26 |
최근댓글