안녕하세요. 여영자입니다 :)
지난 시간에는 평평한 바닥에서 점프하는 것까지는 성공했습니다!
[40대 AI 초보 성장 일지] 7편
https://dpg.danawa.com/bbs/view?listSeq=6046825&boardSeq=309
그런데 플랫포머 게임이라면
평평한 바닥에서 뛰기만 할 수는 없겠죠?
이번에는 여영자가 넘어야 할 단차를 만들고
실제로 점프해서 넘어갈 수 있는지 확인해 보겠습니다! (아자!)
기존에 만들어 둔 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 알아보기 ✔ 타일 지형과 충돌 영역 구현하기 ✔ 직접 만든 지형에서 여영자 움직이기! 다음 미션 ✔ 경사 지형과 다양한 단차 만들기 ✔ 자연스러운 점프 움직임 보완하기 |
|---|
회원님들이 남겨 주시는 댓글을 보며 힘을 내기도 하고,
도움이 되는 글도 많이 남겨 주셔서 열심히 읽고 있습니다!
초보가 혼자 게임 만든다고
구석에서 암흑처럼 지내고 있는데요…
여러분의 댓글 하나하나가 저에게는 정말 큰 힘이 됩니다.
오늘도 열공모드!
저에게 사랑과 용기를 주세요~
댓글과 공감은 여영자에게 정말 큰 힘이 됩니다.
