Unity2D 타일맵 (Tilemap)

---

Tilemap 시스템의 구성요소

Tilemap 만들기

Tilemap GameObject 만들기

Tile Palette 설정

타일 그리기

타일에 충돌설정 추가하기

타일맵과 오브젝트의 스프라이트 순서 지정

---

타일맵은 유니티에서 제공해주는 기능으로, 타일 기반의 환경을 쉽게 만들 수 있게 해준다.

타일맵 시스템을 사용하여 작은 스프라이트들로 광대한 게임 환경을 구성할 수 있다.

Tilemap 시스템의 구성요소

이름	종류	기능
Tilemap	GameObject	Grid의 자식으로 타일맵 구조를 구성하는데 사용한다.
Grid	GameObject	모든 Tilemap이 위치하는 기본 격자이다.
Tilemap Renderer	Component	Tilemap의 모양을 실제로 그리는 역할을 한다.
Tilemap Collider 2D	Component	타일맵과 상호작용을 할 수 있도록 기능한다.
Tile Assets	Asset	개별 타일의 모양과 동작을 정의한다.

---

Tilemap 만들기

Tilemap GameObject 만들기

오브젝트 추가 → 2D Object → Tilemap → Rectangular

Tilemap 오브젝트를 생성하면 씬 뷰의 모습이 바뀐다.

Tile Palette 설정

[타일 팔레트 열기] Window → 2D → Tile Palette

보통은 Inspector가 있는 창에 같이 넣어놓는다고 한다.

팔레트 창을 켜보면 현재는 유효한 팔레트가 없기 때문에 뜨는 것이 없다.

따라서 이러한 팔레트를 직접 만들어보자.

[팔레트 새로 만들기] No Valid Palette 클릭→ Create New Palette → 이름 짓고 Create

팔레트를 어디에 저장할건지 상자가 뜨게 되는데, 경로 역시 지정해주자.

나는 Artwork/Level 폴더를 만들어서 저장해주었다.

이제 타일을 넣어줘야 하는데, 나는 해당 에셋을 사용하였다.

16x16 DungeonTileset II

A free tileset + animated characters + weapons + others.

https://0x72.itch.io/dungeontileset-ii

해당 에셋 기준으로

floor_1 부터 floor_8까지를 사용해보자.

이걸 전부 Tile Palette의 공간에 넣어주자.

역시 타일들을 생성할 폴더의 위치를 물어보는 상자가 뜬다.

나는 Artwork/Level 안에 또 Tiles라는 폴더를 만들어 저장하였다.

저장까지 마치고 나면, 해당 스프라이트로 타일이 생성된 것을 Project 탭에서 파일로 확인할 수도 있고, Tile Palette 상에서도 확인할 수 있다.

같은 방법으로 wall 카테고리의 스프라이트들(wall_banner_blue ~ wall_top_right)을 Tile Palette에 전부 추가시켜주자.

이제 타일맵 설정은 완료이다.

이제 타일을 그려줄 차례이다.

타일 그리기

이제 타일 팔레트의 타일들 중 하나를 골라서 씬에 배치만 하면 된다.

잘못 배치해서 없애고 싶으면 Shift + 클릭을 하면 된다.

꾸민 타일들은 씬뷰와 게임뷰에서 바로 확인이 가능하다.

지금까지의 방법을 응용하여

Tilemap 오브젝트를 두 개 더 만들자.

이름은 BackDesign과 ForeDesign으로 짓겠다.

그리고 타일 팔레트를 이용하여 다음과 같이 배치해주자.

BackDesign

ForeDesign

참고로 저렇게 특정 Tilemap 오브젝트의 타일들만 따로 보는 방법을 궁금해 할 수 있다.

씬뷰 오른쪽 아래 Tilemap Focus를 Tilemap으로 바꿔주면 해당 Tilemap 오브젝트를 선택했을 때 그 오브젝트의 타일들만 보이게 된다.

타일에 충돌설정 추가하기

이렇게 만든 타일 중 벽들은 캐릭터가 통과하면 안되기 때문에, 일부 타일은 충돌과 관련해서 기능을 구현해줘야 한다.

Tilemap 오브젝트를 한 개 더 생성해서 (이름은 Collision으로) 다음과 같이 그려주자.

기존에 그렸던 벽 위에 겹쳐서 그려주는 것이다.

이제 Collision Tilemap에 Tilemap Collider 2D라는 컴포넌트를 추가해주자.

[Tilemap Collider 2D 추가] Inspector에서 Add Component 클릭 → Tilemap Collider 2D

이제 캐릭터가 가까이 가면 벽에 막힐 것이다.

참고로 충돌 구현을 위해서는 플레이어 캐릭터 오브젝트에 Rigidbody 2D와 Box Collider가 있어야 하니 잊지말고 추가해주자.

벽에 잘 막히는 모습.

타일맵과 오브젝트의 스프라이트 순서 지정

그런데 아직 문제가 하나 있다.

앞쪽의 벽은 물리적으로 봤을 때 캐릭터보다 앞에 있기 때문에 캐릭터가 가려져야 하는데, 일반 바닥 타일처럼 위로 올라가버리는 모습을 확인할 수 있다.

충돌 때문에막히긴 하는데, 그냥 벽 위로 올라가버린다…..

이를 위해 Sprite의 순서를 지정해줘야 한다.

캐릭터 오브젝트는 Sprite Renderer 컴포넌트에서, 타일맵 오브젝트는 Tilemap Renderer 컴포넌트에서 해당 설정을 바꿔줄 수 있다.

[캐릭터의 Order in Layer 설정] 캐릭터 오브젝트의 Inspector → Sprite Renderer → Order in Layer를 2로 수정

[벽 앞부분의 Order in Layer 설정] ForeDesign 오브젝트의 Inspector → Tilemap Renderer → Order in Layer를 4로 수정

Order in Layer의 숫자는 정해진게 있는 것은 아니다.

더 앞에 그려져야만 하는 스프라이트의 Order in Layer 값을 높게만 해주면 되는 것이다.

스프라이트 순서를 잘 지정해준 모습.

Uploaded by N2T