[Tip] 화면 해상도 & 가로 세로 비율 조정 02

1편에 이은 후속이다. 1편에서 언급한 실험 결과인 셈. 

 

https://devsquare.tistory.com/11

[Tip] 화면 해상도 & 가로 세로 비율 조정 01

---

아래는 나름대로 정리한 것이다. 물론 개발하는 개개인마다 생각하는 정답은 다르기 때문에 이것이 100% 정답이라고 할 수는 없겠다. 하지만 나처럼 "찌그러진 원이나 늘어진 화면"을 싫어하고, "원 빌드 모든 단말기 지원"를 궁극적으로 추구한다면 아래와 같은 방법이 하나의 대안이 될 수 있겠다. 

 

우선 카메라 부터 설명을 하겠다.

 

1) 카메라

 

▶찌그러짐 현상은 실제 화면의 AspectRatio와 Resolution상의 AspectRatio가 다를 때 생긴다.

  가령 1280 * 720 화면으로 개발한 App이 있다고 하자.

  개발자는 여러가지 이유로 1280, 720으로 setResolution한다면...

  그리고 정사각형(1920 * 1920)의 어떤 단말기가 존재한다면

  실제 화면과 해상도 상의 비율 차이로 늘어짐이 발생한다.

  720px을 1280px로 늘려서 그리니, 세로로 길쭉하게 늘어짐이 발생하는 것.

 

  ViewPort Rect가 (0, 0, 1, 1)일 때, Screen Resolution의 Ratio에 맞게 꽉차게 그려진다.
 다만 1280*720 화면을 1920*1920 화면에 Blit 하여 그리니 늘어짐 현상이 일어나는 것.

 아무 생각없이 setResolution(1280, 720)을 뙇 때렸을 때 벌어지는 참극은 아래와 같다.

 

 즉, 화면의 일부를 잘라낸다고 하더라도, Screen AspectRatio는 건들면 안된다는 것이다. 안타깝게도 비율을 유지한 채 자동으로 Blit 하는 방법은 없는 듯하다.

 

https://answers.unity.com/questions/1457096/graphicsblit-scale.html

Graphics.Blit scale - Unity Answers

결국, setResolution할 때, 기존 스크린의 AspectRatio를 유지해야 한다.

 

 이제 되었다! 올레!!! 라고 외치겠지만, 잘 생각해보자.

 기존 화면 비율을 유지한채 setResolution하면, Blit 시, 찌그러짐&늘어짐 현상이 일어나지 않는다.

 즉, 요컨대 화면을 구태어 잘라낼 필요가 없다.

 

늘어짐, 찌그러짐 현상은 어디선가 setResolution으로 AspectRatio를 해칠 때 발생하는 것이다.

해상도 고정은 문제의 원인이지, 문제의 해답이 아닌 것이다.

---

2) 캔버스 - UI

 

▶ UI는 최대한 반응형을 고려하여 설계한다.

   즉, UI 때문에 특정 화면 비율을 강제해야 하는 경우를 최소한으로 줄인다.

   가급적이면 가로, 세로 모두 stretch를 사용하고, 차선으로는 한쪽 방향만 stretch 하는 것을 생각하자.

   stretch를 사용하지 않는다면, 가급적이면 모서리를 기준으로 작업을 하자.

   

▶ 캔버스는 Screen Space - Overlay를 사용하자.

    카메라 뷰포트를 스크립트를 통해 건들지 않는다면, Screen Space - Camera는 특수한 경우를 빼고는 거의 쓸 일 없다. 카메라 뷰포트를 건들여놓고, 캔버스를 변경된 카메라 크기에 맞추기 위해 Screen Space - camera를 선택하는 경우는 지양하자. (오브젝트가 UI를 가릴 수 있다.)

Screen Space - Overlay

Screen Space - Camera

 

---

 

조금 길어졌는데 짧게 4줄로 요약하면 아래와 같다.

 

▶ setResolution 시 기존 AspectRatio을 유지하자.

▶ AspectRatio를 일정하게 유지하면, 카메라는 절대 건들 필요 없다.

▶ 반응형 UI를 고려하자

▶ Screen Space - Overlay