안녕하세요. 여영자입니다 :)

지난 시간에는 평평한 바닥에서 점프하는 것까지는 성공했습니다!

그런데 플랫포머 게임이라면

평평한 바닥에서 뛰기만 할 수는 없겠죠?

이번에는 여영자가 넘어야 할 단차를 만들고

실제로 점프해서 넘어갈 수 있는지 확인해 보겠습니다! (아자!)

기존에 만들어 둔 Ground를 복제하여 단차를 제작해 보겠습니다.

 

[Ground]를 선택한 뒤 마우스 오른쪽 버튼을 눌러 [복제]를 선택해 주세요.

단축키 [Ctrl + D]를 사용해도 됩니다.

 Ground가 하나 더 생겼습니다.

복제된 노드 이름을 [Platform]로 변경해 줍니다.

 여기서 잠깐!
복사했다고 바로 사용하면 안 됩니다!

복제한 Platform도 Ground와 동일한 충돌 모양을 사용하고 있는데요.

 

[유일하게 만들기] 기능을 사용해 충돌 영역을 분리해 줘야 합니다.

 

씬 트리에서 [Platform] > [CollisionShape2D]를 선택한 뒤

오른쪽 인스펙터에서 [Shape]의 [RectangleShape2D]를 클릭해 주세요.

 나타나는 메뉴에서 [유일하게 만들기]를 선택합니다.

이제 Platform의 모양과 충돌 영역을 수정해 보도록 하겠습니다.

 [Platform] > [Polygon2D]를 선택해 도형의 폭을 줄였습니다.

기존 Ground가 겹쳐 있어 헷갈리지 않도록 단차의 색을 갈색으로 변경했습니다.

도형의 색은 오른쪽 인스펙터의 [Color]에서 변경할 수 있습니다.

Platform의 도형 모양을 수정했으니

이제 충돌 영역도 도형에 맞춰 수정해야겠죠?

[Platform] < [CollisionShape2D]를 선택 후

우측 인스펙터에서 [RectangleShape2D]를 클릭합니다.

그러면 Size를 수정할 수 있는 창이 나타나는데요.

하늘색으로 표시된 충돌 영역을 X/Y 값을 조절해

앞서 만든 Platform의 크기에 맞춰줍니다.

 

이제 Polygon2D와 CollisionShape2D가 딱 맞게 맞춰졌네요!

Platform을 캐릭터가 점프로 올라갈 수 있는 위치로 이동해 보겠습니다.

 

씬 트리에서 [Platform]을 선택한 후

오른쪽 인스펙터의 [Transform] > [Position]에서 위치를 조정해 주세요.

바닥 영역이 조금 좁아 보이네요.

길이를 조금 늘리고 위치도 변경해 보겠습니다.

 

씬 트리에서 [Ground]를 선택한 뒤

오른쪽 인스펙터의 [Transform] > [Position]과 [Scale]을 수정했습니다.

단차도 하나 더 만들어 볼게요!

 

[Platform]을 선택한 후 마우스 오른쪽 버튼을 클릭해 [복제]를 눌러 주세요.

복제된 Platform의 이름을 [Platform2]로 변경했습니다.

인스펙터의 [Transform] > [Position]과 [Scale]을 수정해
위치와 크기를 조정했습니다.

이렇게 테스트용 맵이 완성됐네요!

이제 [F6]을 눌러 실제로 움직여 보겠습니다. (두근두근)

.

.

.

우와!!

폴짝폴짝 단차를 오르락내리락하는

여영자의 움직임이 완성되었습니다...만

기쁨도 잠시…

테스트를 해보니 지형을 하나씩 복제해서 만드는 방식으로는

실제 게임을 만들기 어렵겠다는 생각이 들었습니다.

게임 맵이 커질수록 Platform도 계속 늘어나게 될 테니 말입니다.

(이건 뭔가 아닌 것만 같은 느낌;;;)

더 큰 실수를 범하기 전에 ChatGPT에게 물어봤습니다.

역시 물어보길 잘했네요. 큰일날 뻔했습니다;;

반복적인 지형은 TileMapLayer와 TileSet를 이용해서 제작하는군요.

전반적인 이해를 위해

ChatGPT에게 이미지로 설명해 달라고 요청했습니다.

 

아하!!

작은 지형 조각을 여러 개 만들어 조합할 수 있도록 준비해야 하는 거군요!

그렇다면 타일의 크기는 어떻게 정해야 할까요?

