[Unity 2D Basic] 2D Tilemap Editor

01 Tilemap 개요

✅ Tilemap 이란?

: 2D 게임을 개발할 때 타일 형태의 리소스를 배치해 월드를 표현하는 방법

 

▶ 유니티에서는 아래와 같이 Tilemap 에디터를 제공함

 

✅ 유니티에서 제공하는 Tilemap의 구성 요소

(1) Tile Palette
- Tilemap 오브젝트에 배치할 Tile Asset 들을 등록해두는 저장소
- 팔레트에 있는 Tile Asset 을 여러 속성에 따라 배치하거나 삭제할 수 있다
- ex) 현실에서 그림을 그리기 위해 물감을 짜두는 팔레트와 동일한 기능

(2) Tile Asset
- 맵에 배치할 수 있는 하나의 타일 (Sprite, Color, Collider Type 과 같은 속성을 설정 가능
- ex) 팔레트에 짜두는 물감

(3) Grid 오브젝트
- 자식으로 배치되는 Tilemap 오브젝트들을 관리하는 역할
- Cell Layout, Cell Swizzle 정보를 이용해 배치되는 맵의 방식을 Rectangle, Hexagon, Isometric, Isometric Z As Y 등으로 설정할 수 있다

(4) Tilemap 오브젝트
- Tile Asset 을 배치하는 공간으로 실제 게임에 보여지는 타일 형태의 게임 월드
- Grid 오브젝트의 자식으로 여러 개의 Tilemap 오브젝트 등록 가능 (Layer 구분
- ex) 그림을 그리는 도화지

 

 

02 Tile Palette

▶ Tile Palette View는 상단 메뉴 부분에 Window → 2D → Tile Palette 부분에서 설정할 수 있다.

 

✅ 새로운 팔레트 생성 방법

- Name : 팔레트의 이름

- Grid : 타일 배치 방식 (→ Rectangle, Hexagon, Isometric, Isometric Z As Y)

- Cell Size : 셀의 크기 (→ Automatic, Manual)

 

여기서 create 버튼을 클릭하면 타일 팔레트를 저장하는 위치가 나오는데, 이때 프로젝트 내부에서 사용되는 Tile Palette, Tile Asset 등의 파일들은 외부에 저장하지 않도록 유의해야 한다.

 

그럼 아래와 같이 플랫폼이라는 이름의 팔레트가 하나 생성된 것을 확인할 수 있다.

 

 

03 Tile Asset

▶ Tile Asset은 Project View → + 버튼 → 2D → Tiles 에서 생성할 수 있다.

 

✅ Tile Asset

- Sprite : 현재 Tile Asset이 보여지는 이미지- Color : 이미지의 색상- Collider Type : 충돌 속성 (None, Sprite, Grid)

 

다음과 같이 Tile Asset에 대한 생성과 설정이 완료되었다면, Tile Asset들을 Tile Palette에 등록해야 한다.

 

위와 같이 Tile 팔레트에 등록해줄 수 있다.

 

 

04 Tilemap 오브젝트

다음으로 실제 타일을 배치해보자. 배치를 위해 GameObject - 2D Object - Tilemap 부분에서 클릭 후 생성할 수 있다.

 

✅ Grid GameObject란?

: 현재 자식으로 있는 Tilemap 오브젝트들을 관리
→ 여러 개의 Tilemap을 자식으로 가지고 관리할 수 있다

 

✅ Grid Component

- Cell Size : Grid 내에 각 셀의 크기
- Cell Gap : Grid 내의 각 셀 사이의 간격
- Cell Layout : 셀의 나열 방식
- Cell Swizzle : 축의 나열 변경
▶ Swizzle이 xyz일 때 (0, 1, 1)이라면 Swizzle을 yxz로 바꾸면 (1, 0, 1)이 된다

 

✅ Tilemap Component
- 현재 Tilemap 오브젝트에 대한 기본 설정
→ Tilemap에 표현되는 모든 타일의 색, 각 타일의 중심점, 방향 등을 설정
- Scene View에서 현재 타일맵 오브젝트에 표현될 타일들을 그릴 수 있다

 

✅ Tilemap Renderer Component
: 현재 Tilemap 오브젝트가 화면에 그려지는 방법에 대해 설정
→ Material, 정렬 기준, 정렬 순서 등

 

📌 Tilemap 종류에 따른 Grid 컴포넌트 변수 옵션
(1) Tilemap
- Cell Layout : Rectangle
- Cell Swizzle : XYZ

