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

지난 시간에는 전체 맵을 완성하고

게임의 재미를 더할 수 있는 아이템과 장애물을 만들어 봤습니다.

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

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

하지만 그저 이미지일 뿐…

아직은 아무런 기능이 없습니다!

 

과연!

아이템을 먹으면 점수가 정말 올라갈 수 있을까요?

이제 이 이미지에 아이템 기능을 넣어

진짜 게임다운 요소를 하나씩 완성해 보도록 하겠습니다!

먼저 코인부터 시작해 보겠습니다! (두근두근) 

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

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

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

 

(1) 방금 생성한 [Coin]을 선택한 뒤
[+] 버튼을 눌러 자식 노드를 추가합니다.

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

 

이번에도 [Coin]에 자식 노드를 추가하여

검색창에 [CollisionShape2D]를 검색해 만들어 줍니다.

 

여기까지 노드 세팅은 완료!

이제 준비된 이미지를 불러오도록 하겠습니다.

 

(1) [Sprite2D]를 선택한 뒤

(2) 파일 시스템에서 코인 이미지를 선택하고

(3) 인스펙터의 [Texture]에 드래그하여 코인 이미지를 불러옵니다.

그리고 [Ctrl+S]로 저장해 주세요.

이제 충돌 영역을 설정해 보겠습니다.

 

[CollisionShape2D]를 선택한 뒤

인스펙터의 [Shape]에서 [비었음]을 클릭하면 메뉴 창이 뜹니다.

 여기에서 [CircleShape2D]를 선택하면 됩니다.

 

코인 이미지에 맞춰

원의 크기를 조절해 충돌 영역을 지정합니다.

 파일 시스템에서 [coin.tscn]을 메인 씬에 드래그하여 배치합니다.

게임 화면 속에 드디어 코인이 보이기 시작하네요!

이제 이 코인에 스크립트를 붙여 기능을 넣어보도록 하겠습니다.

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

상단의 [스크립트 붙이기] 아이콘을 클릭합니다.

 

[coin.gd]를 선택한 후 인스펙터의 시그널 탭에서

[body_entered(body : Node2D)]를 찾아 클릭합니다.

시그널을 메서드에 연결하는 창이 뜨면 [연결] 버튼을 눌러주세요.

  

ChatGPT에게 코인에 캐릭터가 닿으면

코인이 사라지도록 하는 스크립트를 만들어 달라고 했습니다.

생성된 스크립트를 [coin.gd]에 붙여 넣으면 끝!

[Ctrl+S]로 저장한 뒤 잘 적용되었는지 확인해 봤습니다.

과연?!!

.

.

.

여영자가 폴짝 뛰어서 코인에 닿으니 코인이 사라졌습니다. (꺄아)

좋아요 좋아!

바로 제가 원하던 움직임이 완성되었습니다.

 

 그런데 잠깐!

코인이 사라지기는 했는데 점수는 그대로군요.

이제 코인을 먹었을 때

실제로 점수가 올라가도록 만들어 보겠습니다!

(1) 씬 트리에서 [HUD]의 [ScoreBar]를 선택한 뒤

상단 [+] 버튼을 눌러 자식 노드를 추가합니다.

(2) [Label]을 검색하여 (3) [만들기] 버튼을 눌러주세요.

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

 

[ScoreLabel]을 선택한 뒤 오른쪽 [Label]의 Text에 0을 입력합니다.

 

인스펙터의 [Theme Overrides]에서

 폰트의 색상과 아웃라인을 추가했습니다.

인스펙터의 폰트 메뉴에서 원하는 폰트로 변경할 수 있고,

크기도 조절할 수 있어요.

오른쪽 인스펙터에서 [Displayed Text]를 펼친 뒤

[Horizontal Alignment]와 [Vertical Alignment]를

[Center]로 변경합니다.

ScoreLabel의 영역을 베이지색 점수 표시 칸 전체를 덮도록 좌우로 넓힙니다.

 

완성된 모습을 게임 화면에서 확인해 봤습니다.

좋습니다! 이렇게 확정~

 지금부터는 게임의 점수를 관리할 수 있는

스크립트를 만들어 보겠습니다.

파일 시스템의 빈 공간을 마우스 오른쪽 버튼으로 클릭해서

[새 스크립트]를 생성합니다.

스크립트 이름은 [game_manager.gd]로 입력하고

