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

지난 시간에는 횡스크롤 게임 배경을 만들고

배경에 맞춰 단차 지형도 수정해 보았습니다.

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

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

하지만 카메라가 없으니 

캐릭터가 움직여도 화면은 그대로 고정되어 있었습니다.

그래서 어렵게 만들어 놓은 배경과 중간 구간의 단차가

제대로 작동하는지도 확인할 수가 없었는데요.

 

그래서 오늘은 Camera2D를 추가하고,

여영자를 따라 화면이 움직이도록 만들어 보겠습니다!
(꺄아! 두근)

 먼저 [Player] 씬으로 이동하여 씬 트리에서 [Player]를 선택합니다.

(1) [+]버튼을 눌러 자식 노드를 추가한 뒤

(2) 검색창에 [Camera2D]를 입력한 뒤

(3) [만들기]를 눌러 Camera2D를 추가합니다. 

[Player]씬에 [Camera2D]가 잘 추가되었습니다.

오른쪽 인스펙터에서 [Enabled]가 켜져 있는 것도 확인했습니다.

이 설정이 켜져 있어야 해당 Camera2D를

게임 화면을 움직이는 카메라로 사용할 수 있습니다. 

[Player] 씬에서 Camera2D 설정을 마쳤으니 [Ctrl + S]로 저장합니다.

 이제 [main] 씬으로 돌아가서 [F6]을 눌러

Camera2D를 추가하는 것만으로도 화면이 따라오는지 확인해 보겠습니다.

과연 잘 적용이 되었을까요? (두근두근)

.

.

.

짜잔!!

Camera2D를 추가하고 실행해 보니

캐릭터를 따라 화면이 움직이는 것이 잘 작동했습니다.

 

지난 시간에 화면 이동이 안 돼서 확인을 못했던

공중 단차도 잘 점프하는 것도 확인했습니다만…

하.지.만. 늘 그렇듯이

해피엔딩만으로 끝나지 않는 초보의 길..

캐릭터를 플레이해 보니

화면에 보이지 않아야 할 영역까지 같이 보였습니다. ㅠㅠ

 

특히 시작 지점에서는

제가 원하는 화면보다 왼쪽 영역이 더 보였고...

 

점프를 하면 배경 이미지 위의 영역도 보였습니다.

제가 원한 화면이 이게 아닌데 말입니다. ㅠㅠ

 

무언가 조절하는 게 있을 것 같지만 알 수 없는 초보이기에

ChatGPT에게 물어봤습니다.

오호! Camera2D의 Limit 기능이라는 걸 설정하면 되는군요!

Limit은 카메라가 움직일 수 있는 범위를 정해주는 기능이라고 하는데요.

그렇다면 현재 게임 화면에 맞춰

왼쪽 시작점과 위·아래 이동 범위부터 설정해 보겠습니다.

 

 [Player]씬에서 [Camera2D] 선택 후

오른쪽 인스펙터에서 Limit 항목의 수치를 설정했습니다.

Left = 0

Top = 0

Right = 기존값 그대로

Bottom = 1080

Right는 아직 스테이지의 끝까지 지형을 만들지 않았기 때문에

정확한 값을 정하기 어려워 기본 설정 그대로 두고

나머지 수치만 먼저 변경해 보았습니다.

이제 설정한 값이 실제 게임 화면에 어떻게 적용되는지

다시 한번 확인해 보겠습니다.

과연 원하는 대로 화면이 조절되었을까요?

(두근두근)

.

.

.

 Limit을 수정하고 확인해 보니

시작 지점도 제가 원하는 지점으로 수정이 되었습니다!

 

이제 점프를 해도 배경 이미지 위쪽의 빈 영역이 보이지 않게 되었습니다!

흠.. 그런데 말이죠.

하나를 수정하고 보니 이상한 점을 발견했습니다.

 카메라를 설치하면 멀리 있는 배경은 천천히 움직이고

가까운 배경은 빠르게 움직일 줄 알았습니다.

그런데 실행해보니 FarBG와 MidBG가 지형과 똑같은 속도로 움직였습니다.

제가 이러려고 굳이 배경을 분리한 게 아닌데 말입니다.

배경마다 움직이는 속도를 다르게 설정할 수 있는 방법을

ChatGPT에게 물어봤습니다.  

배경에 서로 다른 움직임을 주려면 Parallax2D라는 기능을 사용하는군요.

