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

지난 시간에는 드디어 카메라를 설치해

공중 발판을 뛰어넘으며 달리는 여영자를 따라

화면이 함께 움직이도록 만들어 봤습니다.

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

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

그런데 카메라를 설치하고

만들어 놓은 마지막 구간을 보니 또 하나의 문제가 보였습니다.

 

FarBG는 계속 이어지는데

MidBG가 중간에서 뚝 끊겨버리는 겁니다.

배경마다 움직이는 속도가 다르다 보니

상대적으로 빠르게 움직이는 MidBG가

준비해 둔 구간보다 먼저 끝나버린 것이었습니다.

 그래서 오늘은 큰 마음을 먹고

게임의 전체 구간을 좀 더 길게 만들어 보기로 했습니다! (아자!)

 

지난 9편에서 1,920X1,080 크기의 배경 3장으로

시작 구간을 만들어 놓았는데요.

집에서 출발해 마을까지 도착하는 구간입니다.

이제 여영자의 출근길을 완성해 보겠습니다!

집에서 회사까지 출근하는 여영자의 게임 스테이지를 만들기 위해

다음 3장은 마을에서 도심으로,

마지막 3장은 도심에서 회사로 이어지도록 구성했습니다.

 

먼저 기존 배경 이미지 한 장을 첨부해

자연스럽게 이어지는 배경 한 장을 만들어 달라고 요청했습니다.

기존에 만들었던 배경 중 3번째 구간이 마음에 들지 않아

3번째 구간을 새로 만들었고,

이 과정에서 첫 번째 배경도 일부 수정했습니다.

 

그리고 생성된 이미지를 다시 기준 이미지로 사용해

다음 구간의 배경을 이어서 제작했습니다.

 

이어지는 구간이 자연스럽게 연결되지 않는 경우도 있어서

포토샵으로 약간의 리터칭을 했습니다.

특히 화면 아랫부분은 단차 지형에 가려지는 영역이라

이를 고려해 필요한 부분만 수정했습니다

이렇게 추가된 6장을 만들다 보니

어느새 하루가 지나 있었습니다….(멍…_)

프롬프트를 꼼꼼하게 아무리 적어도

머릿속에 있는 이미지를 그대로 현실화한다는 건 역시 쉽지 않네요. ㅠㅠ 

머리에 칩이라도 심어서 AI가 제 머릿속을 읽고

바로 그려주면 좋겠다는 생각까지 들었습니다 ㅋㅋ

(그런 세상이 곧 올지도 모르겠군요)

그렇게 불태운 결과..!!

.

.

.

저 좀 울어도 되나요? ㅠㅠ 

드디어 완성…

배경에 구름까지 추가해 보니

제법 그럴듯한 게임 배경이 완성되었습니다!

1,920X1,080 크기의 배경을 3장씩, 총 3구간을 제작해서

전체 길이를 17,280X1,080px로 만들었습니다!! (꺄아)

 

10화에서 다뤘던 Parallax 적용을 위해

이번에는 배경을 총 3개의 레이어로 분리해 저장했습니다.

 

▲ FarBG : 가장 먼 하늘 배경

 

▲ DistantBG : 멀리 보이는 도시

왼쪽 시작 부근은 마을 풍경이라 도시 이미지는 넣지 않았습니다.

▲ MidBG : 캐릭터와 가까운 건물·거리

먼저 FarBG부터 Godot에서 불러오겠습니다.

assets 폴더에서 기존에 저장해 둔 FarBG를 지우고 제작된 FarBG를 넣었습니다.

그리고 Godot을 실행했더니…

 

 

ERROR: Attempting to use an uninitialized RID

오류라니!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

갑자기 뭔가요 이거!!!!!!

 

파일이 망가질까 무서워서 다시 원래의 FarBG 이미지로 교체하니

에러는 사라지고 정상적으로 파일이 열렸습니다.

일단 처음 보는 오류라 원인을 알 수 없어서 

마음을 진정하고 ChatGPT에게 물어봤습니다.

 

정상적으로 생성되지 않은 리소스를 사용하려 할 때

발생할 수 있는 오류라고 하는데요.

전 그저 더 긴 이미지를 만들었을 뿐인데요.

앗..서..설마..

이미지가 너무 커서 그런 걸까요?

오류 이미지를 첨부해 ChatGPT에게 다시 물어봤습니다.

 

Godot 4.7에서 텍스처 한 장의 최대 크기가

16,384 x 16,384px였다니… (멍..)

한 장으로 길게 만드는 것이 작업하기 더 편할 것 같아서

17,280 x 1,080px로 길게 만들었는데….(엉엉)

 

괜한 짓을 한 것 같아서 속상했지만

그래도 해결 방법이 있으니 정말 다행입니다.

마음을 가다듬고 다시 달려보겠습니다!

그렇다면 일단 길게 제작한 배경을 분할해 볼까요?

 

Godot에서 사용할 수 있는 텍스처 크기를 고려해

5,760×1,080px 크기의 배경 3장으로 분할했습니다.

이제 assets 폴더에 새로 만든 이미지 3장을 넣고

Godot으로 이동합니다.

 씬 트리에서 [FarBG]를 선택 후

인스펙터에서 [Texture]에 연결된 기존 이미지의 오른쪽 화살표 메뉴를 누릅니다.

 메뉴가 나타나면 [빠른 불러오기]를 클릭합니다.

 

새롭게 제작한 1번 이미지 [bg_far_01]을 선택해 교체합니다.

 

새로운 이미지로 잘 변경되었네요!

노드 이름은 [FarBG_01]로 교체했습니다.

기존에 제작했던 배경과 사이즈가 동일하기 때문에

큰 변화는 느껴지지 않습니다.

