[Unity Engine] 유니티로 타워 디팬스 게임 만들기 - part5 - UI보충

UI에 관한 이슈 몇가지를 더 짚고 넘어가자

빈캠퍼스를 만들고 Image를 선택하면 하얀네모 하나가 뜬다.
이것을 네개를 만들고 각각 색상을 정해 주자
다음과 같은 화면이 된다.



이 상태에서 화면을 가로화면에서 세로화면으로 바꿔보자



16:9 -> 9:16으로 바꾸었다.



이런 결과를 원한 디자이너는 없을 것이다. 이것은 이미지의
초기 Anchor가 중심으로 잡혀 있기 때문에 가로세로가 바뀌어도
중심을 기준으로 위치를 정하기 떄문에 이런 현상이 나타난다.
여기서 Anchor란 p-osition이 0,0일때 위치하는 장소라고 이해하면 된다.

다시 가로화면으로 돌아와서 각각의 앵커를 조정해보자
Rect Transform 화면에서 Anchor preset으로 조정할 수도 있고
Scene 화면에서 직접 조작할 수도 있다.




각각의 네모들을 가까운 모서리로 Anchor를 잡아주고 다시 변경해보자
하고 다시 바꿔보면 잘 나오는 것을 확인할 수 있다.

이제 해상도 관련 이슈를 알아보자. 보통 UI를 2D로 만들기 때문에
각각의 해상도별로 최적화를 해줘야 된다. 제일 간단한 방법은
기준해상도를 잡고 해상도가 커지거나 다른 해상도로 변하면
그 만큼 스케일을 해주는 것이다.

그것을 가능하게 해주는Component가 바로 Reference Resolution(이하 RR)이다
RR은 Canvas가 있는 GameObject에만 추가할 수 있는 Component로
RR있는 Canvas가 해상도에 맞게 스케일을 해준다.

백문이 불여일견 한번 어떤 작용을 하는지 보자
RR을 넣기 않았을 때에 해상도를 변경해보자


예시화면 - 유니티메뉴얼1

이제 Canvas에 RR을 넣어보자 Component - Layout - Reference Resolution에 있다.



이제 다시 해상도를 변경하면 다음과 같이 나오는 것을 볼 수 있다.



해상도가 변해도 일정한 비율의 네모가 유지됨을 알 수 있다.

여기서 해상도를 가로로 바꾸면 네모크기가 쪼그라 드는 것을볼 수 있다.
이것은 RR이 해상도의 Width를 기준으로 크기를 변경하도록 초기값이 셋팅되어
있기 때문이다. 동일한 크기 비율이라면 눈에 띄지 않지만

극단적으로 1600 * 1200 화면에서
1600 * 100 화면으로 바꾸어도 네모크기는 변하지 않는다



이런 극단적인 디스플레이가 아닌 일반 화면에서 가로와 세로회전에서
동일한 비율의 네모를 얻고 싶으면 Inspector에서 RR의 Match width or Heig의 값을 0.5로
조절해주면 된다.



중요한건 구현이 아니라 응용이다. 해상도가 다르다고 이렇게 잡아 늘리는 방법도 있는반면
좀더 넓은 시야를 제공하면서 pixel의 품질을 유지하는 방법도 있다.
LOL처럼 옵션에서 유저가 UI크기를 줄어들게 한다던가 라는 예를 생각해보자 이런 상황에
유연하게 대처할 수 있어야겠다.

다음은 적들의 HP Bar를 만들어 보...자....아.....아..

(유니티4.6 BETA 설치폴더)/Data/Documentation/html/en/Manual/HOWTO-UIMultiResolution.html
의 내용을 참고하였음(쓰고보니 차라리 번역할껄 OTL 아냐 번역이 더 힘들어)