안녕하세요. 여영자입니다 :)
지난 시간에는 캐릭터가 설 수 있도록 바닥의 충돌 영역을 만들고,
중력을 적용해 바닥에 자연스럽게 착지하는 것까지 성공했습니다.
[40대 AI 초보 성장 일지] 6편
https://dpg.danawa.com/bbs/view?boardSeq=309&listSeq=6043655
그런데 플랫포머 게임이라면 역시 점프가 제맛 아닐까요?
점프를 만들기 전에 한 가지 궁금한 점이 생겼습니다.
지난 시간에 만든 Ground는 충돌 영역이라
실제 게임 화면에서는 바닥이 보이지 않았는데요.
그렇다면 게임 화면에 보이는 바닥은 어떻게 만들어야 하는 걸까요?
게임 개발은 처음이라 무엇부터 해야 할지 모르겠더군요.
그래서 ChatGPT에게 초보자도 이해하기 쉽도록
게임의 맵이 어떻게 만들어지는지 설명해 달라고 요청했습니다.
아하! 게임 맵은 배경 이미지 하나만 넣는 게 아니라
배경과 실제로 캐릭터가 걸어 다니는 지형,
그리고 캐릭터가 밟고 부딪히는 영역을 각각 만들어서 완성하는 거군요.
이제 조금 이해가 되었습니다!
그런데 또 궁금한 점이 생겼습니다.
바닥과 높낮이가 있는 지형은 이미지를 만들어 가져오면 될까요?
아니면 Godot에서 직접 만들 수도 있을까요?
이번에도 ChatGPT에게 물어봤습니다.
게임의 기본 구조부터 만들어 보겠습니다!!
씬 트리에서 [Ground]를 선택한 뒤 마우스 오른쪽 버튼을 눌러
[자식 노드 추가]를 클릭해 주세요.
씬 트리 상단의 [+] 버튼을 클릭해도 됩니다.
Polygon2D는 여러 점을 이어 닫힌 도형을 만들고
그 내부를 색이나 텍스처로 채울 수 있는 2D 노드인데요.
저는 이 Polygon2D를 사용해
게임 화면에 보이는 임시 바닥을 만들어 보겠습니다.
새 Node 만들기 창에서 [Polygon2D]를 검색한 뒤
[만들기] 버튼을 눌러줍니다.
이제 하단의 [폴리곤 만들기] 버튼을 클릭해 주세요.
기존에 만들어 둔 [CollisionShape2D]를 기준으로
직사각형 모양의 폴리곤을 만들어 보겠습니다.
점과 선을 이어 도형의 모양을 만들어 줍니다.
처음 시작한 위치까지 점이 연결되어 도형이 닫히면 내부가 색으로 채워집니다.
색상은 오른쪽 인스펙터의 [Color]에서 변경할 수 있습니다.
그런데 이렇게 만들고 보니 바닥이 너무 얇아 보이네요.
바닥의 두께를 조금 더 두껍게 수정해 보겠습니다.
캐릭터가 서는 윗면은 CollisionShape2D와 같은 위치에 두고,
아래쪽 점 2개만 아래로 이동시켜서 바닥을 조금 더 두껍게 표현했습니다.
이때 격자 모드를 켜니
점의 위치를 맞추면서 직선으로 그리기가 훨씬 수월했습니다.
이제 [F6]을 눌러서 확인을 해보겠습니다!
.
.
.
???
그.런.데
왜 갑자기 공중부양하는 여영자가 된 거죠?
(어째서…ㅠㅠ)
대체 어디서부터 잘못된 걸까 하고 좌절했습니다. ㅠㅠ
분명 Polygon2D와 CollisionShape2D의 윗면이 같은 위치인데 말이죠.
아!!
그렇다면…?!
실행 화면에서 충돌 영역을 보면 알 수 있지 않을까 싶어서
ChatGPT에게 물어봤습니다.
어머나! 충돌 영역을 볼 수 있는 방법이 있었군요!
(찍어서 맞추기 성공..ㅎㅎ)
상단 메뉴창에서 [디버그] > [보여줄 콜리전 모양]을 체크합니다.
이제 [F6]을 눌러서 확인해 보겠습니다.
실행 화면에 캐릭터의 충돌 영역을 나타내는 캡슐 모양이 표시되네요!
오른쪽을 보고 있을 때는 크게 이상해 보이지 않습니다만…
캐릭터를 왼쪽 방향으로 바꿔보니
충돌 영역이 캐릭터와 꽤 많이 어긋나 있습니다.
제가 충돌 영역을 설정할 때
오른쪽을 보고 있는 캐릭터를 기준으로 맞췄는데요.
캐릭터가 왼쪽으로 플립되면서 이미지는 좌우로 뒤집혔지만
제가 설정한 충돌 영역이 캐릭터의 중심과 맞지 않아
한쪽으로 치우쳐 있었습니다.
그래서 캐릭터의 발은 이미 바닥 끝을 벗어났는데도
충돌 영역의 일부는 아직 바닥과 닿아 있어서
캐릭터가 잠시 공중을 걷는 것처럼 보였던 거네요.
처음부터 캐릭터의 중심과 좌우 방향을 고려해서
충돌 영역을 설정했더라면 좋았을 텐데요...
역시 게임 개발은 생각해야 할 게 정말 많네요.
초보는 또 이렇게 실패하며 배웁니다. ㅜㅜ
하지만 이렇게 좌절만 하고 있을 순 없죠.
원인을 찾았으니 이제 수정해 보겠습니다.
Player 탭으로 먼저 이동해 주세요.
씬 트리에서 [Player] > [CollisionShape2D]를 선택한 뒤
기존에 설정했던 충돌 영역을 다시 수정해 보았습니다.
플립된 왼쪽 방향의 캐릭터도 고려해서
몸통과 발이 자연스럽게 들어오도록 최대한 맞추고
불필요한 영역들을 없애기 위해 폭도 기존보다 줄여봤습니다.
과연..
공중부양은 해결되었을까요?
.
.
.
좌우로 플립되는 캐릭터라 양쪽을 완벽하게 일치시키기는 어려웠지만,
처음보다 훨씬 자연스럽게 움직이는 것을 확인할 수 있었습니다.
(이렇게 또 한 고비 넘어갑니다….휴)
자, 이제 본격적으로 점프를 만들어 보겠습니다!
저는 스페이스바를 점프 키로 이용하고 싶어서
어떻게 설정해야 하는지 ChatGPT에게 물어봤습니다.
코드 작성 전 점프 입력을 먼저 등록해야 하는군요.
상단 메뉴에서 [프로젝트] > [프로젝트 설정]을 선택합니다.
프로젝트 설정창에서 [입력 맵] 선택 후
새 액션 추가 창에 [jump]를 입력하고 [+추가] 버튼을 누릅니다.
목록에 jump 액션이 추가되었는데요.
오른쪽의 [+] 버튼을 눌러 점프에 사용할 키를 등록해 보겠습니다.
이벤트 구성창에 ‘입력을 받는 중’이라는 문구가 나타납니다.
여기서 키보드의 스페이스바를 눌러주세요.
이제 [확인] >[닫기] 버튼을 눌러 설정을 마무리합니다.
실제로 얼마나 높이 뛰어오를지도 정해줘야 합니다.
player.gd 스크립트에 점프 속도를 정하는 두 줄을 추가했습니다.
일단 -400으로 설정해 보았는데요.
그런데 왜 400이 아니라 -400일까요?
Godot의 2D 화면에서는 Y값이 작아질수록 위쪽으로 이동하기 때문에
위로 점프하려면 음수 값을 사용한다고 합니다. (아하!)
일단 점프 속도는 정했으니 이제 이 값을 실제 움직임에 적용해
스페이스바를 누르면 점프하도록 만들어 보겠습니다.
중력 코드 아래에 점프 조건을 2줄 추가했는데요.
jump 입력이 들어왔는지 확인하고
캐릭터가 바닥에 있을 때만 점프 속도를 적용하도록 하는 코드입니다.
스크립트 추가까지 완료했으니
파일 저장 후 [F6]을 눌러 실행해 봤습니다.
과연 점프에 성공할 수 있을까요?
(두근두근)
.
.
.
.스페이스바를 누르니 통통 점프하는 여영자!!
드.디.어 점프에 성공했습니다!! (얏호)
스크립트에서 점프 속도 값을 조절하니
여영자가 훨씬 높이 점프하는 것도 확인할 수 있었습니다.
숫자 하나만 바꿨을 뿐인데 움직임이 달라지는 게 신기해서
한동안 스페이스바를 계속 눌러봤네요. (통통통)
그런데 플랫포머 게임이라면
.
|
오늘의 기록 ✔ 눈에 보이는 바닥 만들기 ✔ 충돌 영역 문제 해결하기 ✔ 점프 기능 구현하기 ✔ 여영자 점프 성공! 다음 미션 ✔ 높낮이가 있는 지형 만들기 ✔ 점프로 단차 뛰어넘기 |
|---|
댓글을 보니 직접 도전해보고 싶다는
회원님들의 이야기가 유독 눈에 띄었는데요.
여영자의 도전기를 보시고 사알짝 시작해보신 회원님도 계실까요? (궁금)
시작해 보셨다면 살짝 공유해 주세요~
실패도 좋고, 성공도 좋아요.
우리 같이 공유하고 함께 배워봐요~
댓글과 공감은 여영자에게 정말 큰 힘이 됩니다.
한
