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

지난 시간에는 게임 월드의 전체 구간을 만들고

Parallax 기능을 적용해

더욱 생동감 있는 배경을 만드는 것까지 도전했습니다.

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

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

그러나..

열심히 만들어 놓은 건물 배경이

게임을 플레이하니 감쪽같이 사라지는

황당한 일이 벌어졌습니다.

하지만 여기에서 좌절할 순 없겠죠?

 

오늘은 사라진 건물 배경을 복구(?)하고

배경에 맞는 그라운드를 수정하고 보완해 보도록 하겠습니다.

 

2D 작업 화면에는 이렇게 먼 배경에 건물이 보이는데 말이죠.

 

[F6]을 눌러 실제 게임 화면을 확인해 보면

감쪽같이 건물이 사라졌습니다. ㅠㅠ

건물이 사라진 원인을 파악하기 위해

ChatGPT에게 물어봤습니다.

 

아하…편집 화면과 실제 게임 화면에서는

Parallax가 적용되는 방식이 달라

배경의 위치가 달라질 수 있다고 합니다.

특히 제가 설정한 Scroll Scale이

카메라 이동에 따른 배경의 움직임에 영향을 주기 때문에

작업 화면에서 위치를 맞췄다고 해서

실제 게임에서도 같은 위치에 보이는 것은 아니었습니다.

그렇다면 이번에는

실제 게임 화면을 보면서 위치를 맞춰보겠습니다!

 

DistantParallax의 Scroll Scale X 값은 0.4로 설정해 둔 상태입니다. 

이 값을 다시 변경하는 것이 아니라

0.4가 적용된 실제 게임 화면에서 DistantBG의 위치를 조정해 보겠습니다.

실제 게임 화면과 작업 화면을 번갈아 보며 수정할 수 있도록

Main Window 방식으로 실행해 보겠습니다.

 

상단 탭에서 [게임] 탭을 클릭한 후

화면 우측 상단의 점 3개(⋮)를 선택합니다.

[다음 플레이 시 게임 작업 공간으로 띄우기]의 체크를 해제합니다.

 

이제 게임 탭에서 [F6]을 눌러 실행하면

기존처럼 별도의 게임 작업 공간이 아닌

Main Window에서 게임을 실행할 수 있습니다.

 

이제 [2D] 작업 화면과 [게임] 화면을

번갈아 확인할 수 있습니다.

 

작업 화면에서 보이는 위치와

실제 게임 화면에서 보이는 위치가 다르기 때문에

게임 화면을 기준으로 각 DistantBG의 위치를 하나씩 수정했습니다.

 

짜잔!

드디어 FarBG와 MidBG 사이에 DistantBG가 들어왔습니다!

 

게임 탭에서 실제 게임 화면을 확인하면서 위치를 맞췄으니

이제 건물이 사라지는 일은 없겠죠?

 

이제 [F6]을 눌러 실제 플레이를 해보면서

건물 배경이 원하는 위치에 잘 보이는지 확인해 봤습니다.

 

MidBG가 보이는 각 구간을 모두 플레이해 봤는데

이상 없습니다! (얏호)

흠..그런데 말이죠.

 

배경은 집에서 출발해 도심과 회사까지 이어지도록 완성했지만

막상 전체 구간을 달려보니

무언가 어색한 부분이 눈에 들어왔습니다.

 

도시로 이동했는데 캐릭터가 밟고 있는 바닥은

처음 주택가에서 사용했던 잔디와 흙 디자인 그대로였습니다.

도심 배경과는 정말 안 어울리죠? 

그래서 이번에는 배경 분위기에 맞게

새로운 Ground 디자인을 추가해 보겠습니다!

 기존 Ground를 제작했던 것과 같은 방식으로

이번에도 가장 기본이 되는 3장의 타일을

64×64px 크기로 제작해 assets 폴더에 저장합니다.

 

씬 트리에서 [Ground]를 선택한 후 왼쪽 하단 파일 시스템에서

제작한 이미지를 타일 소스에 드래그하여 추가합니다.

하단 [+ 버튼]을 눌러 경로 지정하여 추가도 가능합니다.

여러분~ 충돌 영역 설정 기억하시죠?

이제 새롭게 추가한 타일에 충돌 영역만 설정해 주면 됩니다!

 

(1) 인스펙터의 [Tile Set] > [Physics Layers]에서 [+ 요소 추가]를 클릭합니다.

(2) 추가한 이미지를 클릭한 뒤

(3) [타일셋]에서 편집창 위쪽 [선택]을 눌러주세요.

 

개별 타일 속성에서 [물리] > [Physics Layer 0]을 펼쳐줍니다.

키보드의 [F 키]를 누르면 타일 한 칸 전체를 채우는

기본 사각형 충돌 영역을 빠르게 만들 수 있습니다.

 

기존에 충돌 영역 추가할 때는 꽤 정신없었던 기억이 나는데요. ㅎㅎ

