[Unity] 2.5D 아이소메트릭 타일맵 그리기 [Isometric 2.5D TileMap]

프로젝트를 진행하면서 2.5D 아이소메트릭 타일맵에 건물을 배치하는 시뮬레이션을 만들었는데
처음에 아이소메트릭에 대해 어려운 것이 많아 정리하기 위해 작성하였습니다.

 

타일맵 하나하나을 드래그하거나 복제하여 설치해야 하는 줄 알았는데,

타일 팔레트라는 기능을 찾게 되어 이에 대해 알아보겠습니다.

 

아이소메트릭 타일맵 만들기 - Unity 매뉴얼

 

---

아이소메트릭 초기 세팅 [Isometric Tilemap]

 

Main Camera [Inspector] - [Projection] - [Orthographic]

Main Camera의 Projection을 Orthographic으로 바꿔줍니다. 

저같은 경우에는 프로젝트 생성을 3D로 생성하고 2D 패키지를 임포트 하여 진행했는데,

이 설정을 하지않아서 좌표를 받을 때 좌표를 받지 못하는 오류가 있었습니다.

 

 

[Window] - [2D] - [Tile Palette]

상단의 [Window] - [2D] - [Tile Palette]를 선택해 줍니다.

 

 

Create New Palette

 

빈 팔레트 탭이 나오는데, 상단에서 Create New Palette를 하여 종류를 지정해줘야 합니다.
(이미 만들어진 게 있어서 Iso_ZasY라는 팔레트가 있음)

 

Name은 자유롭게 이름을 정하고, Grid의 4가지 종류가 있는데
Rectangle은 일반적인 2D 방식의 팔레트이고 Hexagon은 육각형 모양의 타일입니다.

여기서 사용하는 방식은 아이소메트릭(Isometric)인데, 종류가 두 가지가 있습니다.

3D에서는 가까이 있거나 멀리 있는 오브젝트를 Z 축으로 판단합니다.
이를 아이소메트릭에서는 Y축으로 판단하여 렌더링하기 때문에 Isometric Z As Y를 고르겠습니다.
Isometric과 차이는 정확히는 모르겠습니다.

 

만들게 되면 팔레트대신 Drag Tile, Sprite or Sprite Texture assets here.이라는 문구가 떠있습니다.

여기서 이미지를 드래그 앤 드롭하거나 만들어진 타일을 드래그 앤 드롭해주어야 합니다.

이미지를 타일로 사용하려면 해당 이미지의 인스펙터창에서 Texture Type을 Sprite (2D and UI)로 바꿔줍니다.

그러면 타일을 저장할 위치를 지정한 후, 저장해 주면 됩니다.

저는 정리하기 위해 에셋 폴더에서 08.Tiles - TileTest에 저장했습니다.

 

 

사용할 타일이 팔레트에 올라갔습니다.

여기서 그대로 사용해도 되지만 타일맵 크기에 맞게 타일의 픽셀을 조절해 보겠습니다.

오른쪽 위에 Sprite항목을 한번 클릭합니다.

 

타일 픽셀 조절하기 [Tile Pixel 조절]

Pixels Per Unit이 100으로 되어있는데 해당 텍스쳐의 하단 미리보기 이미지를 보면 132 x 101 (NPOT)이라는 부분에서

가로 부분인 132만 참고하여 Pixels Per Unit에 100 대신 132를 넣어줍니다.

그리고 Filter Mode라는 것이 있는데, Point를 하게 되면 따로 필터를 처리하지 않아 타일맵을 팔레트로 생성했을 때
타일마다 외곽선에 선이 보여 불편할 수 있는데 이점을 매끄럽게 고쳐줍니다. (이 부분은 직접 적용해 보는 것이 낫습니다.)

마지막에 하단에 Apply를 해줍니다.

 

이제 팔레트의 격자에 맞게 해당 타일이 그려진 것을 볼 수 있습니다. 

---

Tilemap 그리기

하이라키 뷰에서 우클릭 - [2D Object] - [Tilemap] - [Isometric Z as Y]를 선택하여 타일맵 그리드를 생성합니다.

 

Tile Palette의 주황색 네모 안에 붓모양의 브러시와 드래그를 한듯한 박스모양의 Filled Box가 있습니다

 

브러시(B)를 선택하고 해당 타일을 클릭한 뒤, 씬 뷰에 마우스 커서를 이동시키면 마우스 클릭다운을 하여 그리듯이 해당 타일을 그릴 수 있습니다.

Filled Box(U)를 선택하면 해당 팔레트에서 드래그를 할 수 있는데 원하는 영역만큼 드래그를 한 후,

씬 뷰에서 드래그를 하면 드래그한 영역만큼 타일이 생성될 것입니다.

 

잘 못 생성한 타일이 있다면 Shift를 누르면서 클릭하거나 드래그하면 삭제됩니다.

 

---

생성된 타일맵

위의 방식을 적용하여 프로젝트에 사용된 타일맵을 생성해 보았습니다.
상단의 건물은 타일맵이기 때문에 오브젝트는 아닙니다.

 

 

다음에는 해당 아이소메트릭 타일맵에 건물을 배치하는 스크립트와 과정을 정리하겠습니다.
잘 못된 점이 있으면 알려주시면 저도 배움에 큰 도움이 됩니다. 감사합니다.