이번에도 ChatGPT에게 물어봤습니다.

 

현재 게임 해상도가 1920×1080이라 타일 크기를 64×64픽셀로 정하고,

저는 우선 이 크기를 기준으로 제작해 보겠습니다.

물론 타일 크기는 해상도만으로 결정되는 것은 아니며,

캐릭터 크기와 게임 화면에서 보이는 지형의 비율 등을

함께 고려해야 한다고 하네요.

 

게임 해상도는 [프로젝트] < [프로젝트 설정] < [표시] < [창]에서

확인하고 설정할 수 있으니

본격적으로 게임 그래픽을 제작하기 전에 먼저 확인해 주세요.

 

ChatGPT를 이용해 지형의 형태를 만들어 보았습니다.

TileMapLayer에서 반복해서 사용할 수 있도록 64×64픽셀 타일로

6개의 기본적인 형태를 만들었는데요.

게임을 제작하면서 다른 형태의 지형도 추가하도록 하겠습니다!

  

만든 지형 타일은 Ground 폴더를 만들어 한 곳에 정리해 두었습니다.

씬 트리에서 [Main] 선택 후 마우스 우클릭하여 

[＋자식노드 추가]를 선택합니다.

새 Node 만들기 창에서 [TileMapLayer] 검색하여 [만들기]를 클릭합니다.

 

TileMapLayer를 추가했지만 하단에

'타일셋 리소스가 없습니다'라는 문구가 나타납니다.

TileMapLayer에서 지형을 배치하려면 먼저 TileSet을 만들어야 하는데요.

그럼 지금부터 TileSet을 만들어 보겠습니다.

  

(1) TileMapLayer가 선택된 상태에서

(2) 인스펙터의 Tile Set에서 [비었음]을 클릭하면 메뉴가 뜹니다.

 (3) 여기에서 [TileSet]을 선택해 주세요.

 

TileSet을 생성했다면 사용할 타일의 크기를 설정해야 합니다.

저는 앞서 제작한 지형 타일이 64×64픽셀이므로 64×64로 입력했습니다. 

이제 TileSet에 제작해 둔 타일 이미지를 등록해 보겠습니다.

 

하단의 타일 소스에서 [＋]를 클릭한 후

[아틀라스]를 선택해 주세요.

 

여러 파일 열기 창이 뜨면 이미지가 저장된 경로를 선택해 줍니다.

저는 우선 ground_top.png 이미지 한 장을 열어봤습니다.

 

안내창이 나타나면 [예]를 선택합니다.

 

하단 [타일맵] 선택 후 [연필] 아이콘을 선택합니다.

사용할 기본 타일을 클릭하고 원하는 위치에 타일을 배치합니다.

 Shift 키를 누른 채 드래그하면

타일을 선 형태로 연속해서 배치할 수도 있습니다.

 

오! 이제 제법 여영자가 길 위에 서 있는 느낌이 듭니다!

그동안 매일 박스 위에서만 걸어 다녔는데 말이죠 ㅎㅎ

이제 평평한 바닥만으로는 조금 단순하니

바닥의 두께를 표현할 수 있는 타일도 추가해 보겠습니다.

타일을 추가하는 방법은
앞서 ground_top.png를 등록했던 과정과 동일합니다.

[타일셋] > [타일 소스] > [+] > [Atlas] > [이미지 선택] > [자동으로 타일 생성] > [예]

 

윗면과 몸통을 조합하니

조금씩 게임 속 바닥 같은 모습이 만들어지고 있습니다.

 

같은 방법으로 지형의 양쪽 끝을 표현하는 ground_left, ground_right와 

단차에 사용할 ground_inner_left, ground_inner_right도 추가했습니다.

 

이렇게 타일을 조합하니 평평한 바닥뿐만 아니라

높낮이가 있는 지형도 만들 수 있었습니다.

 

어느 정도 쌓아 놓고 보니 추가하고 싶은 지형이 보이네요.

경사 지형도 필요하고 작은 단차도 더 필요하고…

길도 좀 예쁘게 꾸미고 싶고 말이죠.

욕심은 끝이 없으니…

일단 충돌 영역 설정을 해보고 보완해 보도록 하겠습니다.

 

씬 트리에서 [TileMapLayer]를 선택합니다.

인스펙터의 [Tile Set] > [Physics Layers] > [+ 요소 추가]를 클릭합니다.

 

물리 레이어가 추가되면 타일에 충돌 영역을 설정할 수 있습니다.

 

