언리얼 UMG 화면 비율 맞추기 ( Unreal UMG screen ratio fit )

 

[ UMG의 비율 ]

언리얼 UMG를 개발하다보면 

처음 작업할때는 1920x1080 정도의 비율로 작업하게 된다.

 

이렇게 작업한 UMG는 따로 조절하지않아도 피벗만 잘 설정해두면

대부분의 스마트폰에서는 무리없이 비율이 맞게된다.

 

 

[ 문제점 : 기기에 따라서 UMG가 화면을 벗어난다! ]

 

하지만 문제는 태블릿의 경우인데,

특히 아이패드의 경우 3:4라는 끔찍한 화면비율로 만들었던 UMG가 완전히 망가진다.

 

 

이런 경우 의외로 간단하게 해결할 수 있는데, 

UMG관련 튜토리얼이 찾기가 힘든편이라 알기 힘들다. 방법은 아래와 같다.

 

 

1단계 : Canvas Panel Wrapping하기

- 최상단 Canvas Panel 위에 SizeBox로 Wrap 해주고, 그 위에 다시 Scale Box로 Wrap해준다.

 

 

2단계 : ScaleBox설정하기

- ScaleBox와 SizeBox 각각의 설정 조합에 따라서 만들 수 있는 비율은 굉장히 많다. 

- 여기서는 Stretch > Scale to Fit과 Stretch Direction > Both 로 설정한다. 

 

3단계 : SizeBox설정하기

- SizeBox는 최초에 의도한 해상도를 기준으로 Width와 Height Override를 입력해준다. 

- 여기서는 1920 x 1080을 입력했다.

 

- Horizontal Alignment와 Vertical Aligment를 중앙정렬이냐 Stretch냐에 따라서 또 달라지게 된다.

 

Vertical Alignment : 중앙정렬인 경우

Vertical Alignment : Stretch 인 경우

 

비율이 중요한 경우에는 중앙정렬을, 각각 요소의 개별 크기만 중요한 경우에는 Stretch로 설정해주면 된다.