안녕하세요.
이번에는 게임 상에서 esc 키를 누르면 나타나는 일시 정지 화면을 만들어 보겠습니다. 이번 챕터는 유튜브 강의를 참조하여 만들었습니다. 강의 링크는 하단에 남기겠습니다.
고도엔진에 대한 한국어 강의나 블로그가 부족해서 주로 영어 강의를 찾게 되네요.
📌 씬 생성
Canvas Layer
우선 Canvas Layer라는 노드를 기본으로 하는 씬을 생성 해줍니다. Canvas Layer는 다른 2D 노드와 분리된 독립적인 레이어에서 동작하는 특징이 있습니다.
이러한 특징으로 주로 UI나 배경, 효과 등을 렌더링하기 위해 사용됩니다. 주요 목적은 게임의 다른 요소들과 독립적으로 움직이거나 고정된 콘텐츠를 제공하는 것입니다.
그 후 Canvas Layer 밑에 MarginContainer,VBoxContainer 같은 여러 노드들을 추가하여 줍니다.
MarginContainer
MarginContainer는 자식 노드들을 포함하는 컨테이너입니다. 이 컨테이너는 자식 노드 주위에 설정된 마진 값을 기반으로 상하좌우 여백을 관리 할 수 있습니다.
이를 통해 UI 요소에 일정한 여백을 주어 보다 깔끔하게 보이게 하거나, 다른 UI 요소와의 충돌을 방지하는 데 유용하게 사용할 수 있습니다.
MarginContainer 하위의 자식인 버튼들의 사이에 여백이 추가된 것을 확인 할 수 있습니다.
VBoxContainer
VBoxContainer는 Vertical Box Container의 약자로 MarginContainer와 마찬가지로 자식노드를 포함하는 컨테이너 입니다. 하지만 Vertical인 만큼 자식 노드들을 세로 방향으로 정렬하는 특징이 있습니다.
따라서 자식 노드들은 VBoxContainer의 최상단부터 시작하여 아래 방향으로 순차적으로 배치됩니다.
📌 버튼 연결
그 후 Canvas Layer에 스크립트를 추가한 후 각 버튼들을 시그널을 통해 연결 해줍니다.
위 사진은 각 resume, setting, main, quit버튼이 눌렀을 경우에 대한 시그널을 스크립트와 연결한 후 코드를 작성한 것 입니다.
여기서 Engine.time_scale은 고도엔진에서 전역적으로 시간의 흐름을 조절하는 속성으로 이를 조정하여 게임 내에서의 시간의 속도를 느리게 하거나 멈출 수 있습니다.
Engine.time_scale을 0으로 설정할 경우 게임 내 시간이 완전히 멈추게 됩니다. 이를 통해 일시정지 동작을 구현할 수 있습니다.
Engine.time_scale을 1로 설정하면 다시 정상적으로 게임이 동작하게 됩니다.
func set_pause()함수의 동작은 bool 타입의 is_paused의 값에 따라서 위에 작성한 Canvas Layer의 visible을 조정하여 정지시킬 경우 화면이 표시되고 아닐 경우 다시 감추는 식으로 동작합니다.
📌 셰이더 생성
다음으론 많은 게임에서 처럼 일시정지 시 배경화면이 흐릿하게 표시되는 효과를 구현하겠습니다.
우선 Canvas Layer에 추가한 ColorRect 노드를 클릭하여 새 셰이더를 추가 해줍니다.
생성한 gdshader 파일에 다음과 같이 코드를 작성해줍니다.
uniform sampler2D screen_texture는 화면의 텍스처를 참조하는 유니폼 변수입니다. hint_screen_texture를 통해 이 변수가 화면을 렌더링하는 데 사용되는 텍스처임을 명시합니다. filter_linear_mipmap는 텍스처 필터링 방식으로 멀리 있는 텍스처일수록 낮은 해상도의 이미지를 사용하여 텍스처를 필터링하는 방식입니다.
uniform float amount을 통해 셰이더에 의해 적용될 효과의 정도를 조절합니다.
void fragment() 함수는 각 픽셀에 적용되는 코드를 포함합니다. 이 함수 내에서 화면 텍스처의 특정 위치(SCREEN_UV)에서 색상을 가져오고, amount 값에 따라 미프맵 레벨(텍스처의 해상도)을 조정하여 텍스처를 샘플링합니다. textureLod 함수는 텍스처, UV 좌표, 그리고 LOD(Level Of Detail, 세부 레벨)을 기반으로 색상 값을 가져옵니다. 여기서 amount 값이 LOD를 결정하여, 값이 클수록 더 낮은 해상도의 텍스처를 사용하게 됩니다.
📌 Setting 화면 생성
다음으로 pause menu에서 setting버튼을 누를 경우 게임의 볼륨을 조절할 수 있도록 하는 UI를 만들어 줍니다.
위의 방식과 마찬가지로 Canvas Layer에 여러 노드를 추가하여 생성합니다.
코드는 다음과 같이 작성하였습니다.
📌 자동 로드 설정
이렇게 생성한 UI를 게임 상에서 자동으로 불러오기 위해 프로젝트 설정 내에 자동로드 버튼을 클릭하여 작성한 씬을 추가 해줍니다.
마지막으로 일시정지 메뉴을 활성화할 씬에 스크립트에 아래와 같이 작성하면 esc버튼이 눌릴 경우 자동 로드된 PauseMenu의 set_pause()함수를 호출할 수 있습니다.
실제 게임 상에서 구동한 결과 잘 동작하는 것을 확인 할 수 있습니다.
📌 마무리
이상으로 일시정지 화면을 구현해보았습니다. 별거 아닌 것 같은 기능도 생각보다 오래 걸리네요.
조만간 정보처리기사 시험이 있어서 당분간 개발 관련한 글을 많이 올리지 못할 수도 있을 것 같습니다. 시간이 된다면 간간히 올리도록 하겠습니다.
감사합니다.
