언리얼 화면에 맞게 크기 조절

 

이번엔 언리얼에서 화면크기에 맞게 조절하는 방법을 알아보겠습니다. 이 종횡비(ratio)를 맞추는 방법으로 Widget, 즉 UI를 화면에 맞게 작성하는 방법입니다.

 

언리얼 화면에 맞게 크기 조절

 

언리얼 화면에 맞게 크기 조절

 

1. Widget 구조

2. 문제점

 

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

Widget 구조

위젯 구조는 아래처럼 하시면 됩니다. 스케일박스 -> 크기박스 이렇게 설정하시면 됩니다.

 

이어서 크기박스를 아래처럼 설정하시면 크기에 맞게 stretch하게 됩니다.

문제점

이렇게만 하면 문제점이 있습니다. 사이즈박스안에 있는 위젯을 옮길때 위치에따라 값이 달라지게 됩니다.

이를 해결하기 위한 방법으로 사이즈박스에서 크기를 오버라이드 해주면 됩니다.

 

설정한 화면비율의 크기로 해주시면 됩니다. 보통은 1920x1080의 사이즈로 하게 됩니다. 여기서는 저는 1280x720사이즈로 하겠습니다. 아래처럼 사이즈박스의 너비와 높이를 오버라이드하면 위와 같은 이슈는 없어지게 됩니다. 

아래는 적용된 후의 결과 이미지 입니다.

 

또 다른 이슈가 있습니다. 바로 분명 조절했는데 위치가 맞지 않는 경우 입니다.

아래처럼 서로 다른 창이 생겨서 다른 상황인데요. 이 이슈는 스케일박스의 스트레치를 바꿔주시면 됩니다. 기본적으로 scale to fit으로 되어있습니다. 이 경우는 지정된 scale의 값으로 저장이 됩니다.

 

스케일박스의 스트레치를 fill로 바꾸어주면 화면에 맞게 크기가 변경됩니다.

 

이렇게 위젯의 비율을 고정시켜서 하는 방법에 대해서 알아보았습니다. 이 작업을 무조건 해야하는가에 대해서는 사실 하지않으셔도 됩니다. 화면이 항상고정되어 있다면 굳이 하지 않으셔도 됩니다만 여러 화면과 플랫폼을 사용하시는 경우라면 추가하시면 됩니다. 근데 항상 이 부분은 어렵더라구요...

 

 

추천글

게임 개발 기초: 언리얼 엔진을 사용한 키보드, 마우스, 터치스크린 입력 처리

게임 개발 기초: 언리얼 엔진을 사용한 키보드, 마우스, 터치스크린 입력 처리