게임의 맵을 그릴 때, 반복적인 작업을 줄이기 위해 쓰는 기능이다. 타일맵을 통해 맵, 플랫폼, 배경 같은 패턴이 있는 스프라이트들을 빠르게 그려낼 수 있다
 |
|---|
| ※ 파이어 엠블렘 1: 타일 시스템은 게임 초창기부터 쓰던 기법 |
개요
맵툴: 맵을 제작하는 데 있어, 보다 쉽게 오브젝트의 배치나 구조를 변경할 수 있는 시스템
프로그래머가 아니더라도 이 맵툴을 이용해 맵을 구성하고, 프로그래머는 제공받은 맵을 기반으로 게임을 만들기도 한다. 반대로 맵 툴은 게임 개발 환경에 따라 여러 기능이나 오브젝트를 자유롭게 다룰 수 있어야 하기 때문에 프로그래머가 직접 구현을 한 뒤 기획자에게 제공하기도 한다. Unity 2D에서는 타일맵이라는 맵툴을 제공한다
타일맵
유니티에서 기본 지원하는 2D 맵툴컴포넌트.타일 에셋들을 통해 레벨을 디자인 할 수 있고, 그리드가 가이드 역할을 한다
Sprite를 사용해 맵을 배치할 수 있고, 바둑판에 그림을 그리듯 맵을 배치할 수 있다
타일맵 생성
프로젝트 창에서 아래와 같이 찾아가서 생성해주면 된다
첫번째를 선택한 경우에는 이렇게 된다. 문명 같은 게임들이 쓰는 6각형으로 그리드가 생성되었다
배치를 해보면 이런식으로 나온다
생성하면 그리드가 부모로 있고, 밑에 타일맵이 생성된다
Cell size: 그리드가 교차하면서 만들어지는 면 유닛 하나를Cell이라고 한다. 그 크기를 정하는 것이다Cell Gap: 셀과 셀 사이의 간격을 정해줄 수 있다
Cell Layout: 여기서도 그리드의 모양을 잡아줄 수 있다
Isometric을 선택하면 마름모 꼴이 된다Cell Swizzle: 타일의 배열을 변경할 수 있다. 좌우반전이나 대칭 등으로 표현 된다
타일맵 팔레트 생성
- 맵을 그리기 위한 스프라이트들을 담을 팔레트인 타일맵 팔레트를 생성해본다
하이라키 창에서 생성된 타일맵을 선택하고, 씬 창에서 Open Tile Palette를 누른다
다운 받은 에셋이 기본적으로 팔레트를 제공해줬다. 오늘은 이것을 쓰지 않고 직접 만드는 방법을 알아볼 것이다
Create New Palette를 누른다. 아무곳에나 적당한 이름으로 팔레트를 만든다
SortMode
에디터 상에서 타일맵 팔레트가 보이는 방법을 선택한다. 게임의 렌더와는 관련이 없다
Default: 카메라 설정에 따라 자동으로 선택.Orthographic카메라일 경우Orthographic이 적용Perspective:3D 뷰처럼Z축이 있는 원근법으로 나타냄. 주로3D 타일맵작업 시 사용Orthographic:2D 뷰. 일반적인2D 작업설정Custom Axis: 원하는 정렬 방향을 수동으로 지정할 수 있다.Sort Axis에서XYZ값을 입력해 정렬 방향을 커스터마이징할 수 있다
기본적으로 2D는 Default, Orthographic을 선택한다
팔레트를 생성 하면, 기본적으로 빈 칸이다
타일셋 생성
- 타일셋을 팔레트에 추가하면 바로 추가가 된다. 하지만 일반적인 스프라이트 들을 타일맵 팔레트에 추가하려고 하면, 타일셋을 만들어주는 작업이 먼저 필요하다
타일셋 생성 폴더를 지정하면 자동으로 타일셋이 생성되고, 팔레트에 불러와 진다
이제 씬 창에서 원하는 타일을 고른 후 찍어보면, 배치가 된다주의점
지금은 에셋이 사이즈가 정확히 그리드에 맞춰져 있지만(16사이즈), 크기가 딱 맞지 않을 경우 직접 맞춰주어야 한다
이렇게 크기가 맞지 않을 경우, 그리드 사이에 빈 칸이 생긴다(24사이즈)
크기가 딱 맞다(16사이즈)
타일맵 팔레트 기능
순서대로 기능들이 무엇인지 간단히 알아보자. 그림판과 동일한 부분이 많다
| 아이콘 | 기능 |
|---|---|
 | 팔레트 상의 타일을 선택 하는 툴. 선택한 타일의 정보는 인스펙터 창에 표기된다. 드래그로도 선택할 수 있다 |
 | 선택한 타일들의 범위 만큼, 브러쉬로 사용 한다. 대량으로 한 번에 찍을 때 유용함 |
 | 브러쉬. 선택한 타일을 씬 창에 배치할 수(그릴 수) 있다 |
 | 선택한 타일를 씬 창에 드래그 한 만큼의 범위에 그릴 수 있다 |
 | 스포이드. 씬 창이든, 팔레트든 선택한 타일을 브러쉬로 지정 |
 | 씬 창에서 지우고 싶은 타일을 클릭&드래그하면 지울 수 있다 |
 | 채우기. 특정 범위를 선택한 타일로 채울 수 있다 |
