뉴진스 파워퍼프걸 팬게임 제작 (4)_ Stage1_배경 스크롤 제작 (New jeans Powerpuff girls fangame)

뉴진스 파워퍼프걸 팬게임 제작 (4)_ Stage1_배경 스크롤 제작

이번에는 기획에서 넘어가 직접 제작을 해볼 차례이다.
참고로 사용하는 엔진은 Unity엔진이다.

 

위 화면에서 보이는 배경 오브젝트들 중 일부분을 캡쳐하거나 새로 만들어서

유니티 안에서 조합해 최대한 비슷하게 꾸며볼 계획이다.

 

 

1. 새 프로젝트 생성

우선 새 프로젝트를 생성했다.

기본 생성된 씬을 보면 아무것도 없이 빈 화면만 보인다.

여기에 배경 오브젝트를 채워넣을 계획이다.

 

2. 하늘 이미지 추가

뮤직비디오 속 게임화면을 부분 캡쳐하고

그 이미지를 늘리고 붙여 만든 하늘 배경을 씬에 추가해 보았다.

그리고 하늘 배경은 가장 뒤에 있어야 하니까 Order in Layer 값을 넉넉하게 -30으로 설정했다.

 

 

3. 배경 늘리기

하늘 이미지를 게임 화면 크기인 1280x720으로 만들었는데

이 상태로는 스크롤되는 배경을 만들기 어렵다.

그래서 Draw Mode를 Tiled로 바꿔주고,

Size의 Width를 38.4로 변경해주었다.

 

 

 

4. 하단 구름 추가하기

하늘을 추가했으니 하단에 구름도 추가해보았다.

이 구름도 스크롤되면서 계속 이어져야 하는 이미지라

하늘과 똑같이 설정을 바꾸어 늘려주었다.

다만 하늘과 달리 하단 구름은 맨 앞에서

뒷 배경 오브젝트들 밑부분을 가려줘야 하기 떄문에 

Order in Layer 값을  0으로 설정했다.

 

 

5. 건물 배치하기

먼저 앞 건물을 배치하고

후에 뒷 건물들도 배치했다.

당연히 앞건물의 레이어가 뒷건물의 레이어보다 높게 설정했다.

 

다른 오브젝트들은 뮤비 화면 복사해서 살짝만 수정하면 되는데

건물들은 가려진 부분이 너무 많아서 새로 만드느라 오래걸렸다.

뮤비에는 더 많고 다양한 건물들이 있었지만

그거 다 구현하다간 시간이 너무 오래걸릴 것 같아서 

앞 건물 4개, 뒷 건물 4개만 만들었다.

 

 

6. 상단 구름 배치하기

건물까지 배치했으니 마지막으로 하늘을 떠다니는 구름들을 배치해주었다.

 

 

7. 나머지 배경도 채워주기

비어있는 나머지 배경들도 오브젝트들을 배치해 채워주었다.

 

 

8. 배경 모음 복사해 오른쪽에 붙이기

여태까지 만든 배경들을 하나로 묶은 뒤 복사해

원래 배경이 끝나는 오른쪽 끝에 붙여 준뒤

두번째 배경을 첫번째 배경의 자식으로 설정해서

첫번째 배경을 움직이면 두번째 배경도 따라 움직이게 만들었다.

완전히 동일한 이미지 두장이 있어야

배경을 스크롤할때 끊어지거나 어색한 부분없이 잘 반복재생할 수 있다.

 

 

9. 배경 스크롤 스크립트 제작

드디어 해보는 첫 코딩

코드 자체는 사실 예전에 다른게임 제작때 만들어 놓았던 코드들을

가져와서 수치만 수정해주었다.

 

배경의 위치값 중 x값이 -38.4까지 가게되면

게임 화면에는 두번째 배경화면의 0부터 12.8까지의 화면이 보이게 된다.

해당 화면은 첫번째 배경화면의 0부터 12.8까지의 화면과 동일하기 때문에

이때 x값을 0으로 바꿔주게 되면 다시 첫번째 배경화면의 0부터 12.8까지의 화면이 보이고

끊김없이 계속 구간반복되는 화면을 볼 수 있게 된다.

 

 

 

9. 배경에 스크립트 추가

작성한 스크립트를 배경 오브젝트에 추가해 주었다.

속도는 일단 -5로 설정해주었다.

이것으로 구간반복 스크롤되는 배경이 완성되었다.

 

 

 

 

10. 완성 결과물

유니티 개발 환경 화면

게임 진행 화면

 

 

 

gif 버전

 

 

 

이번 글에서는 배경화면 스크롤 제작을 해보았다.

이제 배경을 만들었으니 다음 글에서는

캐릭터를 추가하고 이동하는 스크립트를 추가해

하늘을 나는 캐릭터 모습을 구현해볼 계획이다.

 

 

뉴진스 파워퍼프걸 팬게임 제작 (3)_ Stage1_플레이어 캐릭터 및 스킬 기획 (New jeans Powerpuff girls fanga

 

뉴진스 파워퍼프걸 팬게임 제작 (5)_ Stage1_캐릭터 이동 구현 (New jeans Powerpuff girls fangame)