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

지난 시간에는 아이템을 만들고

게임에서 실제로 작동하도록 구현하는 과정까지 완성했습니다.

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

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

 

오늘은 지난 시간에 이어

게임에 장애물과 감점 기능을 추가하고,

아이템에 특별한 효과까지 하나씩 완성해 보도록 하겠습니다.

먼저 교통 콘 이미지를

장애물로 설정해 보도록 하겠습니다!

코인과 커피 아이템과 기본 설정은 동일합니다.

[TrafficCone]에 [Sprite2D]와 [CollisionPolygon2D]를 추가하고

이미지와 충돌 영역을 설정했습니다.

교통 콘은 기본 도형 대신 [CollisionPolygon2D]를 선택하고,

외곽선을 따라 점을 찍어 충돌 영역을 만들었습니다.

게임에 배치할 장애물을 한곳에서 관리하기 위해

메인 씬에 [Node2D]를 생성하고 이름을 [Obstacles]로 변경했습니다.

파일 시스템에서 [traffic_cone.tscn]을 선택하여

[Obstacles] 아래로 드래그하여 배치하면 화면에 교통 콘이 보입니다.

 다음 과정은 모두 기억하시죠?

[TrafficCone]에 [body_entered(body : Node2D)] 시그널을 연결합니다.

[traffic_cone.gd]에 교통 콘에 캐릭터가 닿으면

10점이 차감되도록 기능을 추가했습니다.

 

게임을 플레이해 보니 정확하게 10점 차감 완료!

하지만…

점수는 차감되지만 캐릭터가 교통 콘을 그대로 통과해 버립니다.

커피나 코인과 달리 교통 콘은 장애물인 만큼

캐릭터가 그냥 통과해서는 안 되겠죠?

 지금까지 게임을 만들면서 사용했던 충돌 기능을 활용해

캐릭터가 콘을 통과하지 못하도록 설정해 보겠습니다.

 

[TrafficCone]에 자식 노드로 [StaticBody2D]를 추가하고

생성된 [StaticBody2D]에 [CollisionShape2D]를 추가했습니다.

[CollisionShape2D]의 충돌 영역을 조절해

캐릭터가 교통 콘을 통과하지 못하도록 설정했습니다.

이제 잘 설정이 되었는지 확인해 보겠습니다!!

 

오홋!! 충돌 영역이 설정되니

이제 교통 콘은 점프해서 넘지 않는 이상 통과할 수 없습니다!!

흠..그런데  장애물 요소에 임팩트가 너무 없는 것 같지 않나요?

그래서 교통 콘에 부딪혔을 때

차감되는 점수가 화면에 나타나는 기능을 추가해 보겠습니다.

 

새로운 씬을 생성하고 [Node2D]를 추가한 뒤

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

자식 노드로 [Label]을 추가하고 이름을 [ScoreLabel]로 변경했습니다.

 

[ScoreLabel]에 -10을 입력하고

폰트 크기와 색상을 조절해 눈에 잘 띄도록 설정했습니다.

 

[ScorePopup]에 [score_popup.gd] 스크립트를 붙였습니다. 

숫자가 잠깐 나타났다가

위로 올라가면서 자연스럽게 사라지도록 스크립트를 작성했습니다.

이 기능은 획득 아이템에도 그대로 적용했습니다.

획득 점수는 노란색, 감점은 빨간색으로 표시되도록 설정 완료!

 

마지막으로 [traffic_cone.gd]에

[ScorePopup]을 불러오는 코드를 추가하고,

기존 _on_body_entered()에 점수 팝업을 표시하는 기능도 연결했습니다.

자아~ 이제 한 번 확인해볼까요? (두근두근)

.

.

.

 교통 콘에 부딪히는 순간 -10이 나타나고 위로 올라가면서 사라집니다!

이제야 감점됐다는 게 확실하게 보이네요. ㅎㅎ

 이제 아이템의 기본적인 기능은 완료가 되었어요.

이제 맵에 아이템을 신나게 배치해 볼까요? (얏호!)

게임의 시작 부분에는 감점 요소는 배치하지 않고

코인과 커피를 배치하고 플레이해 봤습니다.

 

흠…아이템을 하나씩 만들고 확인할 땐 몰랐었는데

배치하고 보니 좀 심심한 느낌이 드네요.

그래서 커피에 반짝이 효과를 하나 넣어서

코인보다 좀 더 특별한 아이템으로 꾸며보겠습니다.

 

새로운 씬을 만들어 [Node2D]를 추가하고

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

[CollectSparkle]에 자식 노드로 [CPUParticles2D]를 추가합니다.

 

[CPUParticles2D] > [Texture]에 반짝이 이미지를 불러온 뒤

별이 빠르고 짧게 퍼지는 효과를 만들기 위해

인스펙터의 옵션 수치들을 조절했습니다.

 

여기서 잠깐!

인스펙터에서 파티클 옵션이 생각보다 많아서 처음엔 헷갈렸는데요.

그래서 간략하게 정리해 봤습니다.

 더 많은 옵션들이 있었지만 저는 이 설정들을 사용해서 세팅했습니다.

조금씩 바꿔보면서 파티클 세팅을 완료했습니다.

파티클을 넣었더니

반짝반짝 조금 더 특별한 커피가 되었습니다!! (만족)

 

이제 만들어 둔 [CollectSparkle] 씬을 커피 아이템과 연결해 보겠습니다. 

 

먼저 [coffee_item.gd]에