프로젝트 최상위 경로인 [res://]에 저장합니다.

이 스크립트에서는 현재 점수를 저장하고,

아이템을 획득했을 때 점수를 추가할 수 있는 기능을 만들어 주었습니다.

이제 이 점수 관리 스크립트를

게임 어디에서든 사용할 수 있도록 등록해 보겠습니다.

상단 [프로젝트] > [프로젝트 설정]을 선택합니다.

 

프로젝트 설정 창에서

(1) [전역] > [오토로드] > [스크립트/씬 선택]을 클릭합니다.

(2) [game_manager.gd]를 선택하여 (3) [열기] 버튼을 클릭합니다.

 

오토로드 목록에 [GameManager]가 추가된 것을 확인할 수 있습니다.

[활성화]가 체크되어 있는지 확인한 후 [닫기]를 클릭합니다.

여기까지는 GameManager가 점수를 저장하고

변경할 수 있도록 만든 단계인데요.

이제 그 점수가 HUD의 ScoreLabel에 표시되도록 연결해야 합니다.

 

씬 트리에서 [HUD]를 선택하여 마우스 오른쪽 버튼을 눌러

[스크립트 붙이기]를 선택하여 스크립트를 생성합니다.

스크립트 이름은 [hud.gd]로 저장했습니다.

 

이제 GameManager에서 변경된 점수를

HUD에 표시하도록 연결해 보겠습니다.

ChatGPT에게 HUD와 GameManager를 연결하는 코드를

만들어 달라고 요청하여 생성된 코드를 [hud.gd]에 넣었습니다.

 

이제 잘 설정이 되었는지  코인을 복제해서 여러 개 배치해두고

점수가 점수판에 잘 입력되는지 확인해 보겠습니다.

과연 이번에도 성공할 수 있을까요?

(두근두근)

.

.

.

 짜라란~ 코인을 먹으면 점수가 올라갑니다!! (얏호~)

너무 신기해서 무한 반복 플레이를 하면서

한참을 놀았습니다..가 아니라 한참을 테스트해 봤습니다 ㅎㅎ

한 장의 이미지가 정말 아이템이 되었습니다!!

 

점수판 폰트가 너무 얇게 느껴져서 폰트를 교체했습니다.

이제 좀 더 눈에 확 들어오네요!

 

커피 역시 [Area2D]를 생성하고

[Sprite2D]와 [CollisionShape2D]를 추가한 뒤 커피 이미지를 적용했습니다.

커피는 세로로 긴 형태라

충돌 영역은 [RectangleShape2D]를 사용했습니다.

 

이후 코인과 동일하게
[body_entered(body : Node2D)] 시그널을 연결하고,

커피에 캐릭터가 닿으면 사라지도록 설정했습니다.

 

실제 게임에서 확인해 보니 커피도 정상적으로 사라졌습니다.

코인과 비교했을 때 커피가 조금 작아 보여

이미지 크기를 조정하고 충돌 영역도 다시 맞춰주었습니다.

그런데 말이죠. 

커피는 저에게 아주 특별한 아이템인지라 ㅎㅎ

코인과는 조금 다른 아이템으로 만들기로 했습니다. (커피러버)

코인처럼 점수를 획득하는 것은 물론

커피를 먹을 때마다 획득한 아이템 개수도 표시해 보겠습니다.

 

[item_bar]에 [Label]을 추가한 후 이름을 [ItemLabel]로 변경합니다.

이번에는 텍스트를

0 / 30 형태로 표시되도록 설정했습니다.

기존에는 GameManager에서 점수만 관리했는데,

여기에 수집 아이템 개수도 관리하도록 기능을 추가했습니다.

 

HUD가 GameManager에서 관리하는 수집 아이템 개수를 받아

화면에 표시하도록 연결했습니다.

아이템을 획득하면 변경된 개수가 시그널을 통해 전달되고,

HUD의 아이템 숫자도 자동으로 갱신됩니다.

 

마지막으로 커피를 획득했을 때 50점이 추가되도록 설정했습니다.

커피에 캐릭터가 닿으면 아이템 개수가 1개 증가하고,

50점이 추가된 후 커피가 화면에서 사라지도록 연결했습니다.

자아~ 여기까지 커피 아이템의 모든 설정이 완료되었습니다.

과연 잘 적용되었을까요?

.

.

.

꺄아.. 완성입니다!!!!!!

커피를 먹으니 50점도 추가되고 아이템 카운트도 되네요. (감격…)

 

 

테스트를 위해 커피를 복제해서 좀 더 많이 배치해 봤습니다.

문제없이 점수도 올라가고 아이템 개수도 잘 표시되네요!!! (얏호!)

앗..그런데 뭔가 부족한 이 느낌…

맞습니다 맞아요.

점수를 차감하는 요소가 하나도 없습니다!! (심심해라..)

 아이템을 획득하기만 하면 재미가 없잖아요.

무언가 또 잃어봐야 즐거움이 커지지 않겠습니까? (후후..)

다음 시간에는 남은 아이템들의 기능을 모두 완성하고

점수를 차감하는 장애물도 추가해 보겠습니다.

그리고 아이템이 더욱 눈에 띄도록 특별한 효과도 넣어볼게요!

 

그럼 다음 편에서 만나요!

오늘의 기록  ✔ 코인 점수 기능 구현  ✔ GameManager와 HUD 연결  ✔ 커피 아이템 및 수집 개수 기능 구현  ✔ 커피 획득 시 50점·아이템 카운트 적용  다음 미션  ✔ 남은 아이템 기능 모두 구현하기  ✔ 점수를 차감하는 장애물 기능 추가  ✔ 아이템과 장애물에 추가 기능 넣기

여러분, 정말 신기하지 않나요?

개발 제로, AI 초보인 제가

게임을 직접 만들고 있다니 말이에요ㅎㅎ

하나씩 만들어 가는 재미에 푹 빠졌는데요.

댓글을 읽다 보면 곳곳에 숨은 고수님들이 계신 것 같아요!

여러분의 도전 이야기도 마구마구 보여주세요~!

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