[Godot Engine] 다양한 화면 크기에 맞게 게임화면을 가운데 위치 시키는 방법

다양한 화면 크기에 맞게 게임화면을 가운데 위치 시키는 방법

Godot engine은 다앙한 화면에서 어떻게 화면을 보여줄지 설정할 수 있게 여러가지 옵션들을 제공해 준다. 

만일 화면을 가득 채우지 않고 검은색 띠로 화면의 남는 영역을 채워도 되거나, 게임의 가로세로 비율을 화면에 맞게 변경해도 된다면, 기본 옵션중에 하나를 적절히 골라 사용하면 된다.

하지만, 기본 옵션만으로는 가로 세로 비율을 유지 한 채로 다양한 화면크기에 맞춰서  게임배경을 화면 가득 채우면서 게임내 요소들을 적절히 배치 하는 것은 쉽지 않는 일이다.

우선 요구사항을 정리해 보면 다음과 같다.

1. 다양한 화면 크기에서 배경은 화면을 꽉 채워야 한다.
2. 게임의 컨텐츠들은 화면 크기에 맞게 적절히 배치 되어야 한다.

이 두가지 요건을 만족시키는 여러가지 방법이 있을 수 있겠지만, 그 중 내가 시도한 내가 생각하기에 가장 간단한 방법을 여기에 소개 해 보려 한다.

1. 배경과 컨텐츠를 분리 한다.

배경 노드와 배경외 나머지 게임 컨텐츠를 분리해서, 배경은 화면을 가득 채우는데 사용하고 컨텐츠는 화면 크기에 맞게 조절해서 배치 하도록 한다.

우선 새로운 씬을 만들고, 이름을 Game 이라고 하자.

2. 배경을 전체 화면에 맞도록 조정한다.

만일 단색 배경으로 할 경우에는 ColorRect 노드를 사용하면 될 것 이고, 이미지를 사용하려 한다면 TextureRect, 그외 테두리가 있는 배경을 원한다면 NinePatchRect를 사용하면 된다. 좀 더 복잡한 배경을 원한다면 별도의 Scene으로 구성한 후, instance화 해서 배경으로 사용할 수 도 있을 것 이다.

이 글에서는 가장 단순한 예제를 통해 아이디어를 보여주기 위해 단색으로 배경을 설정 할 것 이므로 필요한 것은 ColorRect 다.

Scene의 루트 노드를 ColorRect로 변경 하고, 노드의 상하좌우 anchor들을 각각 0, 1, 0, 1로 설정 하고, margin들도 역시 모두 0으로 설정 한다. 이렇게 하면 윈도우의 크기가 변해도 전체 윈도우를 ColorRect가 채우게 된다.

3. 컨텐츠를 모두 포함하는 씬을 만들어 그 컨텐츠 씬을 화면의 중앙에 배치 한다.

컨텐츠로 사용할 씬을 하나 만들고 이름을 Contents 라고 하자. 루트 노드는 내 게임에 적합한 최적의 비율을 가지도록 크기를 설정해 준다. 

내 경우는 Project - Settings - Display의 Width와 Height가 각각 600, 400 으로 설정 되어 있으므로, 내 컨텐츠들도 여기에 꽉 차도록 크기를 지정 할 것 이다. 그리고, 루트 노드의 색상을 투명하게 해서 앞에서 만든 배경이 보이도록 한다.

모든 게임은 이 컨텐츠 씬 안에서 동작하도록 게임을 작성한다. 예제에서는 기본 버튼 하나와, 이전 포스팅에서 작성한 에니메이션 버튼을 추가 한다.

이제, 이 컨텐츠 씬을 배경이 있는 씬에 배치 하도록 해 보자. Game 씬의 자식 노드로 지금 만든 Contents 씬의 instance를 넣으면 된다. 하지만, 실행 후 윈도우를 조절 해 보면, 바당 화면은 크기에 맞게 색상이 꽉 채워지지만, 컨텐츠는 좌상단을 기준으로 고정된 위치에 고정된 크기로 표시 되는 것을 확인 할 수 있다.

여기서 핵심은 현재 화면의 가로 크기와 세로 크기를 얻은 후, 그 크기에 적절하게 비율을 계산 한 후 더 작은 비율에 맞도록 scale 값을 구해 컨텐츠 노드 자체의 확대/축소를 통해 화면안에 적절하게 배치 할 수 있는 크기로 만든 후 배치 하는 것 이다. 이 부분은 스크립트를 통해 이루어 진다.

Game 씬에 다음과 같은 스크립트를 추가 하자.

스크립트를 추가 한 후, 실행을 하면 다음과 같이 화면이 어떤 크기로 변경 되어도 컨텐츠는 화면을 최대한 채우면서 가운데에 위지 하게 된다.

만일, 모바일 기기같이 사용중 화면 크기 변경이 없는 경우는 _ready() 안에서 화면 배치를 하고, 화면 크기 변경에 따른 처리를 따로 해주지 않아도 된다.