한 번 더 해보니 훨씬 수월하게 작업할 수 있었습니다!

추가한 타일은 모두 전체 충돌 영역을 설정했기 때문에

동일한 방법으로 충돌 영역 설정을 완료했습니다.

 

도심의 기본 지형은 모두 추가되었으니

신나게 Ground를 바꿔보겠습니다. 

원하는 타일을 드래그해서

바로 바꿀 수 있으니 꽤 재미있네요. ㅋㅋ

 

보도블록을 밟는 여영자로 변신했습니다. (얏호)

 

그렇게 열심히 흙과 보도블록을 섞어 Ground를 만들었는데요.

무언가 또 쎄한 기분이 들었습니다.

 

그것은 바로… 구도가 다른 두 Ground 였습니다.

하나 만들 생각에 신났던 나머지

다음에 어떻게 이어질지는 생각하지 못한 나 자신…ㅠㅠ (속상)

윗면의 구도가 너무 달라서

두 구간이 만나는 영역은 너무 어색했습니다.

흙 Ground의 상판 잔디 크기를 늘려 보완해 보려고 했으나

아직 어색하기는 마찬가지…

결국 열심히 만든 도시 Ground를 수정해야 하는군요.

초보에겐 한 번에 쉽게 되는 일은 없네요. (시무룩)

 

그래서 아스팔트 바닥의 구도를 조금씩 변경했습니다.

 

흐음… 상판 구도를 수정하긴 했지만

전혀 다른 컬러와 분위기의 두 구간이 이어지는 영역은

여전히 어색했습니다.

어떻게 수정해야 할지 고민이 되어서

ChatGPT에게 물어봤습니다.

 

ChatGPT는 일단 두 Ground의 높이를 맞추고

소품을 활용해 볼 것을 권장했는데요.

 

소품으로 쓸 긴 화분을 하나 준비했습니다.

 

(1)씬 트리에서 [Main] 선택 후 [+ 버튼]을 눌러 노드 추가 창을 엽니다.

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

(3) [만들기] 버튼을 눌러주세요.

추가된 노드 이름을 [Props]로 변경합니다.

앞으로 여기에 화단이나 가로등 같은

소품을 모아두고 쓸 예정입니다!

 

(1) [Props]를 선택한 뒤 (2) [+ 버튼]을 누릅니다.

(3) 검색창에 [Sprite2D]를 입력한 뒤 

(4) [만들기] 버튼을 눌러서 추가해 주세요.

이름은 [TransitionPlanter]로 변경했습니다.

 

[TransitionPlanter]를 선택한 뒤 인스펙터에서
Texture 옆 [폴더 아이콘]을 눌러 화분 이미지를 불러옵니다.

경계 영역에 화분을 배치해 보니

!!!!!!!!!!!!!!!!!!!

.

.

.

 

배치한 화분이 장애물로 보이지 않나요?;;;

왠지 점프해서 넘어야 할 것만 같은 느낌…(이게 아니야...)

장애물처럼 보여서 ChatGPT에게 수정 방법을 물어보니

TransitionPlanter의 Z Index를 -1 정도로 설정해

Ground 뒤에 배치해 보라고 하더군요.

 

Ground 뒤로 배치하고 Y축 값도 조금 수정해

화분 윗부분만 살짝 보이도록 배치했습니다.

아까보다 장애물 같은 느낌은 사라졌지만

아직 Ground가 자연스럽게 이어지지 않는 느낌이네요. ㅜㅜ

아직 해결된 느낌은 아닌 것 같은 찝찝한 느낌…

하지만 오늘 작업을 통해

어떻게 하면 이 문제를 해결할 수 있을지

조금은 감이 잡힌 것 같습니다! (찡긋)

그것은 바로….

다음 시간에 이어서 보여드릴게요!!ㅎㅎ 

과연 여영자의 출근길이

조금 더 그럴듯해질 수 있을까요?

그럼 다음 편에서 만나요!

오늘의 기록  ✔ 사라진 DistantBG 위치 수정 및 문제 해결  ✔ 도심에 어울리는 Ground 타일 추가 및 적용  ✔ Ground 충돌 영역 설정 및 주택가 → 도심 구간 수정  ✔ Ground 연결 구간에 소품 추가 및 배치 테스트  다음 미션  ✔ 다양한 높이의 단차 추가하기  ✔ 주택가와 도심의 Ground가 자연스럽게 이어지도록 수정하기  ✔ 단차 주변에 어울리는 소품 배치하기

멋진 모습으로 파바밧!

게임을 뚝딱 만들어 공개하고 싶었는데

생각보다 고군분투를 하고 있습니다. ㅜㅜ

그래도 재미있게 봐주시고 응원해주시는 댓글을 보면서

오늘도 다시 힘내고 있어요!

열심히 성장모드로 달려보겠습니다!

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