그렇다면 먼저 가장 먼 배경인 FarBG부터 적용해 보겠습니다.

 

먼저 [main] 씬으로 이동하여 씬 트리에서 [Background]를 선택합니다.

(1) [+]버튼을 눌러 자식 노드를 추가한 뒤

(2) 검색창에 [Parallax2D]를 검색하세요.

(3) [만들기]를 눌러 Parallax2D를 추가합니다.

 

[Background] 안에 [Parallax2D]가 잘 추가되었네요.

 

알아보기 쉽게 [Parallax2D]의 이름을 [FarParallax]로 변경했습니다.

그리고 FarBG를 새로 만든 FarParallax 아래로 이동했습니다.

이제 FarBG가 Parallax2D의 영향을 받을 수 있는 구조가 되었습니다.

이제 FarBG가 카메라보다 천천히 움직이도록

이동 속도를 설정해 보겠습니다.

 

[FarParallax] 선택 후 [Scroll Scale]의 X값을 0.2로 변경했습니다.

X값이 1이면 카메라와 같은 속도로 움직이고,

1보다 작을수록 더 천천히 움직입니다.

그래서 저는 가장 먼 배경인 FarBG는 X=0.2로 설정했습니다.

자! 이제 [F6]을 눌러 움직임을 확인해 보겠습니다.

과연!!

.

.

.

 

우와! 이제 움직임에 차이가 생겼어요!!! (신기해!)

FarBG 하나로 Parallax2D가 정상 작동하는 것까지 확인했으니

중간 배경인 MidBG도 같은 방법으로 설정해 보겠습니다.

 

[Background]에 [Parallax2D]를 추가한 뒤

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

그리고 [MidBG]를 [MidParallax] 아래로 이동시켜 주었습니다.

여기까지는 FarParallax와 설정이 완전히 동일합니다!

이번에는 FarBG보다 조금 빠르게 움직이도록 설정해 볼게요.

우측 인스펙터에서 MidParallax의 Scroll Scale X값을 0.6으로 설정했습니다.

이제 다시 [f6]을 눌러 확인해 보겠습니다!

(두근두근)

.

.

.

우와! 드디어 성공입니다!!

Parallax2D를 적용하기 전에는 모든 배경이 같은 속도로 움직였는데요.

FarBG와 MidBG에 각각 다른 값을 적용하고 다시 달려보니

확실히 차이가 느껴졌습니다!

멀리 있는 배경일수록 천천히 움직이니

이전보다 화면에 깊이감이 생긴 것 같죠? ㅎㅎ

 

이제 임시로 만든 공중 발판을 교체해 볼게요!

기존 Ground가 64×64 크기의 타일을 사용하고 있기 때문에

64px 단위에 맞춰 공중 발판을 제작하기로 했습니다.

가로 5칸, 세로 2칸의 크기에 맞춰

320×128px 크기의 이미지 한 장으로 먼저 제작했습니다.

그런데 여기서 또 하나 고민이 생겼습니다.

 320×128 크기로 만든 이미지를 64×64 크기로 잘라서 가져가야 할까요?

아니면 이미지를 한 장 그대로 Godot에 넣고 사용할 수 있을까요?

이번에도 ChatGPT에게 물어봤습니다.

아하! 굳이 64×64 크기로 하나씩 자를 필요는 없는 거군요!

그렇다면 이번에는 이 이미지를

하나의 오브젝트로 등록해서 사용해 보겠습니다.

먼저 캐릭터가 밟을 수 있는 공중 발판 전용 씬을 만들어보겠습니다.

 상단 메뉴에서 [씬] >[새 씬]을 클릭하세요.

 

[다른 노드] 클릭 후 검색창에 [StaticBody2D]를 입력 후

[만들기] 버튼을 클릭합니다.

 

그러면 씬 트리에 [StaticBody2D]가 생깁니다.

저는 이름을 [FloatingPlatform]으로 변경했습니다.

이렇게 발판의 뼈대가 완성되었는데요.

이제 여기에 추가한 발판 이미지를 넣어 보겠습니다!

 

씬 트리에서 [FloatingPlatform] 선택한 뒤

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

검색창에 [Sprite2D] 입력 후 [만들기] 버튼을 클릭해 주세요.

 