(2) Hexagonal Point Top Tilemap
- Cell Layout : Hexagon
- Cell Swizzle : XYZ

(3) Hexagonal Flat Top Tilemap
- Cell Layout : Hexagon
- Cell Swizzle : YXZ

(4) Isometric Tilemap
- Cell Layout : Isometric
- Cell Swizzle : YXZ

(5) Isometric Z As Y Tilemap
- Cell Layout : Isometric Z As Y
- Cell Swizzle : YXZ

 

 

05 Tilemap에 Tile Asset 배치

📌 Tile Palette의 기능

(1) Select an area of the grid (단축키 : S)
: 팔레트나 Tilemap 오브젝트 (Scene View)에 있는 타일을 선택 (하나 또는 복수 선택 가능)→ 선택한 타일의 정보는 Inspector View에 출력되며, 정보를 수정할 수 있다.

 

(2) Move selection with active brush (단축키 : M)

: 팔레트나 Tilemap 오브젝트 (Scene View)에 있는 타일을 이동→ “Edit” 버튼을 누르면 Palette 에 등록되어 있는 Tile Asset 을 설정, 삭제할 수 있다

 

(3) Paint with active brush (단축키 : B)
: 팔레트에서 선택한 타일을 Tilemap 오브젝트 (Scene View)에 배치 (마우스 클릭 위치)

 

(4) Paint a filled box with active brush (단축키 : U)
: 팔레트에서 선택한 타일을 Tilemap 오브젝트 (Scene View)에 배치 (사각형 범위)
→ 마우스를 클릭한 위치가 시작지점이 되고, 마우스 클릭을 해제한 위치가 종료지점이 되어 사각형의 범위가 생성된다.
→ Shift를 누른 상태로 드래그를 하면 영역 내의 타일들이 삭제된다.

 

(5) Pick or marquee select new brush (단축키 : I)
: 팔레트나 Tilemap 오브젝트 (Scene View)에 있는 타일을 복제해서 선택

 

(6) Erase with active brush (단축키 : D)
: 팔레트나 Tilemap 오브젝트 (Scene View)에 있는 타일을 삭제

 

(7) Flood fill with active brush (단축키 : G)
: 팔레트에서 선택한 타일을 Tilemap 오브젝트 (Scene View)에 배치 (채우기)
▶ 비어있는 범위에 타일을 채우거나 연결되는 타일들을 동시에 바꿀 때 사용하며 이미 타일이 존재하는 곳에 사용할 경우 연결되어 있는 동일한 타일들을 모두 교체해준다.

 

 

06 Tilemap 충돌 처리

Tilemap 단위로 충돌처리를 할 수 있으므로 하나의 Grid 오브젝트가 여러 개의 Tilemap 오브젝트를 관리하게 되고, Tilemap 오브젝트 여러개를 하나의 게임 월드로 사용하게 된다.

▶ Tilemap의 충돌 처리는 Tilemap Collider 2D 컴포넌트를 사용하여 만들 수 있다.

그럼 위와 같이 충돌되는 범위가 초록색 실선으로 표시된 것을 확인할 수 있다.

 

하지만 위와 같이 모든 범위가 실선으로 표시된 것은 불필요한 부분까지 충돌 처리가 된 것임을 확인할 수 있는데, 이는 Tile Asset을 선택하고 Collider Type을 Grid로 변경해주면 아래 이미지와 같이 네모난 모양으로 충돌처리가 되는 것을 확인할 수 있다.(Collider Type이 Sprite면 위 실습과 같이 생김새 대로 실선이 표시된다)

 

다음으로 충돌 처리의 최적화를 위해 Composite Collider 2D를 사용해보자.

Composite Collider 2D를 추가했다면, Tilemap Collider에 'Used By Composite'를 체크해주고, Rigidbody 2D 부분에 Body Type을 Static으로 설정해줄 수 있다.

 

설정이 완료되었다면, 아래와 같이 붙어있는 타일들이 하나의 범위로 설정되어 있는 것을 확인할 수 있다.

 

충돌 처리 확인을 위해 오브젝트를 만들어서 실행해보자.2D 오브젝트를 하나 생성하고, 충돌이 가능하도록 Capsule Collider 2D를 설정하고 중력을 받을 수 있도록 Rigidbody 2D를 추가할 수 있다.

 

이후 게임을 실행하니 아래와 같이 버섯 모양의 오브젝트가 타일에 닿자 충돌하여 떨어지는 모습을 확인할 수 있다.

 

 

 

출처 : 따라하면서 배우는 고박사의 유니티 기초(https://inf.run/sgcy)