팬 게임을 하나 제작하면서 그 과정을 업로드해보려 합니다.
기본 틀은 유명한 카드 게임인 하스스톤을 기반으로 다른 게임의 이미지를 씌워 만들어보겠습니다.
따라서, 하스스톤 카드 이미지들(구글링으로 쉽게 구할 수 있습니다)과
팬 게임을 만들 대상의 리소스들(캐릭터 이미지, 사운드 등)을 먼저 구하고 시작했습니다.
1. 맵
기준 해상도를 1920x1080 으로 놓고 시작합니다.
하스스톤 맵을 그대로 쓰기보다 팬 게임에 맞는 이미지를 따서 화면 전체에 보이게 맞춰주었습니다.
그리고 Order In Layer를 -1 혹은 그보다 낮은 순서로 주면
후에 작업할 카드는 기본적으로 0이기에 항상 그 위에 그려지므로
맵은 0보다 낮은 순서를 설정하는 것을 추천합니다.
> 카메라 사이즈, 위치 조정 or 맵 이미지 스케일, 위치 조정으로 원하는 크기, 위치가 보이도록 조정
2. 스프라이트 마스크
2D 게임에서 Sprite Renderer(스프라이트 랜더러)를 사용하는 게임 오브젝트에서 마스크를 씌우는 순서부터 진행해 보겠습니다.
중앙의 맵보다 큰 캐릭터를 오른쪽 타원형 마스크 모양만 표시되게 잘라야 합니다.
오른쪽의 타원형 마스크 스프라이트 오브젝트는 보여주기 위해 배치한 것으로 오브젝트를 지운 뒤
마스크부터 씌워보도록 하겠습니다.
(1) 캐릭터 스프라이트 오브젝트를 클릭 > 인스펙터 창에서 Add Component > Sprite Mask를 검색하여 추가
(2) 추가한 Sprite Mask(스프라이트 마스크)의 Sprite를 클릭하여 마스크로 쓸 스프라이트를 추가
(3) Sprite Renderer(스프라이트 랜더러)의 Mask Interaction 드롭 박스를 클릭하여 None을 Visible Inside Mask(마스크 안의 스프라이트만 보이게끔)로 변경
이렇게 설정하면
과정 (2)의 스크린샷에서 본 마스크 위치 그대로 겹치는 캐릭터 스프라이트를 마스크 내부에만 보여줍니다.
캐릭터 스프라이트가 마스크 및 게임에 비해 지나치게 커서 이렇게 보이는데 이것도 해결해 보겠습니다.
(1) 스프라이트의 사이즈를 줄이기 위해 인스펙터 창에서 Pixel Per Unit 을 늘려주고
Apply를 눌러 적당한 크기를 맞춰줍니다.
사이즈는 원하는 만큼 줄였는데 기준이 중앙으로 되어 있어 원하는 부분을 보여주지 않습니다.
(2) Pivot을 Center > Custom으로 변경하여 원하는 부분이 중앙에 오도록 X, Y 값을 조절합니다.
값을 변경할 때마다 Apply를 눌러주고 스프라이트가 마스크 내에서 어디에 위치하는지 확인합니다.
원하는 부분에 중심이 위치할 때까지 반복합니다.
(X, Y가 모두 0일 때 왼쪽 아래입니다.)
여기서 가진 소스에 맞게 뒷 배경(일러스트에 배경이 있다면 고려할 필요 없음), 미니언 테두리(카드에 테두리가 분리되어 포함되어 있다면 고려할 사항 아님), 카드 테두리 등을 넣어주면 카드 앞면이 완성됩니다.