토글
각각 순서대로 타일 팔레트 창 편집 ON/OFF. 이걸 키면, 팔레트 창의 요소들을 추가하거나, 옮기거나, 삭제할 수 있다.
그리드 ON/OFF.
기즈모 ON/OFF.
팔레트 창 밑에 뜨는 인스펙터 창 ON/OFF
브러쉬
GameObject: 게임 오브젝트를 배치할 수 있는 브러쉬Group Brush: 드래그로 타일들을 선택한 다음, 찍어내듯이 타일을 배치한다Random Brush: 리스트로 원하는 스프라이트들을 추가한 다음, 브러쉬로 사용하면 랜덤으로 나온다Line Brush: 그림판에서 선을 그리듯이, 시작점 부터 원하는 지점까지 선으로 지정된 스프라이트가 그려진다
타일맵 쓰는 이유
타일로 사용하면 Statbatches가 늘어나지 않아서 성능적 이점도 있다- 그냥 스프라이트를 배치하는 식으로 맵 구현도 가능하지만, 성능 상의 차이도 있고 배치하기도 훨씬 쉬우므로
타일맵을 사용하는 것이 좋다
타일맵 콜라이더
- 지금은 콜라이더가 없어서, 캐릭터가 타일맵 위에 있어도 그냥 쭉 떨어진다.
Tilemap오브젝트에 콜라이더를 추가해보자
타일맵에Tilemap Collider 2D를 컴포넌트로 추가한다
- 타일맵에 충돌판정이 생겼다
문제점
- 타일맵 아래에 있는 타일들은 쓸 일도 없는데, 콜라이더가 생기게 된다
컴포지트 콜라이더를Grid오브젝트에 추가하면 아래와 같이 하나의 콜라이더로 다룰 수 있다. 최적화에 도움이 된다
룰 타일
- 규칙을 가진 타일들로 맵을 배치하고자 할 때 쓸 수 있는 기능
프로젝트 창에서 위와 같이 경로를 들어가면Rule Tile을 만들 수 있다
생성하면 이렇게스크립터블 오브젝트형태의 룰 타일이 생성된다
인스펙터 창에서Number of Tiling Rules를 선택해준다. 9개 정도로 일단 해본다
스프라이트들을 끌어다가 하나하나 배치하면된다 - 여기서
GameObject는 프리팹이다. 해당 부분에 타일이 생길 때, 같이 생성할 프리팹을 지정할 수 있다
X표시는 해당 부분에 타일이 없을 경우,화살표는 있을 경우다
맨 왼쪽에 들어갈 타일이니까, 이렇게 하면 된다
완성하고 나면 밑에서 미리보기로 볼 수 있다
완성된 룰타일을 팔레트에 추가한다. 추가하고 나면 위와 같이 인스펙터 창에서 확인할 수 있다
확인하기 어려우니, 아이콘을 추가해줬다
룰 타일을 선택하고, 끌어서 배치하면 적용한 룰대로 타일이 배치된다
랜덤 배치하기
- 같은 조건의 룰 타일인데, 랜덤으로 타일이 나오게 하고 싶다면 아래와 같이 설정하면 된다
랜덤으로 뽑고 싶은 타일들의 리스트를 추가한다. Size로 숫자를 정할 수 있다
Output을 Random으로 고르고, Noise를 설정한다. 여기서 노이즈는 Perlin노이즈다. 최저값과 최대값을 쓰면 랜덤이 되지 않는다.
Suffle은 타일을 회전시키거나 반전 시킨다. 랜덤 노이즈 값에 따라서 회전하기도 하고 반전하기도 한다
위의 설정대로 했을 때의 결과물
애니메이션 룰 타일
Animated Tile. 애니메이션이 적용된 타일이다.프로젝트 창에서 다음의 경로를 통해 생성 가능
이렇게스프라이트들을 추가한다. 만들어진룰 타일은팔레트에 추가해서 사용할 수 있다. 애니메이션의 스피드 및 여러 설정들을 해줄 수 있다
그리드에서 살짝 벗어나 있다. 오프셋을 설정해준다
그리드 안쪽에 잘 배치되었다. 이제 씬 창에 배치를 해보자
애니메이션이 적용된 타일이 배치된다
타일맵 추가
배경도 타일맵으로 배치하고 싶은데, 같은 방식으로 타일맵을 그리면 콜라이더가 적용된다. 이를 막기위해 타일맵을 추가로 생성해보자
타일맵을 추가하고, BackGround라고 이름을 지었다
타일 팔레트에서 새로BackGround가 생겼다. 이는 같은Grid를 공유하기 때문이다
BackGround에는 콜라이더를 추가하지 않았기 때문에, 통과된다
Order Layer
스프라이트들의 우선 순위를 정해준다. 높을수록, 앞에 나온다
타일맵은 여기에 있다. 배경은 뒤에 있는 것이므로 낮은 숫자를 넣어주자. 음수도 가능하다
플레이어 스프라이트의 Order Layer를 -1로 설정했을 경우. 우선순위가 최하위가 되어서 맨 뒤로 가게 되었다
2D Pixel Perfect
- 이렇게 게임 화면에 줄이 가 있는 것을 볼 수 있다. 픽셀 퍼펙트 카메라로 해당 문제를 해결할 수 있다.
픽셀 퍼펙트 패키지에 들어있는픽셀 퍼펙트 카메라를 이용해본다
메인 카메라에 해당 컴포넌트를 추가한다
한 유닛 당 들어갈 픽셀의 숫자를Assets Pixes Per Unit에 넣어준다
Run In Edit Mode를 누르면 실행 시 나오게 될 화면을 미리게임 창에서 볼 수 있다
배경 추가하기
-
캔버스를 추가해서
이미지 UI를 추가한다 -
이미지가
캔버스를 꽉 채우게 키운다
-
ScreenSpace -Caemera로 렌더모드를 변경 -
Sort Order를 설정해서 맨 뒤로 가게 한다 -
이미지에 배경으로 쓸 이미지를 넣는다
배경을 간단하게 구현할 수 있다
도전과제
Parallax scrolling
- 게임의 뒷 배경을 더욱 입체감 있게 표현하는 방법이다
참고
- 여러장으로 구성된 배경 이미지를 카메라 위치에 따라, 움직이는 속도에 차이를 줘서 표현한다