[CollectSparkle] 씬을 불러오는 코드를 추가했습니다.

커피 주변에는 평소에도 작은 반짝임이 움직이도록 설정했습니다.

여기에 커피를 획득했을 때는 [CollectSparkle]이 생성되도록 해,

커피가 있던 위치에서 더 큰 별 파티클이 한 번 터지도록 연출했습니다.

이제 게임을 실행해서 확인해 보겠습니다. (두근두근)

.

.

.

어디갔나요…나의 빤짝이…

분명 파티클을 모두 설정했는데 왜 안 보이는 거죠? ㅠㅠ

 

그래서 ChatGPT에게 문제를 확인해봤습니다.

 

위치 설정에는 문제가 없었기 때문에

의심되는 부분은 바로 재생 시점이었습니다.

 

ChatGPT의 답변을 참고해 [collect_sparkle.gd]를 수정했습니다.

파티클이 바로 실행되지 않고

한 프레임 기다린 후 실행되도록 설정했습니다.

이제는 정말 보여야 할 텐데 말입니다. ㅠㅠ (제발..)

두근거리는 마음으로 게임을 실행했습니다!

.

.

.

 

드.디.어

반짝이 효과가 보입니다! (감격!)

반짝이와 더불어 아이템이 가만히 있지 않고

위아래로 천천히 움직이는 모션도 추가해 봤습니다.

 작은 효과 하나가 추가됐을 뿐인데

게임이 더 재미있어 보이지 않나요? (너무 예쁘다…)

남은 아이템들은 앞에서 만들어 둔 아이템을 복제해서

빠르게 세팅할 수 있었습니다.

획득 아이템인 샌드위치는 100점을 획득하도록,

장애물인 바리케이드는 20점이 감점되도록 설정하고

남은 아이템 배치까지 모두 완료했습니다.

 

처음에는 아이템 하나를 만드는 것도 어렵게 느껴졌는데,

앞에서 만들어 둔 기능을 복제해서 활용하니

훨씬 수월하게 작업할 수 있었습니다.

여기까지 계획했던 아이템은 모두 배치했습니다만

다나와 도착 지점에 배치할 특수 아이템이 남아있습니다.

 짜잔!! 바로 여영자의 사원증입니다.

마지막 공중 단차에는 1스테이지의 최종 보상으로

다나와 사원증을 배치해 보도록 하겠습니다.

 

사원증은 아이템과 같은 방식으로 씬을 만들고

충돌 영역을 설정했습니다.

일반 아이템과 구분하기 위해

[Main]에 [Rewards] 노드를 만들어 사원증을 배치했습니다.

 

사원증에도 커피에 사용했던 반짝이 효과도 추가하고

인스펙터의 값을 조정해서 배치를 완료했습니다!

 

기존 아이템의 설정값을 활용해 수월하게 세팅을 끝냈습니다.

다음은 배치만 되어있고 아직 움직임이 구현되지 않은

HUD 진행바를 완성해 보겠습니다.

 

[HUD] > [StageProgress] > [youngja_face]에서

여영자 얼굴이 움직일 시작 위치와 도착 위치의 X값을 확인했습니다.

진행바의 시작 위치는 55.5, 도착 위치는 244로 설정했습니다.

[Main]에 자식 노드로 [Marker2D]를 추가하고

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

게임을 시작하는 캐릭터 위치를 진행도의 출발점으로 사용하기 위해

X: 400 / Y: 300 위치에 배치했습니다.

 

[hud.gd]에서는 캐릭터가 출발점부터

사원증이 있는 도착점까지 얼마나 이동했는지 계산하고,

HUD 속 여영자 얼굴도 진행도에 맞춰 함께 움직이도록 설정했습니다.

 

짜잔!

여영자가 앞으로 이동할수록

HUD 진행바의 얼굴도 함께 이동하고 있습니다. (감동…)

 

처음에는 코인을 제외한 획득 아이템 수를 30개로 임시 설정했는데요.

실제 배치된 커피 5개와 샌드위치 3개에 맞춰

최종 8개로 수정했습니다.

진행바를 보니 벌써 맵의 중간 지점을 지나고 있네요.

다나와 사원증 획득 완료!

캐릭터와 함께 진행바도 도착 지점까지 이동했네요.

이렇게 모든 아이템이 배치가 되었습니다. (꺄아~)

오늘은 스테이지에 필요한 아이템을 모두 배치하고,

점수 팝업과 파티클, 움직임은 물론 HUD 진행바까지 완성해

더 생동감 있는 게임 화면을 만들어 봤습니다.

다음 시간에는 낙사 구간과 생명 기능을 구현하고

남은 HUD의 기능을 마무리하도록 하겠습니다.

 

그럼 다음 편에서 만나요!

오늘의 기록  ✔ 장애물 및 점수 차감 기능 구현  ✔ ScorePopup·파티클 효과 추가  ✔ 사원증 및 스테이지 아이템 배치 완료  ✔ HUD 진행바 기능 구현  다음 미션  ✔ 낙사 구간 및 생명 기능 구현하기  ✔ 남은 HUD 기능 마무리하기  ✔ 게임의 시작과 끝을 완성할 기능 추가하기

여러분..여기까지 달려오다 보니 

게임의 끝이 정말 보이지 않나요??

이제 완성이 얼마 남지 않았습니다!!!

느낌상 한 95% 정도 완성된 것 같은 느낌적인 느낌…

마지막까지 힘을 내서 멋지게 마무리해 보겠습니다. 아잣!

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