개발/Unity

[Unity] 아이소메트릭 타일맵 공부 - (2) 레이어 따라 배치하기

센솔 2020. 7. 20. 15:13

이전 강좌에서는 타일 팔레트에서 평면적인 타일을 배치하는 방법을 배웠다.

Flat tile

이번 강좌에서는 입체적인 타일을 배치하는 방법을 다뤄보고자 한다.

Tile example

 

지난번 강좌에 이어서 진행한다.

우선 가장 바닥이 될 타일을 10x10 크기로 배치해주었다. 그런데 이제 이 위에 2층, 3층의 타일을 얹고 싶다고 하자.

단순히 큐브 타일을 드래그하는 것만으로는 제대로 배치가 되지 않을 것이다.

 

타일의 반쯤 정도가 아래로 묻혀버린다

2층, 3층을 제대로 표현하기 위해서는 층에 따라 타일이 배치될 높이를 설정해주어야 한다.

 

기존 타일을 복사해서 각각 1st, 2nd, 3rd 세 개의 타일 오브젝트를 새로 만들어주었다.

이 세 개의 오브젝트는 Tile Anchor 값을 각각 다르게 설정해줌으로써 높이를 달리하게 할 것이다.

 

'어떻게 높이를 달리할 것이냐'고 묻는다면, Z as Y Isometric Tilemap의 특성을 이해할 필요가 있다.

위 그림과 같이, Z as Y 타일맵에서 Z축은 타일의 높이를 결정한다.

즉, XYZ 좌표계에서 Z축을 간단히 변경하는 것만으로 타일의 높이를 조절할 수 있는 것이다.

 

2nd 오브젝트의 Tile Anchor값 수정
3rd 오브젝트의 Tile Anchor값 수정

타일을 배치하고 Z값을 이리저리 수정해보면 적당한 값을 찾을 수 있을 것이다.

더보기

[지나가는 팁]

글쓴이는 처음부터 일러스트레이터에서 높이와 변의 비율을 4:20, 즉 1:5 비율로 설정해두었다.

Tile Anchor 값을 0.2 로 설정한 이유이다. (0.2:1 비율이 1:5 이므로)

디자이너에게 그래픽 리소스를 요청할 때 타일 사이즈와 비율을 처음부터 협의해두면 깔끔하게 작업할 수 있다.

 

그리고 잊지말고 Order In Layer 값까지 수정해주자.

층이 높을수록 더 높은 Layer값을 주면 된다.

 

이제 2nd 타일맵을 선택하고 씬뷰에 타일을 그려보면..!

위 그림처럼 제대로 2층이 그려지는 모습을 확인할 수 있다.

 

 

 

이제 마지막으로 할 일이 하나 더 남았다. 

 

아직까지는 단순히 바닥 타일을 까는 정도라 문제가 보이진 않지만, 나중에 타일 위에 여러 장애물같은 오브젝트를 추가하다보면

 

좌측 그림처럼 오브젝트가 부자연스럽게 렌더링되는 경우가 있을 수 있다.

 

Z(높이)값이 큰 타일부터 먼저 렌더링된 다음, 값이 낮은 타일 순서로 렌더링이 되어야 자연스럽게 보일 것이다.

(쉽게말해, 위에서부터 아래로 타일들이 포개지듯이 그려져야 자연스럽게 보인다는 이야기이다)

 

이를 위해서는 프로젝트 세팅에서 Transparancy Sort Axis 값을 수정해주면 된다.

Edit - Project Setting - Graphics으로 들어간 다음, 사진과 같이 Custom Axis모드로 설정하고 Axis 값은 유니티 공식 문서에서 권장하는 값인 (0, 1, -0.26)으로 설정해주자. 

이렇게까지 설정을 마쳤다면 끝이다.

 

이로써 가장 기본적인 타일 배치와, 레이어에 따라 층 단위로 배치하는 방법에 대해 배워봤다.

시간이 된다면 이후에 타일 클릭/설치 방법에 대해서도 다뤄보겠다.

 

https://docs.unity3d.com/Manual/Tilemap-Isometric-CreateIso.html

 

Unity - Manual: Creating an Isometric Tilemap

Importing and preparing Sprites Creating a Tile Palette for an Isometric Tilemap Creating an Isometric Tilemap When creating an Isometric Tilemap, there are additional steps to take compared to creating a regular Tilemap. To create an Isometric Tilemap, go

docs.unity3d.com