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

지난 시간에는 마을의 길에 다양함을 더하고

소품까지 배치해서 한결 게임답게(?) 구성을 해봤습니다.

[40대 AI 초보 성장 일지] 13편

https://dpg.danawa.com/bbs/view?boardSeq=309&listSeq=6055410

 

오늘은 드디어 도심 구간을 완성하고

게임 화면에 꼭 필요한 새로운 요소들도 하나씩 추가해 볼게요.

과연 이번에는 얼마나 게임다워질지

저도 두근두근 궁금하네요 ㅎㅎ

 

그럼 먼저 도심 구간의 발판을 만들어 보겠습니다.

 마을에서 만들었던 발판을 복사해서 사용해 볼게요.

씬 트리 [Platform] > [FloatingPlatform]을 선택합니다.

[Ctrl + D]로 복제한 후 이름을 [CityFloatingPlatform]으로 변경합니다.

 

생성된 [CityFloatingPlatform] 선택한 뒤

마우스 오른쪽 버튼을 클릭하고

[편집할 수 있는 자식]을 선택해 주세요.

 

이제 [CityFloatingPlatform]의 자식 노드를 수정해 보겠습니다.

(1) [Sprite2D]를 선택한 후

(2) 파일시스템에서 추가할 발판 이미지를 선택하여

(3) 오른쪽 인스펙터 [Texture] 영역에 이미지를 드래그하여 교체합니다.

 

짠! 여기까지 하면 새로운 발판 이미지로 교체되었습니다.

다음 과정은 기억하시죠?

바로 충돌 영역을 수정해 보겠습니다.

 

(1) 씬 트리에서 [CollisionShape2D]를 선택한 후

(2) 인스펙터의 [Shape] > [RectangleShape2D]를 클릭해 메뉴창을 열어주세요.

(3) 그리고 [유일하게 만들기]를 클릭합니다.

이 과정이 필요한 이유는

기존 발판과 충돌 영역을 공유하고 있기 때문입니다.

 

이제 [RectangleShape2D] > [Size]의 X/Y 값을 조절하여

새로운 발판의  실제 크기에 맞게

충돌 영역을 설정하면 완료!!

 

이런 식으로 다양한 단차를 만들고 높낮이도 다르게 배치해서

드디어 도심 구간의 바닥 구성이 완성되었습니다! 

여기서 잠깐!!

작업 화면에서 배경의 길이보다 바닥과 발판의 길이가 더 긴 이유는

실감나는 움직임을 위해 Parallax 기능을 사용했기 때문인데요.

 

배경이 실제 맵보다 느리게 움직이도록 설정되어 있기 때문에

배경을 시작부터 끝까지 플레이하려면

배경 이미지보다 긴 바닥 구간이 필요합니다!

꼭 기억해 주세요~ (엣헴)

 

자아~ 이제 도심 구간의 맵도 완성이 되었으니

플레이를 한번 해보겠습니다!

흠.. 이런이런…

바닥의 배치나 단차는 마음에 들지만

느릿느릿한 캐릭터의 움직임이 마음에 들지 않네요.

캐릭터의 움직임이 확정이 되어야

뛰어오르는 단차나 소품 배치가 수월할 것 같기도 하고요.

그래서 캐릭터의 움직임을 수정해 보기로 했습니다.

 

여영자의 움직임을 설정할 수 있는 player.gd 파일을

AI를 통해 확인해 보았습니다.

코드를 점검해 보니 캐릭터의 점프와 중력 계산 등에서 

조작감을 개선할 수 있는 부분이 있었습니다. (좋아!)

 

점프 높이와 목표 시간을 기준으로

점프 속도와 중력을 자동으로 계산하는 방식으로 수정하고,

내려올 때는 별도의 중력 배수를 적용해 상승할 때보다 

조금 더 빠르게 착지하도록 조정했습니다.

 

여기에 발판 끝에서 떨어진 직후에도

잠깐 점프할 수 있는 코요테 타임과

착지 직전에 누른 점프 입력을 잠시 기억하는 점프 버퍼도 추가했습니다.

점프 키를 짧게 누르면 낮게,

계속 누르면 최대 높이까지 올라가는 가변 점프도 적용되었습니다.

스크립트라는 걸 써본 적도 없는데

AI를 활용해 캐릭터의 움직임을 이렇게 저렇게 바꿀 수 있다니…

이거 정말 너무너무 신기하지 않나요?

완전 감동했어요!!! (찡~)

직접 플레이하면서 마음에 들지 않는 부분은

수치들을 조금씩 변경하면서 수정했습니다.

맵 구성도 끝났고 캐릭터 움직임도 수정 완료!

이제 플레이를 해보겠습니다! (두근두근)

.

.

.

 드디어 날렵하게 움직이는 캐릭터로 변신(?)했습니다!!!

깨알같이 여기저기 소품도 좀 추가했습니다 ㅎㅎ

 도심 단차와 발판도 다양하게 넣어봤습니다.

콩콩콩 열심히 출근하는 여영자입니다 ㅋㅋ

 

열심히 달리고 달려서 다나와까지 도착 완료!!

 그런데 여기까지 만들고 보니

게임 화면이 뭔가 조금 허전한 느낌이 들더라고요. (훼엥~)

게임을 하다 보면 점수나 아이템 개수,

