이 글에서는 사용자가 원하는 해상도의 비율로 스크린의 화면이 고정되게끔 해보겠다.
글로만 설명하면 이해하기 어려우니 이번에 이루고자 하는 결과에 대해 그림을 그려보았다.
보다시피 사용자가 원하는 해상도의 비율이 16:9라고 가정했을 때, 세로가 긴 4:3 비율이나, 가로가 긴 2:1 비율에도 항상 16:9 비율을 유지할 수 있게끔 하는 것이 목표이다. 물론, 남는 여백은 검정 바탕이다.
① SetResolution 함수 제대로 사용하기
해상도 관련해서 구글링을 하다 보면, 게임의 해상도를 변경할 수 있는 Screen.SetResolution 함수를 많이 봤을 것이다.
예로, Screen.SetResolution(1920, 1080, true); 를 입력하면 1920x1080 해상도를 전체화면으로 적용하겠다는 의미다.
/* 참고로 1920x1080 해상도는 16:9 비율이다 */
그렇지만, 이는 16:9 비율인 기기에만 제대로 적용될 것이다. 만약, 4:3 비율의 기기에 이 함수를 적용하면 어떻게 되는지 그림으로 보여주겠다.
만약, 16:9 비율로 이루어진 게임의 화면이 이러하다면,
4:3 비율의 기기에서는 이렇게 보인다.
보다시피, 화면의 비율에 맞추기 위해 억지로 게임 화면을 늘리게 된다.
그렇다면, 이를 해결하기 위해서는 16:9 비율을 4:3 비율로 변경할 필요가 있다.
위와 같은 예시로 든다면, 1920x1080 해상도를 1920x1440으로 변경한다는 것이다.
공식은 간단하다. 가로를 고정하고 세로의 높이를 비율에 맞게 변경한다면,
Screen.SetResolution(1920, (3/4) * 1920, true);
이렇게 될 것이다.
더 상세하게 예를 들어서, 1920x1080 해상도의 게임을 1024x768 해상도의 기기에 맞춘다면, 아래와 같다.
Screen.SetResolution(1920, (768/1024) * 1920, true);
소스는 뒤에서 따로 정리하겠다.
② UI 해상도 설정하기
이 과정은 매우 간단하다.
이 예제에서는 1920x1080 해상도로 고정할 것이기 때문에, Canvas를 생성해주고 위와 같이 설정해준다. Expand는 화면의 크기를 벗어나지 않게 UI를 최대한 펼쳐준다는 의미이다.
또한, 16:9 Aspect로 설정한 상태에서 모서리에 버튼 네 개를 배치해두었다.
이는 16:9 비율의 UI를 구성했다는 말이다.
결과적으로, 16:9 비율의 Canvas가 어떠한 비율에도 중앙에 잘 위치되는 것을 확인할 수 있다.
③ Rect 조절하기
먼저, Rect를 왜 조절해야 하는지부터 설명하겠다.
정말 극단적인 예지만, 1:2 비율의 게임 화면은 이러하다.
이 때, 사용자가 봐야 하는 화면은 아래와 같다.
보다시피, 세로의 길이가 늘어남에 따라 볼 수 있는 가로의 길이가 줄어들었다.
이러한 상황을 방지하기 위해 Rect를 조절하는 것이다.
Rect는 Inspector에 있는 Camera 컴포넌트에서 볼 수 있다.
X, Y는 게임 화면의 왼쪽 아래를 기준으로 이동할 수 있는 변수이고
W, H는 게임 화면의 너비 및 높이를 조절할 수 있는 변수이다.
이 변수들은 모든 0 ~ 1 사이의 값을 가지는 것이 일반적이다.
한번 값을 조절해보면 감이 올 것이다.
그러면 Rect를 조절해보자.
위의 그림과 같이 두 가지 경우의 수가 있다.
첫 번째로 기기의 해상도 비가 더 큰 경우에는 게임 화면의 너비가 감소되어야 하고, X 값이 변경되어야 한다.
예를 들어, 1920x1080 해상도의 게임을 200x100 해상도의 기기에 대응한다면,
| X = [ 1 - { (1920/1080) / (200/100) } ] / 2 |
| Y = 0 // 위로 움직일 필요없다 |
| W = (1920/1080) / (200/100) |
| H = 1 // 게임 화면의 높이는 유지 |
두 번째로 게임의 해상도 비가 더 큰 경우에는 게임 화면의 높이가 감소되어야 하고, Y 값이 변경되어야 한다.
예를 들어, 1920x1080 해상도의 게임을 100x200 해상도의 기기에 대응한다면,
| X = 0 // 옆으로 움직일 필요없다 |
| Y = [ 1 - { (100/200) / (1920/1080) } ] / 2 |
| W = 1 // 게임 화면의 너비는 유지 |
| H = (100/200) / (1920/1080) |
이로써 Rect의 설정 값까지 알아보았다.
스크립트는 아래에 넣어두었다.
using UnityEngine; public class Fixed : MonoBehaviour { private void Start() { SetResolution(); // 초기에 게임 해상도 고정 } /* 해상도 설정하는 함수 */ public void SetResolution() { int setWidth = 1920; // 사용자 설정 너비 int setHeight = 1080; // 사용자 설정 높이 int deviceWidth = Screen.width; // 기기 너비 저장 int deviceHeight = Screen.height; // 기기 높이 저장 Screen.SetResolution(setWidth, (int)(((float)deviceHeight / deviceWidth) * setWidth), true); // SetResolution 함수 제대로 사용하기 if ((float)setWidth / setHeight < (float)deviceWidth / deviceHeight) // 기기의 해상도 비가 더 큰 경우 { float newWidth = ((float)setWidth / setHeight) / ((float)deviceWidth / deviceHeight); // 새로운 너비 Camera.main.rect = new Rect((1f - newWidth) / 2f, 0f, newWidth, 1f); // 새로운 Rect 적용 } else // 게임의 해상도 비가 더 큰 경우 { float newHeight = ((float)deviceWidth / deviceHeight) / ((float)setWidth / setHeight); // 새로운 높이 Camera.main.rect = new Rect(0f, (1f - newHeight) / 2f, 1f, newHeight); // 새로운 Rect 적용 } } }- 결과 GIF -
※ 참고 사항
1. 내용이 이해가지 않는다면 Canvas만 설정하고, 스크립트를 복붙하여 setWidth, setHeight 변수만 원하는 해상도로 수정하면 된다.
2. 만약, UI를 Rect 범위 밖으로 내보낸다면 번짐 현상이 발생할 수 있다. 이 때는 UI에 검은 이미지를 배치하여 커버하기 바란다.