[유니티 기초] 2D Tilemap - Editor

이 글은 인프런 [따라하면서 배우는 고박사의 유니티 기초] 강의를 수강하고 정리한 글입니다.

[지금 무료] 따라하면서 배우는 고박사의 유니티 기초 | 고박사 - 인프런

---

Tilemap 개요

Tilemap은 타일 형태의 리소스를 배치해 게임 월드를 표현하는 방법으로 유니티에서는 Tilemap을 쉽게 제작하기 위해 Tilemap editor을 제공하고 있다. 

유니티에서 제공하는 Tilemap editor은 Tile palette, Tile Asset, Grid 게임 오브젝트, Tilemap 게임 오브젝트가 있다. 

• Tile palette

Tilemap 오브젝트에 배치할 Tile Asset들을 등록하는 저장소로 등록된 Tile Asset을 여러 속성에 따라 게임 월드에 배치하거나 삭제할 수 있다. 

• Tile Asset

map에 배치할 수 있는 하나의 타일로 팔레트에 짜두는 물감과 같은 역할이다. 

• Grid Object

자식으로 배치되는 Tilemap 오브젝트들을 관리하는 역할로 cell layout, cell swizzle 정보를 이용해 배치되는 맵의 방식을 Rectangle, Hexagon, Isometric, Isometric Z As Y 등으로 설정할 수 있다.

• Tilemap Object

Tile Asset을 배치하는 공간으로 실제 게임에 보여지는 타일 형태의 케임 월드로 Grid object의 자식으로 여러 개의 Tilemap 오브젝트들의 등록이 가능하다. 레이어를 구분해서 진행

 

---

Tile Palette

Tilemap palette 생성 편집은 Tile palette view에서 할 수 있으며, window > 2D > Tile Palette 를 통해서 메뉴를 열 수 있다.

새로운 Tile palette를 생성할 때 

• name : 팔레트의 이름
• Grid : 타일 배치 방식으로 Rectangle, Hexagon, Isometirc, Isometric Z As Y
• Cell size : 셀의 크기로 Automatic, Manual

항목들을 선택하고 Tile palette를 생성하게 되면 저장하는 위치를 설정하게 되는데 현재 프로젝트 내부에서 사용하는 Tile palette, Tile Asset 등과 같은 파일은 프로젝트 외부에 저장하지 않도록 유의해야한다. 

---

Tile Asset

Tile Asset은 유니티 2022.3.22f1 버전 기준으로 Project View > "+" > 2D > Tiles 로 생성할 수 있으며, assets에 있는 tile들을 Tile palette에 드래그 드롭으로 생성할 수 있다. Tile palette와 동일하게 프로젝트 외부에 저장하지 않도록 유의해야한다. 

 

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

Tile Asset 생성이 완료되었다면, Tile palette에 등록해야 한다. 

---

Tilemap 오브젝트

Tile Asset 배치를 위해 GameObject > 2D Object > Tilemap 생성한다. 생성하면 Grid game object와 자식으로 tilemap object가 배치된 것을 확인할 수 있다. 

Grid Game Object는 현재 자식으로 있는 타일맵 게임오브젝트들을 관리하는 역할을 하며 여러 개의 타일 맵을 자식으로 가지고 관리할 수 있다. 

타일 맵 오브젝트 경우에 게임에서 충돌이 가능하고 실제 배치되는 플랫폼 타일, 배경으로 사용되는 타일, 아이템 타일 등과 같이 여러개로 나누어 제작하게 된다. 

Tilemap object에는 Tilemap component와 Tilemap Renderer conponent가 있다.

 

• Tilemap component

현재 타일맵 오브젝트에 대한 기본 설정으로 모든 타일의 색, 각 타일의 중심점, 방향 등을 설정하며, scene view에서 현재 타일맵 오브젝트에 표현될 타일들을 그릴 수 있다. 

• Tilemap Renderer conponent

현재 타일맵 오브젝트가 화면에 그려지는 방법에 대해 설정할 수 있다. (meterial, 정렬 기준, 정렬 순서 등)

Tilemap의 생김새는 scene view를 통해서 확인할 수 있으며, tilemap의 생김새를 결정하는 것은 grid game object에 는 grid component이다. 셀 사이즈나 레이아웃, 스위츠 정보를 이용해서 생김새를 바꿀 수 있다. 

