사용자:Senouis/고도3 도큐먼트/튜토리얼 3장

이전 장으로

이 게임은 현재 입니다!

2024년 08월 18일 00시 00분 00초까지 수리하기로 한 게임입니다.
"사용자:Senouis/고도3 도큐먼트/튜토리얼 3장" 수리에 대한 문의 사항은 이곳에서 받고 있습니다.

이제 본격적으로 씬과 씬 안에 배치할 구성요소인 노드를 다룹니다.

노드 다루기

왼쪽 위 노드 단락에서 씬 내부 구조를 볼까요? 이건 Duck Invasion이라는 게임의 맵이 가진 씬의 내부 구조입니다. 이 씬은 기본적으로 Node2D 형의 노드에서 시작하는 씬이며, 그 밑에 들여쓰기된 Background 같은 자식 노드가 없으면 아무 것도 표시하지 않습니다. 이 Node2D는 가장 덜 들여쓰기 되어 있으며 다른 모든 노드가 여기 아래에 위치하기 때문에 뿌리가 된다고 하여 루트 노드(Root Node)라고 부릅니다.

그 밑에 있는 다른 노드들, 즉 배경이나 몇 가지 타이머(Timer), 소환된 적을 포함하는 홀더(Holder)가 되는 Node2D 노드들이 있습니다. 명심할 것은 노드의 이름을 타입과 별개로 정한다는 겁니다. GunHolder와 EnemyPoint 모두 Node 2D 형태의 노드지만, 루트 노드와 이름(name)이 다릅니다. 나중에 다룰 타이머들도 여기서는 3개의 타이머가 있지만 전부 이름이 다 다릅니다.

그렇다면 Node2D 형 이라는 건 뭘까요? 형, 즉 타입(Type)은 이 노드가 어떤 역할을 하는지 알려주는 개념입니다. 예를 들어 타입이 Node2D이면 평평한 공간(평면)에서 다른 노드들을 자식으로 붙잡아 두는 노드입니다. 그래서 그 아래에 이미지(Sprite), 음악(Sample 혹은 Music), 타일맵(TileMap), 타이머 등의 다른 노드를 놓을 수 있습니다.

이번에는 노드 오른쪽에 있는 작은 그림들(아이콘)들이 가진 뜻에 대해 알아봅시다.

• 두루마리 모양은 이 노드에 스크립트 파일이 붙었다는 뜻입니다. 고도 엔진은 노드들마다 스크립트 파일을 붙일 수 있습니다. 씬을 만들 때 보통 스크립트 파일도 하나 만들기 때문에 착각할 수 있지만, 그건 사실 루트 노드에 스크립트 파일을 자동으로 붙여주는 기능에 불과합니다.
• 그 오른쪽에 눈동자 비슷한 모양이 붙은 경우 이 노드가 게임과 에디터에서 보인다는 뜻입니다. 이 아이콘을 눌러서 눈을 감거나 뜨게 할 수 있는데, 눈을 감을 경우 게임과 에디터에서 보이지 않으며, 상호작용도 하지 않습니다.
• 와이파이 모양 비슷한 아이콘은 이 노드에 시그널(Signal)이 붙었다는 뜻입니다. 시그널은 특정한 상황을 정의하고 대응하는 콜백 함수가 존재한다는 뜻입니다. 시그널로 적이 충돌하거나, 플레이어의 체력이 다 떨어져 게임이 끝나는 상황을 만들어야 하는 경우 어떻게 해야 할지 정할 수 있으며, 자세한 건 7장에서 다루겠습니다.

그렇다면 필요한 만큼 맵이나 캐릭터 씬에 노드를 추가해야겠죠? 루트 노드는 씬을 만들 때 자동으로 만들어지며, 노드에 대고 마우스 오른쪽 클릭을 했을 때 나오는 타입 바꾸기로 루트 노드를 포함한 모든 노드의 형을 바꿀 수 있습니다.

그리고 어떤 노드에 대고 마우스 오른쪽 버튼을 클릭하면 나오는 메뉴에서 자식 노드 추가를 누르면 바로 노드 아래에 자식을 두게 하는 고도 엔진 에디터의 핵심 씬 설계 기능이 나옵니다. 그럼 이제 자식 노드를 추가하러 갑시다.

노드 종류 보기

이번에는 타일맵 이외에 다른 노드를 만들 수 있는지 확인합시다.

노드에 대해 마우스 오른쪽 버튼 클릭 후 자식 노드 추가를 누르면 다음과 같은 창이 뜹니다.

위 세 사진은 고도 엔진 3에서 기본적으로 선택할 수 있는 노드들의 종류를 전부 나열한 것입니다. 저기 있는 모든 클래스에 대한 설명은 고도 엔진 3 노드 목록 문서로 제공될 예정입니다. 튜토리얼에서는 저 중 몇 가지만 사용하게 될 것입니다.

이제 필요한 클래스를 저기서 선택한 다음 만들기 버튼을 누르면 자식 노드가 추가됩니다!