하단 [타일셋]에서 편집창 위쪽 [선택]을 눌러주세요.

ground_top.png의 64×64 기본 타일 1개를 선택합니다.

이제 개별 타일의 충돌 영역을 편집해 보도록 하겠습니다.

개별 타일 속성에서 [물리] > [Physics Layer 0]을 펼쳐줍니다.

여기에서 타일의 충돌 모양을 편집할 수 있습니다.

 

ground_top은 빈 공간 없이 타일 전체가 지형으로 채워져 있습니다.

이런 경우 충돌 영역 편집 화면에서

키보드의 F 키를 누르면 타일 한 칸 전체를 채우는

기본 사각형 충돌 영역을 빠르게 만들 수 있습니다.

이제 충돌 영역이 잘 설정되었는지 확인해 보겠습니다.

 

그런데 기존에 테스트하면서 만들어 두었던 

Ground, Platform1, Platform2의 충돌 영역이 함께 작동하면

새로 만든 TileMapLayer의 충돌이 제대로 작동하는지 확인하기 어렵습니다.

그래서 기존에 테스트용으로 만들었던 충돌 영역은 모두

[Disabled]를 체크해 비활성화했습니다.

그럼 [F6]을 눌러 확인해 보겠습니다! (두근두근)

.

.

.

 

아니 왜 떨어지는 거야... ㅜㅜ 

라며 절망하려던 순간

아차차.. 지형 1개의 충돌 영역만 설정했군요;; (휴..다행)

빠르게 나머지 지형들도 충돌 영역을 설정해 보겠습니다!

 ground_top과 ground_body뿐만 아니라 ground_left, ground_right에도

F 키를 이용해 타일 전체를 충돌 영역으로 지정했습니다.

 

ground_left와 ground_right는 지형의 끝부분을 표현하기 위해

윗부분이 둥글게 마감되어 있습니다.

하지만 이번에는 우선 캐릭터가 지형을 통과하지 않고 안정적으로 설 수 있도록

타일 전체를 하나의 충돌 영역으로 설정했습니다.

실제 게임에서 캐릭터의 움직임을 확인한 후

필요하다면 둥근 모서리의 형태에 맞춰 

충돌 영역을 더 세밀하게 조정해 볼 수도 있을 것 같습니다.

 

ground_inner_left, ground_inner_right처럼 L자 형태의 타일은

타일 전체를 사각형으로 지정하면 빈 공간까지 충돌 영역이 생길 수 있습니다.

그래서 상단 메뉴의 [폴리곤 추가 툴]을 이용해 

실제 지형에 맞춰 점을 찍어 충돌 영역을 만들었습니다.

이렇게 6개의 기본 지형이 충돌 영역 설정까지 완료되었습니다.

이번에는 정말 성공할 수 있을 것인가!!!!!!!!!

.

.

.

됐다!!! 됐습니다 이제 ㅠㅠ 

여영자가 직접 만든 TileMapLayer 지형 위에 제대로 서 있습니다!

 

단순히 그림을 배치하는 것에서 끝나는 게 아니라

각각의 타일에 충돌 영역까지 설정해야

실제 게임에서 사용할 수 있는 지형이 된다는 것을 알게 되었습니다.

이제 기본적인 지형은 준비된 것 같습니다.

하지만 만들어 놓고 보니 또 욕심이 생기네요.

다음에는 경사 지형과 다양한 높이의 단차를 추가해

조금 더 게임다운 맵을 만들어 보겠습니다.

아참!! 자연스럽게 점프하는 것도 보완해서 돌아오겠습니다.

 

그럼 다음 편에서 만나요!

오늘의 기록  ✔ 단차 지형 만들기  ✔ TileMapLayer와 TileSet 알아보기  ✔ 타일 지형과 충돌 영역 구현하기  ✔ 직접 만든 지형에서 여영자 움직이기!   다음 미션  ✔ 경사 지형과 다양한 단차 만들기  ✔ 자연스러운 점프 움직임 보완하기

회원님들이 남겨 주시는 댓글을 보며 힘을 내기도 하고,

도움이 되는 글도 많이 남겨 주셔서 열심히 읽고 있습니다!

초보가 혼자 게임 만든다고

구석에서 암흑처럼 지내고 있는데요…

여러분의 댓글 하나하나가 저에게는 정말 큰 힘이 됩니다.

오늘도 열공모드!

저에게 사랑과 용기를 주세요~

댓글과 공감은 여영자에게 정말 큰 힘이 됩니다.