안녕하세요. 여영자입니다 :)
지난 시간에는 타일맵을 이용해 여영자가 뛰어넘을 수 있는
단차 지형을 만드는 것까지 완성했습니다.
[40대 AI 초보 성장 일지] 8편
https://dpg.danawa.com/bbs/view?listSeq=6048388&boardSeq=309
이제 본격적으로 단차를 더 만들어야지!! 했는데 말이죠.
막상 단차를 배치하려고 하니
배경 이미지가 있으면 더 수월하게 작업할 수 있을 것 같았습니다.
그래서 오늘은 먼저 알록달록한 게임 배경을 만들고,
완성된 배경을 보면서 단차와 지형을 추가해 보겠습니다!
흠… 그런데 배경을 만들려고 하니 고민이 생겼습니다.
배경을 한 장으로 만들면 간단해 보이긴 하는데
레이어를 나눠야 더 입체적으로 보이지 않을까요?
어떤 방법으로 할지 고민이 되어 ChatGPT에게 물어봤습니다.
오호… 배경을 한 장으로 만들 수도 있지만,
카메라를 사용한다면 레이어를 분리하는 것이 좋겠군요!
그럼 배경 제작 과정을 한 장으로 살펴볼까요?
오호! 제작 과정을 보니 한 번에 이해가 되었습니다.
마음 같아선 레이어를 조각조각 나눠서
카메라 무빙까지 기가 막히게 만들어 보고 싶지만
전 초보잖아요… (크흡)
욕심을 조금 내려놓고 먼 배경 1장과 중간 배경 1장,
이렇게 두 개의 레이어로 나눠 제작하기로 했습니다.
횡스크롤 방식이라 가로로 긴 이미지로 제작했습니다.
무작정 길게 만들 순 없어서 1920×1080 화면을 가로로 3배 늘린
5760×1080 크기로 먼저 제작해 봤습니다.
먼 배경 이미지는 비교적 반복되는 패턴이라
ChatGPT로 제작하는 것이 어렵진 않았습니다.
(긴 대화가 필요했을 뿐…)
하.지.만...
중간 배경 이미지는 구조도 복잡하고 여러 요소가 들어가다 보니
하나의 긴 이미지로 원하는 결과를 만드는 것이 생각처럼 쉽지 않았습니다.
그래서 1920×1080 크기의 이미지 3장으로 나눠 개별 제작 후
3장을 자연스럽게 이어 붙여 5760×1080 크기의 중간 배경을 제작했습니다.
이음 부분의 어색한 부분은 포토샵으로 사알짝 보정을 해줬습니다.
캐릭터 동작을 만들 때도 느꼈지만
연속적인 이미지를 AI로 생성할 땐
하나씩 제시하고 그다음 것을 이어서 만드는 것이
가장 만족스러운 결과가 나오는 것 같습니다.
(이상 초보의 생각입니다..ㅋ)
짜잔!
집에서 회사로 출근하는 길을 생각하며 제작해 봤는데요.
현재 만들어진 곳은 집에서 회사까지 가는 길의 중간쯤 되는 동네입니다.
일단은 이 배경을 기준으로 게임을 제작해 보고
회사까지 이어지는 나머지 길은 게임을 만들어가면서
조금씩 추가해서 완성해 보겠습니다!
8화에서 타일맵의 이동과 충돌 테스트까지 모두 확인했는데요.
이제 본격적으로 게임을 만들기 전에 씬 트리부터 정리해 보겠습니다.
테스트용으로 제작한 Ground와 Platform 노드는 삭제했습니다.
이제 TileMapLayer의 이름을 Ground로 변경해 주었습니다.
앞으로 바닥과 단차는 Ground 노드에 타일을 배치해서 만들어주면 됩니다.
이제 테스트용 지형도 정리했고 배경 이미지도 준비했으니
드디어 무채색 화면을 벗어나
실제 게임 화면을 만들어 볼 차례입니다!
씬 트리에서 [Main] 선택 후 마우스 오른쪽을 클릭하여
[+ 자식 노드 추가] 버튼을 클릭합니다.
씬 트리 상단 [+] 버튼을 클릭해도 됩니다.
새 노드 만들기 검색창에서 [Node2D]를 추가하여 [만들기]를 선택합니다.
생성된 노드 이름을 [Background]로 변경해 주었습니다.
앞으로 배경과 관련된 요소들은
이 Background 아래에 넣어 관리할 예정입니다.
이제 Background를 선택하고 [Sprite2D] 노드를 추가합니다.
이름은 알아보기 쉽게 [FarBG]로 변경했습니다.
이제 이미지를 가져오겠습니다!
(1) 씬 트리에서 생성한 [FarBG]를 선택한 후
(2) 우측 인스펙터의 [Texture]에서 비었음 옆 [폴더 아이콘]을 클릭합니다.
(3) 새 창이 뜨면 [bg_far.png]를 선택해서 Texture에 넣어줍니다.
짜잔! 드.디.어
파릇파릇한 배경 이미지가 게임 화면 안으로 들어왔습니다.
지긋지긋했던 회색 배경이 드디어 가려졌습니다 ㅎㅎ
배경 이미지를 여영자의 위치에 맞게 조절해 볼게요.
우측 인스펙터의 [Transform] > [Position]에서 X/Y 값을 조절해 줍니다.
제가 만든 배경은 5760×1080이므로
이미지의 절반인 X=2880 / Y=540으로 입력했습니다.
이제 배경이 게임 월드의 중앙을 기준으로 딱 맞게 배치되었습니다.
엇..그런데??
왜 배경 이미지가 가장 위에 있는 거죠?
씬 트리에는 가장 아래에 배경 노드가 있는데….
제가 또 뭔가 실수를 한 걸까요? (당황;;;)
그래서 ChatGPT에게 물어봤습니다.
씬 트리에서 레이어 순서만 바꿔주면 되는 줄 알았는데
Z Index를 이용해 화면의 앞뒤 순서를 명확하게 지정할 수도 있습니다.
배경 노드가 많지 않을 때는
씬 트리 순서를 바꾸는 것만으로도 해결할 수 있습니다.
하지만 앞으로 배경이나 오브젝트가 많아지면
씬 트리 순서만으로 관리하기가 점점 복잡해질 수도 있겠죠?
그래서 저도 단순히 레이어 순서만 변경하는 대신
Z Index를 지정해 배경과 캐릭터의 앞뒤 순서를 설정해 보겠습니다.
[FarBG]를 선택하고 인스펙터의 [Ordering] > [Z Index]에서
값을 -10으로 설정했습니다.
입력하자마자 캐릭터와 단차가 다시 보입니다!!
이제 두 번째 배경 레이어인 중간 배경도 추가해 보겠습니다.
방법은 동일합니다!
(1) [Background] 선택 후 새로운 [Sprite2D]를 추가했습니다.
이름은 [MidBG]로 변경했습니다.
(2) 우측 인스펙터의 Texture에서 비었음 옆 [폴더 아이콘]을 클릭합니다.
(3) 새 창이 뜨면 [bg_mid.png]를 선택해서 Texture에 넣어줍니다.
FarBG와 동일하게 [Position]은 X=2880 / Y=540으로 설정했습니다.
Z Index 값이 클수록 화면 앞쪽에 표시되는데요.
가장 먼 배경인 FarBG는 Z Index를 -10으로 설정했으니
그보다 앞에 있는 MidBG는 -5로 설정했습니다.
드.디.어
배경 이미지를 게임에 다 불러왔습니다!!!
Z Index를 조절해서 가장 뒤에 FarBG를, 그 앞에 MidBG를 배치했습니다.
캐릭터와 단차는 가장 앞에 보이도록 설정했습니다.
휴…파일 불러오기만 했는데
왜 이렇게 또 시간은 흐른 건가요….(쭈글)
하지만 포기란 없습니다!!
다시 힘을 내서 배경에 맞도록 단차를 수정해 보겠습니다!
먼저 만들었던 단차 지형의 높이가 너무 높아서
배경 이미지가 많이 가려지는 느낌이 들었습니다.
배경 이미지에 맞도록 단차를 좀 수정해 보도록 하겠습니다.
8편에서 다뤘듯이 TileMapLayer에 등록된 패턴은
드래그로 쉽게 생성하고 이동이 자유롭기 때문에
손쉽게 단차를 이동하고 변경할 수 있습니다.
이어지는 구간에도 단차를 조금 더 추가해
좀 더 긴 플레이 구간을 만들었습니다!
이제 [F6]을 눌러 실제 게임에서 확인해 보겠습니다.
두근두근
.
.
.
시작 구간은 문제없이 잘 걷고 점프도 하는군요.
(좋아좋아!)
엇… 그런데 말이죠.
캐릭터는 오른쪽으로 계속 이동하는데
화면은 따라가지 않습니다. ㅜㅜ
화면이 이동하지 않기 때문에
잔뜩 쌓아 놓은 단차는 잘 작동하는지 확인할 길이 없습니다 ㅠㅠ
캐릭터는 분명 움직이고 있는데
화면은 왜 따라오지 않는 걸까요?
이번에도 ChatGPT에게 물어봤습니다.
아!! 카메라!!!
정신없이 만들다 보니 카메라의 존재를 까맣게 잊고 있었습니다.
카메라를 만들어야 게임 실행 중 화면이 캐릭터를 따라 이동하기 때문에
중간 단차나 배경을 제대로 확인하려면 카메라를 추가해야 하는군요.
산 넘어 산이로다….
새로운 산이 생겼습니다 여러분….
다음 과제 당첨!!
오늘은 직접 배경 위에 지형을 배치하고 실행해 보니
이제 정말 조금씩 게임다운 모습이 보이기 시작했습니다.
다음 시간에는 Camera2D를 이용해
화면이 여영자를 따라 움직이도록 만들고,
아직 확인하지 못한 중간 구간의 지형도 직접 살펴보겠습니다.
과연 이번에는 또 어떤 문제가 기다리고 있을까요…
그럼 다음 편에서 만나요!
| 오늘의 기록 ✔ 게임 배경 제작 및 적용 ✔ FarBG / MidBG 레이어와 Z Index 설정 ✔ 배경에 맞춰 단차 지형 수정 및 테스트 다음 미션 ✔ Camera2D 추가하기 ✔ 여영자를 따라 움직이는 화면 만들기 ✔ 점프 동작 보완하기 |
원래 오늘은 점프 동작도 조금 더 다듬어 보려고 했는데요.
역시 게임 만들기는 마음먹은 대로만 진행되지 않는군요.
배경 하나 만들고 넣었을 뿐인데 또 새로운 문제가 나타났습니다.
초보의 게임 만들기… 생각보다 쉽지 않네요. (쭈글…)
그래도 절대 포기하지 않고
하나씩 해결해 보겠습니다!
댓글과 공감은 여영자에게 정말 큰 힘이 됩니다.
![[G마켓] ★한정수량★ HP R7+5060 게이밍노트북 169만원대](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAANSURBVBhXY/jy5ct/AAmYA9xDo2sYAAAAAElFTkSuQmCC)
![[네이버] 무지 맨투맨 티셔츠 15,000원(2장이상 구매시 무료배송)](https://img.danawa.com/images/attachFiles/7/66/6065951_1.png?fitting=Large|320:240&crop=320:240;*,*)
![[네이버] 로캣 Pure Air 무선 게이밍 마우스 한정수량 깜짝세일 역대가 10.1 ~ 10.11](https://img.danawa.com/images/attachFiles/7/66/6065777_18.png?fitting=Large|320:240&crop=320:240;*,*)