여기까지 진행 후 [Ctrl + S]로 씬을 저장해 주세요.

 저는 [floating_platform.tscn]로 저장했습니다.

 

(1) [Sprite2D]를 선택 후 

(2)오른쪽 [Texture]의 <비었음> 옆 폴더 아이콘을 클릭합니다.

(3) 파일 선택 창이 열리면 공중 발판 이미지를 선택해 주세요.

 짜잔! 2D 화면에 320×128 크기의 공중 발판이 나타납니다.

이제 충돌 영역을 설정하겠습니다!

 

씬 트리에서 [FloatingPlatform]을 선택 후

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

검색창에 [CollisionShape2D]를 입력한 후 [만들기] 버튼을 누릅니다.

 

(1)씬 트리에서 [CollisionShape2D]를 선택하세요.

(2)인스펙터 [Shape] 항목에서 오른쪽의 [비었음]을 클릭하세요.

(3)메뉴가 나타나면 [RectangleShape2D]를 선택합니다.

그러면 2D 화면에 사각형 충돌 영역이 나타납니다.

인스펙터에서 RectangleShape2D의 세부 설정을 조절하여

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

X = 300 / Y = 16으로 크기를 조절하고, Position Y도 조정해

캐릭터가 실제로 밟는 발판 윗면에 충돌 영역이 오도록 수정했습니다.

[Ctrl + S]로 저장합니다.

이제 발판의 이미지와 충돌 영역까지 준비했으니,

실제 게임에 배치해서 캐릭터가 올라갈 수 있는지 확인해 보겠습니다.

[Main] 씬으로 이동해 기존의 공중 발판은 [Ground]에서 삭제했습니다.

파일 시스템에서 [floating_platform.tscn]을 검색한 후

2D 화면에 드래그하여 공중 발판을 배치했습니다.

발판을 좀 더 추가하기 위해

[Ctrl + D]로 복제한 뒤 2개 더 배치했습니다.

이제 [F6]을 눌러 실제 화면을 확인해 보겠습니다. (두근두근)

.

.

.

어라;; 여영자가 추락을 하네요.....(아아...)

이게 아닌데… 

작업 화면에서 보던 것보다

발판 사이의 간격이 훨씬 넓어져 있네요.

저는 분명 저렇게 배치하지 않았는데 말입니다.

 

 

이상하다 싶어서 씬 트리를 보니…

 이런!!!!!!!!!!!

제가 공중 발판을 MidParallax 안에 배치해 놓았네요. 

MidParallax의 영향을 받으면서

발판까지 배경과 함께 움직이고 있었던 겁니다.

공중 발판은 배경이 아니라

캐릭터가 직접 밟고 이동하는 게임 지형인데 말이죠.

그래서 발판을 MidParallax 밖으로 옮겨주었습니다.

자!! 이제 정말로 진짜로 수정이 되었을까요?
(제발…)

.

.

.

드.디.어 성공입니다!!! ㅜㅜ

발판을 MidParallax 밖으로 옮긴 뒤 다시 실행해 보니,

이번에는 제가 배치한 위치 그대로 발판이 보였습니다.

역시 노드의 위치도 제대로 확인해야 하는군요.

배경도 레이어마다 움직이는 속도 차이가 느껴지고,

캐릭터도 공중 발판을 깡총깡총 잘 뛰게 되었습니다!

오늘도 기나긴 시행착오 끝에 드디어 여기까지 완성했습니다.

이제 다음 시간에는 Camera2D의 설정을 조금 더 살펴보고,

화면과 게임 디자인을 다시 한번 보완해 보겠습니다.

 

그럼 다음 편에서 만나요!

오늘의 기록  ✔ Camera2D 및 Limit 설정  ✔ Parallax2D 적용  ✔ 공중 발판 제작 및 배치  ✔ 발판 위치 오류 수정  다음 미션  ✔ Camera2D 설정 보완  ✔ 게임 화면 및 디자인 다듬기  ✔ 전체 구간 점검

하나를 해결하면 또 새로운 문제가 나타나는

초보의 게임 만들기… 역시 쉽지 않네요. 

그래도 오늘도 하나씩 차근차근 해결하면서

조금 더 게임에 가까워진 느낌이 드네요~

벌써 10화까지 달려왔더니...왠지 모르게 혼자 감동의 물결...

앞으로도 힘내서 열심히 만들어 보겠습니다. (아자!)

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