[Unity] 해상도에 따른 화면 비율 유지(feat. 레터박스(Letter box))

---

안녕하세요 극꼼입니다.

오늘은 해상도가 달라져도 화면 비율을 유지할 수 있는 래터박스를 만들어보도록 하겠습니다. 

 

저는 16:10 비율로 만든 후, 다른 비율의 해상도일 경우 남은 빈 공간을 검은 래터박스가 채우게 해줄겁니다. 

우선 세로 비율을 1로 두었을 때의 가로 비율을 구해줍니다. (16:10의 경우, 가로 비율은 1.6)

만약 currentAspectRatio가 1.6(내가 원하는 화면 비율)보다 클 경우와 작을 경우를 각각 다르게 해주었습니다.

---

1. 먼저 currentAspectRatio가 1.6보다 작을 경우 입니다.

아래와 같이 가로 폭이 좁아져 보이는데요, 이럴 때 세로폭을 낮추고(h), 화면을 가운데로 맞춰줍니다(y).

float h = currentAspectRatio / fixedAspectRatio;  //늘어난 세로 폭을 비율에 맞게 줄여줍니다.
float y = (1 - h) / 2;  //줄인 화면은 아래측에 쏠리게 됩니다. 중앙에 정렬해줍니다.
cam.rect = new Rect(0.0f, y, 1.0f, h);

위 코드를 적용하면 화면 비율이 유지되고, 남은 부분은 검정색 래터박스가 채워지는 것을 보실 수 있습니다.

 

 

 

2. 다음은 currentAspectRatio가 1.6보다 클 경우 입니다.

이번에는 반대로 가로폭이 늘어나 보입니다. 가로폭을 낮추고(w), 화면을 또 가운데로 정렬해줍니다(x).

float w = fixedAspectRatio / currentAspectRatio; //늘어난 가로폭을 다시 비율에 맞게 해줍니다.
float x = (1 - w) / 2; //화면 정렬을 맞춰줍니다.
cam.rect = new Rect(x, 0.0f, w, 1.0f);

 

 

3. UI가 화면 밖으로 빠져나가 UI 잔상이 레터박스 위로 생길 경우, 화면을 검정색으로 칠해주는 코드를 사용해줍니다.

void OnPreCull() => GL.Clear(true, true, Color.black);

https://geukggom.tistory.com/107

---

 

전체 코드는 다음과 같습니다. (3번 제외되어 있음!)

float currentAspectRatio = (float)Screen.width / (float)Screen.height;
if(currentAspectRatio == fixedAspectRatio)
{
    cam.rect = new Rect(0.0f, 0.0f, 1.0f, 1.0f);
    return;
}
else if(currentAspectRatio > fixedAspectRatio)
{
    float w = fixedAspectRatio / currentAspectRatio;
    float x = (1 - w) / 2;
    cam.rect = new Rect(x, 0.0f, w, 1.0f);
}
else if(currentAspectRatio < fixedAspectRatio)
{
    float h = currentAspectRatio / fixedAspectRatio;
    float y = (1 - h) / 2;
    cam.rect = new Rect(0.0f, y, 1.0f, h);
}