남은 목숨 등이 화면에 표시되잖아요?

이런 영역을 HUD(Head-Up Display)라고 한다는데

아직 HUD가 없어서 그런지 게임 같은 느낌이 조금 부족해 보입니다.

그래서 이번에는 게임에 필요한 정보를 보여줄

HUD부터 만들어 보기로 했습니다.

구성은 모두 상단에 배치했습니다.

중앙에는 현재 스테이지와 캐릭터의 이동 진행 상황을 보여주고,

좌측에는 점수와 아이템을,

우측에는 남은 생명과 일시정지 기능을 배치했습니다.

 

파일은 모두 배경이 없는 PNG 파일로

assets > ui > hud 폴더를 만들어 하나씩 저장했습니다.

이제 이 파일들을 Godot으로 불러와

게임 화면에 직접 적용해 보도록 하겠습니다.

 (1)새 씬을 생성 후 [다른 노드]를 클릭합니다.

(2) 검색창에 [CanvasLayer]를 검색하여 (3) [만들기]를 눌러줍니다.

노드 이름은 [HUD]로 변경했습니다.

 

(1) [HUD]를 선택한 뒤 상단 [+] 버튼을 눌러 자식 노드를 추가합니다.

(2) 검색창에 [Control]을 검색하여 (3) [만들기]를 눌러줍니다.

노드 이름은 [HUDRoot]로 변경합니다.

 [HUDRoot] 선택 후 2D 작업창 상단에서

[앵커 프리셋] > [공간 전체]를 클릭합니다.

 

그럼 이렇게 전체 공간이 선택되었습니다.

이 영역에 아까 제작한 HUD 이미지들이 배치될 예정입니다.

여기까지 설정이 완료되면 [Ctrl+S]로 저장합니다.

저는 씬 이름을 따로 변경하지 않고

자동으로 생성된 [hud.tscn] 그대로 저장했습니다.

 

(1) 이제 [HUDRoot]를 선택한 뒤 상단 [+] 버튼을 눌러 자식 노드를 추가합니다.

(2) 검색창에 [TextureRect]를 검색하여 (3) [만들기]를 눌러줍니다.

노드 이름은 [ScoreBar]로 변경합니다.

 

(1) [ScoreBar]를 선택하고

(2) 왼쪽 하단의 파일 시스템에서 [score_bar] 이미지를 선택하여

(3) 인스펙터의 [Texture]에 드래그하면 이미지 불러오기가 완료되었습니다.

 나머지 이미지들도 동일한 방법으로 하나씩 추가해 주었습니다.

각 위치에 맞게 배치하면 완료~

 

씬 트리의 구조를 보면 이렇게 배치되었습니다.

[StageProgress] 아래에 자식 노드를 추가해 [youngja_face]를 배치했고,

마찬가지로 [heart_bar_bg] 아래에도 자식 노드를 추가해서

[Heart1]~[Heart3]을 배치했습니다.

하트는 동일한 이미지를 사용하기 때문에

[Heart1]을 만든 뒤 복제해 [Heart2], [Heart3]으로 사용했습니다.

 

게임창에서 확인해 보니

HUD가 추가되니 훨씬 게임(?)다운 화면이 연출되었습니다!!!!

이제는 정말 게임이 완성되어가는 느낌이 들어요.

 

여기까지 HUD의 디자인과 배치는 완료되었지만

아직 아무런 기능도 추가되지 않은 상태인데요.

기능이 추가되려면 아이템이 필요하겠죠?

(꺄아~드디어 아이템이다아)

 

점수를 획득하는 아이템으로는

코인과 커피, 그리고 샌드위치를 만들었습니다.

실제로 제가 아침마다 먹는 메뉴라 현실고증입니다 ㅋㅋ

 

반대로 점수가 차감되는 장애물로는 바리케이드와 콘 이미지를 만들었어요.

게임 도입 부분에는 점수가 차감되는 장애물을 배치하지 않을 생각이라

도심 구간에 어울리는 장애물 위주로 제작했습니다.

이렇게 필요한 이미지들을 하나씩 만들어 놓고 보니

이제 게임에 들어갈 기본적인 요소들은 어느 정도 갖춰진 것 같습니다.

맵도 완성했고, 캐릭터 움직임도 다듬었고

HUD와 아이템, 장애물까지 준비 완료!

그런데 아직 한 가지 중요한 게 남아있습니다.

바로 아이템에 실제 기능을 넣는 것!

과연 코인을 먹으면 정말 점수가 올라갈까요?

너무너무 기다렸던 아이템 기능 넣기는

다음 시간으로 이어집니다!

그럼 다음 편에서 만나요!

오늘의 기록  ✔ 도심 발판 제작 및 배치  ✔ 캐릭터 점프와 움직임 개선  ✔ HUD 디자인 및 게임 화면에 적용  ✔ 아이템과 장애물 이미지 제작  다음 미션  ✔ 아이템을 게임에 배치하기  ✔ 아이템에 기능 연결하기

오늘 작업까지 마치고 나니

제법 게임다운 모습이 보여지는 것 같습니다.

“내가 게임을 만든다고? 가능할까?”라는 의문에서 시작했는데

AI를 활용해서 여기까지 달려왔다는 것이 정말 너무도 신기하네요!

게임이 완성되는 그날까지 열심히 완주해보겠습니다. 아자!

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