tilemap 기본 Rectangular 이 아닌 다른 4가지로 선택이 가능하며 Grid를 선택한 상태로 타일맵을 생성하면 생성하는 타일맵의 정보로 Grid 정보가 바뀌기 때문에 타일맵을 선택하지 않고 생성해야한다. 

 

나머지 Tilemap의 Grid 속성값은 다음과 같다.

(좌) Hexagonal Point Top tilemap   (우) Hexagonal Flat Top tilemap  

(좌) Isometric Tilemap (우)  Isometric Z As Y Tilemap 

Isometric Z As Y Tilemap은 기존의 Isometric과 동일하게 보여지지만 높이를 설정할 때 유용하게 활용할 수 있다. 

---

Tilemap 에 Tile Asset 배치

위에 도구들은 차례롤 왼쪽부터 다음과 같다.

 

Select an area of Grid (단축키:S)

Tile palette 나 Tilemap 오브젝트(scene view)에 있는 타일을 선택하는 기능

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

Tile palette 나 Tilemap 오브젝트(scene view)에 있는 선택된 타일을 이동하는 기능 (* Tile palette 내부에 있는 Tile Asset을 수정할 때는 edit 버튼을 누르고 한다.)

 

Paint with active brush(단축키:B)

Tile palette 에 선택한 타일을 Tilemap 오브젝트(scene view)에 배치하는 기능

edit를 해제한 상태로 브러쉬를 눌러 오브젝트를 선택한 후 마우스로 배치하고자하는 위치에 클릭하면 배치된다. 

 

Paint a filled box with active brush(단축키:U)

Tile palette에서 선택한 타일을 Tilemap 오브젝트(scene view)에 배치하는 기능 

사각형 형태의 드래그한 범위만틈 배치하는 기능으로 shift를 누르고 사용하는 경우 범위에 존재하는 모든 타일을 삭제하는 기능이 된다. 

 

Pick or marquess select new brush (단축키:I)

Tile palette 나 Tilemap 오브젝트(scene view)에 있는 타일을 복제해서 선택하는 기능

 

Erase with active brush (단축키:D)

Tile palette 나 Tilemap 오브젝트(scene view)에 있는 타일을 삭제하는 기능

 

Flood fill with active brush (단축키:G)

Tile palette에서 선택한 타일을 Tilemap 오브젝트(scene view)에 배치하는 기능으로 빈공간에 사용하면 빈공간을 채운다. 

이미 타일이 존재하는 곳에는 사용하면 연결되어 있는 동일한 타일들을 교체하는 기능을 한다. 

이렇게 게임 월드를 만들 수 있다.

---

Tilemap 충돌 처리

타일 맵으로 생성된 게임 월드의 경우 타일맵 오브젝트 단위로 충돌처리 설정이 가능하다. 타일맵 단위로 충돌 처리를 할 수 있기 때문에 하나의 gird 오브젝트가 여러 개의 타일맵 오브젝트를 관리하게 되고 타일뱁 오브젝트를 여러개를 하나의 게임 월드로 사용하게 된다. 

Tilemap Collider 2D 컴포넌트는 타일맵의 충돌 처리를 담당하는 컴포넌트로 타일맵 오브젝트의 충돌 처리를 설정할 수 있다. tilemap collider 2D 컴포넌트를 추가하면 초록색의 실선으로 충돌 범위를 표시한다.

 

Tile Asset을 선택하여 collider type에서 sprite는 생김새대로 충돌처리가 되는 것이고, grid는 사각형 형태로 충돌처리가 되는 것이다. 따라서 블록들은 모두 grid 로 설정하고 파이프는 sprite로 설정해주었다. 

 

충돌 처리를 최적화하기 위해 composite collider 2D 컴포넌트를 추가한다. 

tilemap collider 2D 컴포넌트에 used by composite를 체크해주고 Rigidbody 2D의 body type을 static으로 설정해주면 충돌범위가 하나의 충돌 범위로 설정된다. 

 

충돌처리가 잘 적용되었는지 확인을 위해 오브젝트를 하나 생성해서 capsule collider 2D 컴포넌트와 rigidbody 2D 컴포넌트를 추가해주었다. 충돌처리가 잘 되는 것을 확인할 수 있다.