이제 나머지 파일을 이어 붙여 긴 하늘 배경을 완성해 보겠습니다.

 

씬 트리에서 [FarBG_01]을 선택한 뒤

[Ctrl + D]를 눌러 복제합니다.

복제한 노드의 이름을 [FarBG_02]로 변경하고,

앞서 진행한 것과 동일하게

[빠른 불러오기]로 [bg_far_02]로 텍스처를 교체합니다.

같은 방법으로 [FarBG_03]도 [bg_far_03]으로 텍스처를 교체합니다.

 파일 3개를 모두 불러왔지만 화면에는 아무런 변화가 없습니다.

모두 같은 위치에 겹쳐 있기 때문인데요. 

이제 [FarBG_02]와 [FarBG_03]의 위치를 변경해 보겠습니다.

 

위치는 오른쪽 인스펙터에서 [Transform]을 수정하면 됩니다.

[FarBG_01]의 X축이 2,880 이므로 X축을 5,760px씩 증가시키면 됩니다

FarBG_02 → X = 8,640

FarBG_03 → X = 14,400

이렇게 위치를 변경했더니 하나의 긴 하늘 배경이 완성되었어요!

이번에는 동일한 방법으로 [MidBG]도 3장으로 분할해

같은 구조로 불러왔습니다.

FarBG와 MidBG가 화면에 모두 잘 배치되었습니다! (뿌듯)

이제 두 배경 사이에 배치될 건물 이미지를 불러오겠습니다.

이 건물 이미지는 전체 화면을 채우는 배경이 아니라

중간중간 배치할 예정이라 굳이 하나의 긴 이미지를 만들지 않고

2,894x1,080px 그대로 가져오겠습니다.

파일명은 [distant_BG_01]로 저장해 assets 폴더에 넣었습니다.

 

(1) [Background]를 선택하고 [+] 버튼을 누른 뒤.

(2) 검색창에 [Parallax2D]를 입력하고 (3) [만들기]를 클릭합니다

생성된 [Parallax2D]의 이름을 [DistantParallax]로 변경합니다.

 DistantParallax가 생성되었습니다!

이제 여기에 Sprite2D를 만들어 빌딩 이미지를 불러보도록 하겠습니다.

(1) [DistantParallax] 선택 후 [+] 버튼을 누른 뒤.

(2) 검색창에 [Sprite2D]를 입력하고 (3) [만들기]를 클릭합니다

새로 생긴 [Sprite2D]의 이름을 [DistantBG_01]로 변경합니다.

 

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

인스펙터 [Texture]의 비었음 옆의 [폴더 아이콘]을 클릭합니다.

목록에서 [distant_BG_01]을 선택하면 됩니다.

그러면 2D 화면에 건물 배경이 나타납니다.

 

먼저 레이어 순서를 변경해 볼게요.

DistantParallax를 FarParallax와 MidParallax 사이로 변경했어요.

Z Index가 실제 화면의 앞뒤 순서를 결정하지만 

헷갈리지 않도록 씬 트리도 실제 깊이 순서와 맞춰주었습니다. 

오른쪽 인스펙터에서 [Scroll Scale]의 X값을 0.4로 변경했습니다.

현재 FarBG는 0.2, MidBG는 0.6으로 설정되어 있어서

그 중간값으로 맞춰보았습니다.

이제 씬트리에서 [DistantBG_01]을 선택한 뒤

인스펙터의 [Ordering] > [Z Index]를 -7로 설정했습니다.

FarBG가 -10, MidBG가 -5로 설정되어 있기 때문에

그 중간값인 -7로 결정했습니다.

 

이 건물 배경은 전체 구간을 채우는 것이 아니라

필요한 곳에만 배치할 예정이라

하나의 이미지를 복제해 원하는 구간에 각각 배치했습니다.

이렇게 FarBG, DistantBG, MidBG까지

3개의 레이어로 배경 구성을 마쳤습니다.

이제 한번 게임 월드를 달려보겠습니다!!!

 

매일 집 앞만 달리고 점프했는데

이제는 마을을 지나 도심으로 GO!!

카페도 지나고 지하철역도 지나가네요.

그렇게 회사로 도착!!하면 끝날 줄 알았는데 말이죠.

그런데 잠깐…

무언가 이상한 점을 느끼지 않으셨나요?

열심히 추가하고 설정했던 건물 배경이 보이지 않았습니다 ㅠㅠ

저기 저 구름 앞에 건물이 보여야 하는데

아무것도 보이지 않았습니다.

 

대체 어디로 간 걸까요? 

오늘은 일단 여기까지!

다음 시간에는 사라진 건물 배경의 행방을 찾아보고

길어진 스테이지에 맞춰 Ground도 확장해 보겠습니다!

과연 여영자의 출근길은

회사까지 무사히 이어질 수 있을까요? 

 

그럼 다음 편에서 만나요!

오늘의 기록  ✔ 게임 스테이지 배경 확장 및 17,280×1,080px 제작  ✔ FarBG / DistantBG / MidBG 3단계 레이어 구성  ✔ Parallax 설정 및 건물 배경 추가  ✔ 긴 배경 이미지 분할 후 Godot 적용 및 테스트  다음 미션  ✔ 사라진 DistantBG의 원인 찾기  ✔ 길어진 스테이지에 맞춰 Ground 확장하기  ✔ 전체 플레이 구간 연결하기

매일매일 문제와 해결을 반복하느라

늘 쭈글 모드로 작업하고 있는데요.

그래도 하나씩 해결하다 보니

조금씩 성장하고 있다는 기분도 듭니다.

오늘도 쭈글 모드와 전투 모드를 오가며

다음 문제도 하나씩 해결해 보겠습니다!

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