노드에 스크립트 붙이기

노드를 생성했다면 이제 스크립트를 붙일 차례입니다. 이 튜토리얼은 간단하게 아래 디버그 창에 "Hello World!"라는 문구를 표시하는 스크립트를 만들 것입니다!

스크립트 생성하고 붙이기

먼저 아래 그림과 같이 Node2D 형 루트 노드가 있다고 가정합시다. 아래 자식 노드들까지 똑같이 만들어 두셔도 되고, Node2D 형으로 루트 노드만 만들어 두셔도 됩니다.

그럼 마우스 오른쪽 버튼 클릭을 하면 나오는 팝업 메뉴에서 위처럼 스크립트 붙이기를 선택합니다.

그럼 위 모양의 창이 나타납니다. 언어는 아마 GDScript로 되어 있을 것인데, 이것을 고도 엔진으로 게임을 만들 때 제일 많이 프로그래밍 언어로 사용하기 때문입니다.

그러나 튜토리얼에서 GDScript를 사용했다간 무지막지한 영문 타자에 시달릴 것이 뻔하므로, VisualScript(비주얼스크립트)로 바꿔서 구문 블럭을 연결하는 방법으로 프로그래밍을 할 겁니다. 어차피 그 다음 과정부터 필요한 키워드는 GDScript나 VisualScript나 거의 완벽하게 같습니다.

상속은 이 노드의 형(타입)을 지정하는 부분인데, 디버그 창에 글자를 출력하는 일 외에 딱히 특별한 엔진 기능이 필요한 것이 아니기 때문에 Node2D로 하겠습니다.

경로에는 vs 파일을 저장해야 합니다. 아마 res://(씬 이름).vs로 값이 이미 채워져 있을 겁니다. 이걸 바꾸고 싶다면(게임 프로젝트 폴더 내 하위 경로로 지정하려면) 경로가 있는 줄의 제일 오른쪽 '폴더 아이콘'을 클릭하고, 씬을 저장할 때처럼 파일을 저장하면 됩니다. 참고로 파일 이름은 영어 대소문자와 숫자만 사용해 만드는 것이 좋으며, 뒤에 있는 확장자 .vs와 앞에 있는 res://는 절대 지우지 말아야 합니다.

이제 만들기를 누르면 다음과 같이 비주얼스크립트 편집 창이 나옵니다.

스크립트 기본 구조

그러나 여기서 멈추면 아무 것도 되지 않습니다. 이제 하나씩 구문 블럭을 만들고 이어 봅시다.

먼저 중앙에 크고 어두운 모눈종이 같은 판(Plate)이 나타날 겁니다. 여기가 노드 블럭(그냥 노드가 아니라 이 판 위에서 그리는 블럭입니다)을 하얀 선인 엣지(Edge)로 이어주는 그래프(Graph)를 그리는 곳입니다.

마우스 왼쪽 클릭은 별 기능이 없습니다. 그냥 드래그(마우스 버튼 누른 상태에서 움직여서 여러 개의 항목을 선택)를 위해 존재합니다. 진짜로 중요한 건 마우스 휠과 오른쪽 버튼입니다. 마우스 오른쪽 버튼은 노드 블럭을 새로 생성하는 기능을 합니다.

그리고 제일 중요한 것으로, 마우스 중앙의 휠을 '눌러' 그래프 판을 이리저리 둘러볼 수 있고, 휠을 '굴려서' 판의 확대/축소를 합니다.

휠을 사이트 둘러볼 때처럼 위아래로 굴리면 확대/축소를 한다는 것에 주의하세요! 판을 움직이려면 굴리지 말고 휠을 '누른 채'로 마우스를 움직여야 합니다.

어두운 그래프 판 왼쪽에는 지금 에디터가 다루고 있는 모든 스크립트 목록이 왼쪽 위에 있고, 그 아래 '멤버:'란 이름의 큰 칸이 있는데 함수, 변수, 시그널이라는 항목이 보일 겁니다. 그리고 오른쪽에는 블럭 속성 창이 있는데, 현재는 큰 역할을 하지 않고 있습니다.

이제 코딩의 영역으로 들어갑시다.

먼저 이 스크립트가 어떤 상황에서 어떤 동작을 해야 하는지 알려주려면, 그 '어떤 상황'을 명시해야 합니다.

보통의 게임 엔진에는 스크립트를 처음 가져와 실행하는 순간과, 매 순간 (프레임 단위로) 어떤 동작이 일어나야 하는 상황, 그리고 사람이 키보드나 마우스를 쓰거나 미리 정해둔 시간이 흘렀을 때 발생하는 사건(이벤트)에 벌어질 동작에 관한 기능은 반드시 정의해야 합니다. 심지어 어떻게 동작하란 내용물이 없어도 일단 정해 놓아야 합니다.

