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

지난 시간에는 장애물을 추가하고

점수 팝업과 파티클, HUD의 일부 기능까지 만들어 봤습니다.

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

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

게임의 모습이 대부분 갖춰진 것 같은 느낌적인 느낌이지만,

아직 끝난 게 아닙니다! ㅎㅎ

오늘은 남아 있는 기능들을 하나씩 완성해서

게임을 끝까지 마무리해 보겠습니다.

(마지막까지 가즈아~)

지난 시간에 스테이지 종료 구간에 사원증을 배치했는데요.

사실 사원증은 도착 구간에서 획득할 수 있는 특수 아이템입니다.

하지만 도착 구간을 알려주는 요소가 아직은 없다 보니

사원증이 특별 아이템이라는 느낌이 들지 않았습니다.

 

그래서 게임의 시작과 도착 구간을 명확하게 알려줄 수 있도록

게임에 말풍선을 넣어 보겠습니다.

[HUD]에 [Control]을 추가하고, 이름을 [StartDialogue]로 변경했습니다.

[StartDialogue]를 선택한 뒤 [앵커 프리셋] > [전체 공간]을 선택합니다.

 

[StartDialogue]에 [TextureRect]를 추가한 후

이름을 [DialogueImage]로 변경했습니다.

인스펙터의 [Texture]에는 시작 말풍선 이미지를 넣었습니다.

 

도착 구간에서 사용할 말풍선은

[StartDialogue]를 복제한 뒤 이미지만 도착 말풍선으로 교체했습니다.

처음에는 보이지 않도록 [EndDialogue]의 [Visible]은 꺼두었습니다.

 

이제 캐릭터가 사원증에 닿았을 때

도착 말풍선이 나타나도록 연결해 보겠습니다.

[EmployeeBadge]의 [시그널]에서 [body_entered(body: Node2D)]를 선택해

[employee_badge.gd]와 연결했습니다.

사원증에 닿으면 HUD의 도착 말풍선이 나타나도록 기능을 추가했습니다.

마지막으로 [hud.gd]에서 말풍선 스크립트를 추가했습니다.

게임을 시작하면 말풍선이 아래에서 위로 올라오고,

스페이스바를 누르면 다시 아래로 내려가며 사라지도록 설정했습니다.

도착 말풍선 역시 같은 방식으로 움직이지만,

캐릭터가 사원증에 닿았을 때만 나타나도록 설정하면 완료!

짜잔!! 게임을 시작하면 시작 말풍선이 뜨고,

스페이스바를 누르면 사라지도록 잘 구현되었어요! (얏호)

 

 

도착 구간도 완성! (좋았어!!)

자아~ 지금부터는 바로 낙사 구간을 설정해 보겠습니다.

 

지금은 뻥 뚫린 바닥 아래로 추락해도 아무런 반응이 없습니다. (심심..)

이 구간을 낙사 구간으로 설정하고,

생명이 줄어들도록 만들어 보겠습니다!

 

[Main]에 [Node2D]를 추가하고 [LifeHazards]로 변경합니다.

[LifeHazards]에 [Area2D]를 추가한 뒤 이름을 [FallZone]으로 변경합니다.

이제 [FallZone]에 [CollisionShape2D]를 추가해

캐릭터가 떨어졌을 때 감지할 추락 판정 영역을 만들었습니다.

 

[FallZone]에 스크립트를 붙인 뒤

[시그널]의 [body_entered(body: Node2D)]를 선택해 [fall_zone.gd]에 연결합니다.

 

캐릭터가 낙사 구간에 들어오면 생명이 줄어들도록

[fall_zone.gd]에 낙사 감지 기능을 추가했습니다.

[game_manager.gd]에서는 처음 생명을 3개로 설정하고,

낙사가 감지될 때마다 생명이 하나씩 줄어들도록 만들었습니다.

이제 출력창에서만 확인되던 생명 감소를

실제 게임 화면에서도 확인할 수 있도록 [hud.gd]를 수정했습니다.

HUD의 하트 3개를 남은 생명 수와 연결해

생명이 줄어들 때마다 하트도 하나씩 사라지도록 설정했습니다.

 

꺄아~ 낙사 구간에 떨어지니 생명 1개가 줄어들었습니다!!

하지만 기쁨도 잠시…

 

아직 생명이 남아 있으면 게임이 끝난 게 아니잖아요…

낙사 후 다시 시작할 위치로 이동해야 하는데 말이죠.

