요즘 C#과 유니티를 공부하고 있는데요, 3D 게임은 혼자서 만들기 벅차더라고요. 코딩은 둘째치고 3D 모델링을 못해서 제가 원하는 그런 게임을 만들기가 쉽지 않더라고요. 그래서 이참에 2D 게임이나 만들어 볼까 하고 강좌를 찾아봤습니다. 예전부터 오픈월드 RPG 게임을 한번 만들어보고 싶었는데 마침 마음에 드는 강좌를 찾았습니다. 그래서 강좌를 따라하며 배우면서 겸사겸사 블로그에도 글을 쓰려고 합니다. 제가 작성하는 "유니티 2D RPG 강좌" 시리즈는 모두 유튜버 gamesplusjames님이 만드신 강좌를 따라하는 것임을 미리 알려드립니다.
1-1. 스프라이트란 무엇일까?
3D 게임에 사용되는 플레이어, 적 등의 모델들은 모두 3D 모델로 되어있습니다. 2D 게임에서 사용되는 플레이어와 적 그림들은 "스프라이트"라고 하죠. 게임에서 제일 기초가 되는게 바로 스프라이트입니다. 지금 만들 2D RPG 게임에 사용될 스프라이트는 "도트" 형식의 스프라이트입니다. 우리가 흔히 아는 고해상도 고퀄리티의 그림들이 아닌 "점"들을 사용해서 그린 픽셀 아트를 도트라고 합니다. 위 사진처럼 도트를 잘 그리는 사람들은 되게 잘하시더라고요 ㅎㅎ
그럼 시작해 볼까요? 유니티를 실행하고 새 프로젝트를 만들어 줍시다. 상단에 있는 "New" 버튼을 클릭해 주세요.
먼저 프로젝트 이름과 프로젝트를 저장할 위치를 정해주세요. 그 다음 우리는 2D 게임을 만들것이기 때문에 Template를 2D로 설정해 줍시다. 설정을 완료했다면 "Create Project" 버튼을 클릭해서 프로젝트를 생성해 주세요.
Project Name: 프로젝트 이름 Location: 프로젝트 위치 Template: 2D
제일 먼저 스프라이트로 사용할 이미지를 불러와야겠죠. "Sprite"라는 이름의 폴더를 만든 후 "Character"와 "Tiles" 파일을 불러와 줍시다. Character와 Tiles 그림은 아래 압축 파일로 첨부했습니다.
스프라이트.zip
먼저 Character 스프라이트를 살펴봅시다. 스프라이트를 보면 앞을 보는 그림 4개, 뒤를 보는 그림 4개, 왼쪽, 오른쪽을 보는 그림 4개씩 총 16개의 플레이어 그림이 있습니다. 각 그림의 픽셀 수를 세어보면 가로 세로 16개씩, 16x16 px입니다. 오른쪽 아래를 보면 스프라이트 정보가 뜨는데요, 전 사이즈는 64x64 px이네요.
하나씩 따로 불러와도 되는데 왜 굳이 한 스프라이트로 묶어뒀을까요? 그림을 여러개 만들다 보면 헷갈리기도 하고 관리하기도 귀찮죠. 그리고 움직이거나 공격할 때 필요한 에니메이션도 더 쉽게 작업할 수 있습니다.
1-2. 플레이어 스프라이트 설정
이제 스프라이트 설정을 해 봅시다. 위 사진(혹은 아래 표)과 같이 설정을 해주세요.
Pixels Per Unit: 16 Filter Mode: Pointer (no filter) Max Size: 64
우리가 사용할 스프라이트에 있는 플레이어 그림이 16픽셀이기 때문에 Pixels Per Unit을 16으로 설정해야 합니다. Pixels Per Unit을 16으로 설정하고나면 그림이 약간 흐려지는 것을 볼 수 있는데요, 포토샵 등에서 이미지 사이즈 비율을 줄이면 흐려지는 원리와 비슷합니다. 고퀄리티 스프라이트를 사용하면 상관 없겠지만 우리는 도트 스프라이트를 사용하고 있기 때문에 그림이 흐려지면 안됩니다. 오히려 각 픽셀들이 보여야 하죠. 따라서 Filter Mode를 Pointer으로 설정해 줍시다. 마지막으로 Max Size를 64로 설정하는데요, 이건 아까 설명한데로 스프라이트 전체 크기가 64x64 px이기 때문입니다. 최대 사이즈를 스프라이트 사이즈로 맞춰주면서 필요없는 메모리 소모를 최소화시키는거죠.
기본적인 설정을 끝냈으니 이제 플레이어 그림들을 분리시켜 봅시다. Sprite Mode를 Multiple로 설정한 뒤 "Sprite Editor" 버튼을 클릭해 줍시다.
Sprite Mode: Multiple
그러면 위 사진 처럼 스프라이트 에디터 창이 뜹니다. 드래그를 하면서 직접 분리를 시켜도 되는데요, 우리 같은 경우는 스프라이트에 일정한 패턴이 있기 때문에 간단하게 할 수 있습니다. 상단 바에 있는 "Slice" 메뉴에서 Type를 Grid By Cell Size, 그리고 Pixel Size를 16, 16으로 설정해 줍시다. 그 다음 "Slice" 버튼을 클릭하면 자동으로 분리가 됩니다.
Type: Grid By Cell Size Pixel Size: x: 16, y: 16
위 사진처럼 각 플레이어 그림들을 클릭 했을때 테두리가 생기면 성공적으로 분리가 된겁니다.
프로젝트 패널의 Character 스프라이트를 보면 아까와는 달라져 있을겁니다. 펼쳐보면 Character_0 부터 Character_15까지 있을겁니다. 각각 다른 플레이어 그림인데요, 기본 모습인 Character_0를 Scene 패널로 드래그해줍시다.
1-3. 타일 스프라이트 설정
이번에는 잔디, 물 등의 땅 타일들을 설정해 볼까요? Tiles 스프라이트를 아까 플레이어 스프라이트와 비슷하게 위 사진 처럼 설정해 줍시다.
Sprite Mode: Multiple Pixels Per Unit: 16
Filter Mode: Pointer (no filter) Max Size: 1024
아까 플레이어 스프라이트와 다른 점은 Max Size를 64가 아닌 1024로 설정하는데요, Tiles 스프라이트의 크기가 968x526 px이기 때문에 968px 다음으로 큰 크기인 1024로 설정하면 됩니다. 설정을 다 했다면 "Sprite Editor" 버튼을 클릭해서 플레이어 스프라이트처럼 타일들을 나눠줍시다.
이번에도 각 타일이 16x16 px이기 때문에 아까 플레이어 스프라이트 처럼 하면 되는데요, 한가지 주의할 점이 있습니다. 자세히 보면 타일들 사이에 1x1 px의 빈 공간이 있습니다. 만약 16x16으로 자른다면 나중에 맵을 만들때도 빈 공간이 생기게 되는데요, 그러면 안되죠. 그래서 저 빈 공간을 빼고 타일을 잘라야 하기 때문에 추가로 Padding에 1, 1을 설정해 줍시다. 그 다음 "Slice" 버튼을 클릭해 줍시다. 이번에는 타일 수가 좀 많아서 시간이 좀 걸릴 수도 있습니다.
Type: Grid By Cell Size Pixel Size: x: 16, y: 16 Padding: x:1, y:1
타일을 클릭해 보면 빈 공간을 제외하고 나머지 부분들이 선택 될겁니다.
1-4. 레이어 설정
땅 타일을 드래그해서 Scene 패널으로 드래그하면 플레이어 스프라이트보다 앞에 있어서 플레이어를 가리는걸 볼 수 있습니다. "레이어" 때문에 그런데요, 레이어 순서에 따라서 앞쪽, 혹은 뒷쪽에 스프라이트들이 배치됩니다.
왼쪽 Hierarchy 패널에서 Character_0를 선택한 후 오른쪽 Inspector 패널을 보면 "Sorting Layer"에서 레이어를 설정할 수 있습니다. Default로 설정되어있을건데요, 클릭한 뒤 "Add Sorting Layer"를 클릭해 주세요.
레이어를 만들어 봅시다. Ground 레이어와 Player 레이어를 만들건데요, 아래쪽에 "+" 버튼을 클릭해서 레이어를 만들어 줍시다. 소팅 레이어는 아래쪽에 있을수록 게임상에서 앞에 배치되는데요, 플레이어가 제일 앞에 있어야 하기 때문에 Ground 레이어보다 아래쪽에 있도록 해 줍시다.
다 만들었으면 땅 타일에는 Ground 레이어를, 플레이어 스프라이트에는 Player 레이어를 설정해 줍시다. 그러면 플레이어가 땅보다 위에 있을겁니다. 만약 아직도 플레이어가 땅에 가려서 안보인다면 레이어 순서를 바꿔보세요.
땅 타일이 한개 밖에 없으면 좀 이상하죠. 땅 타일을 몇개 더 깔아봅시다. 먼저 정리하기 쉽게 땅 타일들을 묶어둘 빈 오브젝트 하나를 만들어 봅시다. "Gameobject > Create Empty"를 클릭해서 빈 오브젝트를 만들어 주세요.
빈 오브젝트를 "Ground"라고 이름을 바꾼 후 땅 타일을 Ground 오브젝트로 드래그해서 하위 오브젝트로 만들어 줍시다.
그 다음 땅 타일을 복제해서 여러개 만들어 줍시다. 우클릭한 뒤 "Duplicate"를 클릭해도 되고 아니면 Ctrl+C, Ctrl+V를 사용해서 복사 붙여넣기 해도 됩니다.
복제한 뒤 땅을 잘 배치해 줍시다. 그럼 스프라이트 설정이 끝난답니다. 스프라이트가 준비됐으니 다음 강좌에서는 플레이어가 움직이도록 해 봅시다.
'코딩 이야기 > 유니티' 카테고리의 다른 글
| 유니티 2D RPG 강좌 #4. Blend Tree 애니메이션 (5) | 2018.07.14 |
|---|---|
| 유니티 2D RPG 강좌 #3 - 플레이어 애니메이션 적용 (5) | 2018.07.09 |
| 유니티 2D RPG 강좌 #2 - 플레이어가 움직이도록 해보자! (3) | 2018.07.07 |