고도 엔진에서는 스크립트를 처음 가져와 실행하는 순간을 다루는 ready, 매 순간 어떤 동작이 일어나야 하는 상황인 process, 그리고 이벤트 동작(이름은 구체적인 경우에 따라 다양합니다)에 대해 대응하는 함수인 콜백(Callback)을 정하게 되어 있습니다.

우리는 Hello World!라는 문구를 한 번만 출력할 것이므로 ready를 사용하도록 하겠습니다. 왼쪽 아래의 '멤버:' 칸에 있는 '함수:' 옆을 보면 왠 서랍에 뭘 집어넣으라는 표시 같은 아이콘이 있을 겁니다. 마우스 커서를 올려 보면 '기존의 내장 함수를 오버라이드합니다'란 표시가 뜨는 아이콘입니다. 그 아이콘을 클릭합니다.

1번을 했을 테니, 2번처럼 Ready를 선택하고 3번처럼 열기를 누릅니다.

그럼 검은색 ready 블록이 에디터 중앙의 모눈 그려진 판에 나타날 겁니다. 이제 뭔가 "Hello World!"라는 문구를 추가하고, 디버그 창으로 출력하는 작업을 해야 할 것입니다. 말 그대로 두 가지를 연속해서 하면 됩니다. 정말 쉽죠?

그러나 이왕 이리 된 거, 상황에 따라 Hello World를 출력하지 않도록 조건문도 같이 다루도록 합니다. 그리고 리버티게임의 흔한 웹 게임과 달리 반복문을 기본 지원하기에 Hello World!를 정해진 횟수대로 여러 번 출력하는 일이 대단히 쉽습니다.

우선 Hellow World!라는 값을 만들어봅시다. 왼쪽 아래 멤버 창에서 변수 옆 + 아이콘을 클릭해주세요.

[[]]

이번에는 내장 함수 중 print를 사용해 출력을 합시다.

이제 코드가 완성되었습니다. 씬 실행으로 이 씬만 작동시켜 출력이 되는지 확인합시다. 에디터 창 오른쪽 위를 보았을 때 무슨 영화 촬영장에서 '레디~액션!'이라 외칠 때 쓰는 소품처럼 생긴 아이콘이 있습니다. 다음과 같은 안내문이 뜨는 아이콘이며, 누르면 게임의 해당 씬 부분만 창으로 나타납니다.

이제 에디터 아래쪽 디버그 창에 나타나는 결과는 다음과 거의 같을 겁니다(OpenGL ES 2.0이나 GTX 1050 그래픽 카드를 사용한다는, 컴퓨터마다 다른 요소를 빼면 거의 같을 겁니다).

주의점

씬을 복제할 때 주의점

이 내용은 주로 컴퓨터 프로그래밍 관련 기법에 대해 잘 아는, 전공자 또는 그에 가까운 사람들이라면 금방 알 법한 부분을 설명하지만, 고도 엔진을 사용하다 보면 반드시 마주칠 수밖에 없는 문제이기에 잠깐 설명하고 가겠습니다.

프로그래밍을 오래 하신 분이라면, 포인터와 참조라는 개념에 대해 아실 겁니다. 이 개념은 컴퓨터의 RAM에 있는 데이터를 가리키는 방법으로 코딩에서 프로그래밍으로 넘어가는 첫번째 장애물로 일컬어집니다.

고도 엔진의 씬 개념은 본질적으로 리소스(음악, 이미지 등)을 씬으로 가져올 때 참조로 설정하여 가져오도록 되어 있습니다. 이 특징은 각 씬에 대해 리소스를 일일이 정해줄 때에는 문제가 되지 않으나, 기존 씬을 복제할 때 문제가 됩니다. 즉 먼저 만든 씬 파일(tscn 파일)을 Ctrl C + Ctrl V 단축키로 복사 후 붙여 넣어 새 씬 파일을 만들 때 문제가 되는 겁니다.

이게 어째서 문제가 되냐 하면, 복사한 씬과 원래 씬이 같은 리소스를 '항상' 가리키는 것이 고도 엔진의 기본 설정이기 때문입니다. 예를 들면, 복사한 씬에서 씬에 입힐 그림 데이터인 텍스처(Texture)를 바꾸게 되면 복사한 씬 뿐만 아니라 원래의 씬의 텍스처도 같이 바뀌게 됩니다. 친숙한 캐릭터로 닌텐도의 슈퍼 마리오 브라더스 시리즈의 예를 들자면, 게임에서 루이지를 만들려고 마리오를 구현한 씬을 복사하고 루이지 텍스처를 넣었더니 원래의 마리오 씬의 모습도 같이 루이지로 바뀌는 셈이죠.

이걸 해결하려면 리소스 '참조의 방향'을 바꿔야 합니다. 방법은 참조를 바꿀 리소스를 설정할 때 오른쪽 클릭으로 나오는 메뉴에서 '유일하게 만들기'를 설정하면 됩니다.

아래는 텍스처의 참조를 '유일하게 만들기' 처리하는 화면입니다.

다음으로

다음 장으로