그렇다면 여영자를 부활시킬 리스폰 기능을 설정해 보겠습니다!!

 

[Main]에 [Marker2D]를 추가해 이름을 [FallRespawnPoint]로 변경했습니다.

캐릭터가 다시 시작할 위치를 정한 뒤 좌표를 확인하고,

[FallRespawnPoint]의 Position에 입력해 리스폰 위치를 지정했습니다.

마지막으로 [fall_zone.gd]에 기능을 추가해

캐릭터가 낙사하면 지정해 둔 [FallRespawnPoint] 위치로

다시 이동하도록 연결했습니다.

이제 리스폰 기능이 잘 작동하는지

캐릭터를 낙하시켜 보겠습니다! (두근두근)

 

리스폰될 때 캐릭터가 깜빡이는 효과를 추가하고

생명이 줄어들 때 하트가 움직이면서 사라지는 연출도 넣어봤습니다.

작은 효과들이지만 훨씬 게임다운 느낌이 나서 만족스럽네요!

하.지.만

여기까지 만들고 나니 새로운 문제가 눈에 보였습니다.

마지막 하트가 사라지면 게임 오버인데 아무런 변화가 없습니다.

그렇다면 바로 게임 오버 기능을 만들어 보겠습니다!

[HUD]에 [Control]을 추가하고 이름을 [GameOver]로 변경한 뒤,

화면 전체를 덮도록 설정했습니다.

[GameOver]에 [ColorRect]를 추가해 반투명한 검정 배경을 만들고,

이름을 [Dim]으로 변경했습니다.

 

화면 중앙에 UI를 배치하기 위해 [CenterContainer]를 추가하고,

그 아래에 [VBoxContainer]를 추가했습니다.

[VBoxContainer]에는 [TextureRect]를 추가해

이름을 [GameOverTitleImage]로 변경한 뒤 게임 오버 이미지를 불러옵니다.

 

그 아래에는 다시 시작 기능을 위한 Godot 기본 [Button]을 추가했습니다.

이름은 [RestartButton]으로 변경하고 [다시 시작] 문구를 넣었습니다.

 

이제 [hud.gd]에 기능을 연결해 생명이 0이 되면 [GameOver]가 나타나고,

[RestartButton]을 누르면 게임 데이터가 초기화된 뒤

스테이지가 다시 시작되도록 설정했습니다.

얏호! 성공입니다. 여러분!!!

게임 오버와 다시 시작 기능까지 잘 작동합니다! (헤헷)

 

이제 HUD는 단 하나의 기능만 구현하면 됩니다.

바로바로!! 우측 상단의 정지 버튼입니다.

 

[pause_button]의 [Mouse Filter]를 [Stop]으로 설정하고,

[gui_input] 시그널을 [HUD]에 연결해 버튼 입력을 받을 수 있도록 했습니다.

 

정지 버튼을 눌렀을 때 보여줄 메뉴는

별도의 [PauseMenu] 씬으로 만들었습니다.

화면을 어둡게 만드는 배경과 메뉴 이미지를 배치하고,

[계속하기]와 [다시 시작] 버튼을 추가했습니다.

게임이 멈춘 상태에서도 메뉴를 조작할 수 있도록

[PauseMenu]의 [Process Mode]는 [Always]로 설정했습니다.

이후 [hud.gd]에서 정지 버튼을 누르면

[PauseMenu]가 열리도록 연결했습니다.

 

짜잔~ 이제 정지 버튼을 누르면 게임이 멈추면서 메뉴가 나타납니다!

계속하기를 누르면 현재 위치에서 플레이를 이어가고,

다시 시작을 누르면 스테이지 처음부터 게임을 시작합니다.

여기까지 HUD에 넣어두었던 기능이 모두 완성되었습니다. (꺄아)

이제 정말 정말 라스트 작업인

게임 클리어 시 뜨는 점수판을 만들어 보겠습니다.

 

먼저 새로운 씬을 만들고 루트 노드를 [CanvasLayer]로 설정한 뒤

이름을 [StageResult]로 변경했습니다.

화면 뒤를 어둡게 만들기 위해

[ColorRect]를 추가해 [DimBackground]으로 이름을 변경하고

투명도를 140으로 조정했습니다.

 

[Control] 노드인 [ResultRoot]에 자식 노드로 [TextureRect]를 추가하고

이름을 [ScoreBoard]로 변경했습니다.

점수판에는 아이템 획득 개수와 점수는 물론,

사원증 보너스와 특수 아이템 올클리어 보너스까지 표시할 수 있도록

