[Game] #1. New Super Mario 게임 인터페이스 생성

유니티 2D 게임 포스팅을 응용하여 뉴 슈퍼 마리오 자작 게임을 만들어보도록 하자.

https://udangtangtang-cording-oldcast1e.tistory.com/category/Unity/%5B4%5D%20Game%20Development%3A%202D%20Game

'Unity/[4] Game Development: 2D Game' 카테고리의 글 목록

마리오 게임 배경 만들기

기본 배경 생성하기

마리오 배경은 마리오 스프라이트를 다운받아 배경을 제거하여 사용한다. 아래 링크는 마리오 게임의 배경 리소스 파일이다.

https://www.spriters-resource.com/ds_dsi/newsupermariobros/sheet/26058/

DS / DSi - New Super Mario Bros. - Grassland and Sky - The Spriters Resource

배경 자르기 사이트: https://www.remove.bg/
배경 사이즈 변경 사이트: https://express.adobe.com/ko-KR/tools/image-resize/#

Sample 씬에 배경을 드래그&드랍한다. 다음 첨부 파일은 마리오 게임의 하늘과 성, 풀 배경 소스이다.

sky_cut.png

0.35MB

castle_cut.png

0.23MB

glass_ccexpress.png

0.12MB

배경 설정

Platform(바닥) 생성하기

마리오 게임 바닥도 위 사이트에서 잘라 사용한다. 우리는 다음 지형 타일 이미지 파일을 잘라 사용한다.

지형타일.png

0.26MB

해당 지형 파일에서 GlassRand 이미지를 사용한다.

GalssRand

해당 이미지를 배경을 제거하고 하나하나 유니티에 업로드 한 후 이어붙인다. 이후 하나의 프리팹으로 생성한다.

1. 이미지 배경 제거
2. 각 타일을 픽셀 별로 분리
3. 유니티에 타일로 사용할 이미지를 업로드 후 연결
4. Sample씬에 폴더로 묶어 저장 후 Project의 Asset 창에 드래그&드롭하여 프리팹으로 저장

타일을 완성하면 다음과 같다.

배경 완성하기

배경에서 자주 사용할 지형은 프리팹으로 설정하여 반복적으로 사용하기 용이하게 만든다.

데드존 추가하기

플레이어 캐릭터가 점프하여 다음 발판에 착지하지 못하고 아래로 떨어지는 것을 감지하고, 플레이어 캐릭터가 죽게 하는 낙사 판정 영역을 만들어보자.

 

낙사 판정은 게임 화면의 하단 영역에 가로로 긴 트리거 콜라이더를 만들어 구현한다. 그렇게 데드존 게임 오브젝트를 만든 다음 Dead 태그를 할당한다. 

 

Dead 태그는 플레이어 캐릭터를 죽게 하는 게임 오브젝트에 할당한 태그이다. Dead 태그를 가진 게임 오브젝트와 플레이어 캐릭터가 닿으면 플레이어 캐릭터가 사망하게 설정한다.

1. Empty Create 생성
2. 생성된 게임 오브젝트의 이름은 DeadZone, 위치를 (2.1, 1.5, 0)으로 변경
3. Box Colider 2D 컴포넌트 추가
4. Box Colider 2D 컴포넌트의 Is Trigger 체크, 사이즈는 (20, 0.5), Offset은 (20, 0.5)로 변경

마리오 캐릭터 추가하기

마리오 캐릭터를 만들기 위해선 방금 언급한 사이트에서 각 동작에 해당하는 스프라이트를 잘라 사용해야한다. 또는 다음 이미지 파일에서 각 동작별로 잘라 사용한다.

[Mario].png

0.70MB

위 이미지 파일에서 동작별로 잘라 Sprites에 저장한다. 스프라이트의 정보는 인스펙터 창에서 확인할 수 있다.

마리오 스프라이트 제작

마리오 스프라이트는 다음 사이트에서 각 동작에 해당하는 스프라이트를 잘라 사용한다. 이때 유니티 폴더의 Sprites에 저장한다.

다음과 같이 스프라이트의 Sprites Mode를 Multiple로 설정하고 Sprites Editor로 마리오의 스프라이트를 각 스프라이트 별로 잘라준다. 이는 각각의 스프라이트를 연속적으로 재생하여 실제 움직이는 것 처럼 만들어준다.

 

이때 생성된 애니메이션의 첫 번째 스프라이트를 하이어 라키로 드래그&드롭한다. 이후 하이어 라키와 Scene에서  드래그&드롭한 스프라이트 객체를 볼 수 있다. 이 생성한 객체의 이름을 Mario로 설정한다.

애니메이션 제작

이후 [cmd + 6]을 이용해 Ainmator을 켜고 Create를 눌러 애니메이션을 제작한다. 샘플 프레임을 스프라이트가 많은 경우는 60, 10개 이하는 16으로 맞춰준다. 정해진 값은 없으며 자신이 보기에 부드러운 애니메이션 효과로 맞추면된다.

Animator 화면

애니메이션 Preview