[Label]들을 추가했습니다.

실제 플레이 결과를 표시하기 위해 [game_manager.gd]에서

아이템 획득 수와 사원증 보너스, 올클리어 보너스를 관리하도록 수정했습니다.

 

[stage_result.gd]를 만들고, [game_manager.gd]에 저장된 데이터를 불러와

점수판의 각 항목과 최종 점수가 표시되도록 연결했습니다.

 

마지막으로 [hud.gd]의 엔딩 처리에 [StageResult]를 연결해,

회사 도착 말풍선이 끝나면 보너스를 계산하고

기존 HUD 대신 실제 플레이 결과가 담긴 점수판이 나타나도록 완성했습니다.

잘 적용되었는지 게임을 플레이해 봤습니다. (두근두근)

.

.

.

 

꺄아 성공!!!!!!!!!

마지막 기능까지 모두 성공입니다!!!!!!!!!!!!!!!!!!

 

모두 완성된 게임을 플레이해 보니

지난날의 기쁨과 좌절, 환희가 한꺼번에 떠오르네요. (크흑..감동…)

 

움직이는 캐릭터를 만들고

배경과 바닥 패턴을 고민하고 완성했던 추억이 새록새록…

 

물론 모든 작업이 수월하진 않았지만

노력한 만큼 뿌듯함이 크네요!

저 같은 AI 초보도 결국 게임 하나를 완성했습니다.

이게 되네요… 진짜로요! ㅎㅎ

 

그런데 말입니다…

게임을 완성하고 나니 욕심이 생겼습니다.

그것은 바로

STAGE 5까지 확장하기! (후후)

 

그래서 바로 실행에 돌입했습니다.

완성된 STAGE 1의 Godot 파일을 압축해서 그대로 클로드에 넣고

STAGE 2~5로 확장한 파일을 만들어 달라고 요청했습니다.

 

짜잔! 그랬더니 정말로 스테이지를 확장해서 파일을 생성했습니다.

(아니 이게 진짜 되네요?!!)

 

스테이지마다 난이도를 순차적으로 높여달라고 요청했는데,

실제로 플레이해 보니 난이도도 잘 적용되어 있었습니다.

움직이는 공중 단차를 자동으로 생성하고 장애물도 많아져서

제법 클리어하기 어렵더라고요 ㅎㅎ

물론 이렇게 AI가 만들어 줬다고 해서

바로 완성된 게임이 되는 것은 아니었습니다.

 

아이템이나 이미지 배치는 아직 어색한 부분도 있었고

충돌 영역의 위치 등은 직접 수정해야 할 부분도 보였습니다.

하지만 이 모든 것을 매번 새롭게 제작해야 한다면

스테이지 5까지 확장하는 데 꽤 오랜 시간이 걸릴 텐데 말이죠.

 

AI를 활용하니 스테이지 확장 작업이 생각보다 수월했습니다!

AI가 만들어 준 파일을 바탕으로 디자인을 교체하고

어색한 부분들을 직접 손보니

스테이지 2까지 뚝딱 완성할 수 있었습니다.

스테이지 2에서는

사무실에서 업무를 수행하는 여영자를 만나볼 수 있습니다.

맵 난이도가 올라간 게 확실히 느껴지죠?

 

열심히 일하고 스테이지 3에서는 점심도 먹으러 간다고요 ㅎㅎ 

이런 방식으로 STAGE 2~5까지 확장을 진행하고 있습니다.

그런데 게임을 만들다 보니 또 하나 욕심이 생기더라고요.

 

이왕 만든 거, 앱으로도 출시해 보면 어떨까요? (야망!)

두둥!!

물론 제가 앱 출시를 해 본 적은 없습니다.

저도 정말 하나도 몰라요;;

그래도 여기까지 왔는데 일단 한 번 도전해 보겠습니다!

과연 영자런을 실제 앱으로 출시할 수 있을까요?

진짜로 제가 도전해 보겠습니다!!!!!!!!!!!!

그 결과는…

저의 소식을 기다려주시는 분이 계시다면

다시 전해드릴게요!!

오늘의 기록  ✔ 게임 시작·도착 말풍선 및 연출 구현  ✔ 낙사·생명·리스폰·게임 오버 기능 구현  ✔ 일시정지 및 게임 클리어 결과 점수판 완성  ✔ STAGE 1 최종 완성 및 STAGE 2~5 확장 작업 진행  다음 미션  ✔ 영자런 앱 출시 도전?!!!

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