타일맵을 사용한 아이소메트릭 2D 환경

Unity 2018.3 릴리스에서는 2018.2 릴리스에 추가된 헥사곤 타일맵 지원에 이어 아이소메트릭 타일맵 지원을 도입했습니다. 새로운 타일맵 기능은 디아블로와 폴아웃 시리즈의 첫 번째 작품, 문명, 에이지 오브 엠파이어 등 많은 고전 게임에서 볼 수 있는 아이소메트릭 및 육각형 그리드 레이아웃을 기반으로 2D 환경을 빠르고 고성능으로 제작할 수 있는 방법을 제공합니다. 두 기능 모두 Unity 2017.2에 도입된 기존 타일맵 시스템을 기반으로 하며, 현재도 쉽게 사용할 수 있습니다. 또한 에디터에 기본적으로 통합되어 있습니다. 향후 Unity 릴리스에서는 패키지 관리자로 이동할 수 있습니다. 소개된 기법을 따라 해보고 실험해보고 싶다면 애니메이션 캐릭터와 여러 환경 타일셋이 포함된 아이소메트릭 스타터 키트 프로젝트를 미리 구성하여 무료로 다운로드할 수 있습니다.

무한한 창작 가능성을 제공하는 더 많은 2D 환경과 툴 살펴보기

타일맵 작업을 시작하기 전에 프로젝트를 올바르게 설정하는 것이 중요합니다. 아이소메트릭 타일맵은 2차원 스프라이트와 함께 작동하며, 하향식 아이소메트릭 뷰의 착각을 일으키기 위해 올바른 렌더러 정렬에 의존합니다. 뷰어에서 멀리 떨어져 있는 타일을 먼저 칠하고 가까운 타일을 그 위에 칠하도록 해야 합니다.

2D 오브젝트가 화면에 그려지는 순서를 커스터마이징하려면 Unity의 커스텀 축 정렬 기능을 사용하면 됩니다. 이 설정은 카메라별로 정의하거나(현재 스크립터블 렌더 파이프라인(LWRP 및 HDRP 포함)에서 기본으로 사용하는 방식) 프로젝트 수준에서 전역적으로 정의할 수 있습니다.

프로젝트 수준에서 사용자 지정 축 정렬을 정의하려면 편집 > 프로젝트 설정 > 그래픽으로 이동합니다. 카메라 설정 섹션에 투명도 정렬 모드 드롭다운과 투명도 정렬 축의 X, Y 및 Z 값 설정이 표시됩니다.

기본적으로 Unity의 투명도 정렬 축은 XYZ의 경우 각각 (0, 0, 1)로 설정됩니다. 하지만 모든 2D 타일은 실제로는 동일한 Z 평면에 있습니다. 대신 화면에서 타일의 깊이가 아닌 높이를 사용하여 어떤 타일이 뒤에 있는지 앞에 있는지 확인할 수 있습니다. 화면에서 높은 위치에 있는 타일은 낮은 위치에 있는 타일 뒤에 정렬됩니다. 높이를 기준으로 타일을 정렬하려면 투명도 정렬 모드를 사용자 지정으로 변경하고 투명도 정렬 축 값을 (0, 1, 0)으로 설정합니다.

2D 정렬의 작동 방식에 대해 자세히 알아보려면 관련 Unity 문서 페이지를 참조하세요.

경우에 따라 투명도 정렬 축의 Z 값을 조정할 수도 있습니다. 이에 대해서는 이 블로그 게시물의 뒷부분에서 자세히 다루겠습니다.

타일맵 기능은 함께 작동하는 여러 구성 요소로 이루어져 있습니다. 처음 두 개는 그리드 및 타일맵 게임 오브젝트입니다. 그리드를 만들려면 계층 구조의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 2D 오브젝트로 이동한 다음 사용하려는 타일맵 유형을 선택하면 됩니다. 기본적으로 각각의 새 그리드는 해당 유형의 자식 타일맵 게임 오브젝트 1개로 생성됩니다. 현재 사용 가능한 타일맵 유형은 다음과 같습니다:

타일맵 - 직사각형 그리드 및 타일맵을 만듭니다. 이 타일맵의 사용 예제는 Unity의 2D 게임 키트에서 확인할 수 있습니다.

육각형 포인트 상단 타일맵 - 각 육각형의 정점 중 하나가 위쪽을 가리키는 육각형 그리드 및 타일맵을 만듭니다.

육각형 평면 상단 타일맵 - 육각형의 상단이 화면 상단과 평행한 가장자리인 또 다른 육각형 그리드 유형입니다.

마지막 두 가지 유형인 아이소메트릭과 아이소메트릭 Z를 Y로 사용하면 아이소메트릭 그리드의 두 가지 구현이 만들어집니다. 아이소메트릭 레벨에 높은 플랫폼이 있는 경우와 같이 다양한 타일 높이 레벨을 시뮬레이션할 때 이 둘의 차이가 발생합니다.

일반 아이소메트릭 타일맵은 타일의 각 개별 고도 레벨에 대해 별도의 타일맵 게임 오브젝트를 생성하려는 경우에 가장 적합합니다. 이렇게 하면 자동 충돌 모양을 만드는 과정이 간소화되지만 한 레이어의 모든 타일이 동일한 '평면'에 있어야 하므로 타일 간의 높이 변화에 대한 유연성이 떨어집니다.

아이소메트릭 Z를 Y 타일맵으로 사용하는 경우 각 타일의 Z 위치 값은 사용자 지정 투명도 축 정렬 설정과 함께 작동하여 타일이 서로 겹쳐진 것처럼 보이도록 합니다. Z를 Y 타일맵으로 칠할 때는 브러시의 Z 설정을 동적으로 조정하여 다양한 높이로 전환합니다. Z를 Y로 타일맵을 올바르게 렌더링하려면 커스텀 투명도 정렬 축에 추가 Z 값이 필요합니다.

참고: 여기에 표시된 에셋은 아이소메트릭 스타터 키트 프로젝트의 사원 타일세트에서 가져온 것입니다. 완전 무료인 만큼 부담 없이 다운로드하여 나만의 환경을 만들어 보세요!

그리드는 타일맵 게임 오브젝트를 담는 '이젤'로, 타일을 칠할 캔버스라고 생각하면 됩니다. 타일맵에서 페인팅을 시작하려면 브러시와 팔레트도 필요합니다. 타일 팔레트는 타일 에셋을 보관하는 곳으로, 브러시 도구로 타일을 선택하고 페인팅을 시작할 수 있습니다.

타일 팔레트를 만들려면 창 > 2D > 타일 팔레트를 선택합니다. 새로 열린 창의 왼쪽 상단 드롭다운에서 '새 팔레트 만들기'를 선택합니다. 사용 사례에 해당하는 그리드 유형을 설정해야 합니다. 이 예제에서는 일반 아이소메트릭 타일맵과 아이소메트릭 스타터 키트 프로젝트의 에셋을 사용하겠습니다. 팔레트 셀 크기를 수동으로 설정하여 아이소메트릭 타일의 치수를 사용자 지정할 수 있습니다. 이 경우 타일의 치수는 X 1, Y 0.5의 그리드에 해당하지만, 사용 사례의 경우 해상도, 가져오기 시 선택한 단위당 픽셀 값, 에셋의 치수, 즉 기본적으로 타일이 회전하는 아이소메트릭 각도에 따라 달라질 수 있습니다.

에셋에 적합한 가져오기 설정과 타일맵 크기가 무엇인지 잘 모를 수 있습니다. 초기 자산 크기에 따라 여기에서 따를 수 있는 일반적인 규칙이 있습니다. 먼저 타일의 해상도를 살펴보세요. 일반적으로 블록으로 표시되는 아이소메트릭 타일은 폭보다 높이가 더 크고, '평면' 타일(정육면체가 아닌 평면으로 표시되는 타일)은 높이보다 폭이 더 넓습니다. 그러나 너비는 항상 동일합니다. 따라서 타일이 정확히 하나의 Unity 유닛을 차지하도록 하려면 타일 임포트 설정에서 단위당 픽셀 수 값을 타일 너비(픽셀)와 동일하게 설정하세요. 일부 타일이 두 개 이상의 그리드 셀을 차지하고 인접한 타일을 오버레이하는 효과를 연출하려는 경우 이 값을 낮추거나 에셋의 실제 해상도를 높이는 등 경우에 따라 이 값을 조정하는 것이 유용할 수 있습니다.

타일의 올바른 Y 격자 값을 결정하려면 단일 타일의 밑면(또는 캡) 높이를 구하고 이를 너비로 나눕니다. 이렇게 하면 X가 1인 경우 X에 상대적인 Y 값이 제공됩니다. 몇 가지 예를 살펴보겠습니다:

이 프로젝트에서 사용하는 픽셀 아트의 경우 모든 타일의 기본 높이는 32픽셀이고 너비는 64픽셀입니다. 예시 이미지의 두 번째 블록은 Golden Skull Art의 에셋 팩에서 가져온 것으로, 그리드 크기는 정확히 Y=0.5입니다. 예시 타일은 참조용으로 축소되었지만 원본 에셋의 너비는 128픽셀입니다. 타일 베이스의 높이는 약 66픽셀이므로 Y 격자 크기는 66/128, 즉 약 0.515유닛입니다.

올바른 그리드 크기를 정했으면 이제 팔레트에 타일을 추가해 보겠습니다. 타일 스프라이트 중 하나를 잡고 타일 팔레트 창으로 드래그하기만 하면 됩니다. 그러면 타일 에셋이 생성됩니다. 여기에는 사용 중인 스프라이트, 색조 색상, 생성할 콜라이더 유형 등 타일 자체에 대한 몇 가지 정보가 포함되어 있습니다. 팔레트에서 타일에 대한 자세한 정보를 보려면 타일 팔레트 창 상단의 선택(S) 도구를 선택하고 해당 타일을 클릭합니다. 이제 인스펙터에서 어떤 타일 에셋을 참조하고 있는지 확인할 수 있을 것입니다.

타일맵에 새 타일을 칠하려면 브러시(B) 도구를 선택하고 팔레트에서 타일을 클릭합니다. 이제 장면 보기에서 선택한 타일로 페인팅할 수 있습니다. 다른 페인팅 도구로는 지우개(D), 상자 채우기(U), 플러드 채우기(G), 타일 선택기(I) 등이 있습니다.

때로는 팔레트 자체에서 타일의 배열을 편집하고 싶을 수도 있습니다. 도구 모음 바로 아래에 편집 버튼이 표시됩니다. 클릭하면 팔레트 편집 모드로 전환되며, 이 모드에서는 도구가 타일 팔레트 자체에 영향을 미칩니다. 원하는 변경을 수행한 후에는 이 모드를 종료하는 것을 잊지 마세요.

아래 예시와 같이 동일한 타일맵에 있음에도 불구하고 서로 다른 유형의 타일이 올바르게 정렬되지 않는 상황이 발생할 수 있습니다:

이는 타일맵 렌더러 컴포넌트의 모드 설정에 따라 결정됩니다. 기본적으로 모드는 청크로 설정되어 있습니다.

청크 모드는 타일맵의 성능 비용을 줄이는 데 효과적입니다. 각 타일을 개별적으로 렌더링하는 대신 큰 블록으로 한 번에 일괄 렌더링합니다. 그러나 이 기능을 사용하는 데는 두 가지 주요 단점이 있습니다. 첫 번째는 씬의 다른 2D 오브젝트와의 동적 정렬을 지원하지 않는다는 사실입니다. 즉, 타일맵이 청크 모드인 경우 캐릭터와 같은 다른 오브젝트의 앞뒤를 동적으로 정렬할 수 없으며, 레이어 내 순서 설정에 따라 한 번에 하나만 정렬할 수 있습니다. 하지만 게임을 최적화하고 싶을 때 매우 효과적이며 넓은 영역의 지면을 일괄 렌더링하는 데 사용할 수 있습니다.

하지만 이렇게 해도 서로 다른 타일이 서로 정렬되지 않는 문제는 해결되지 않습니다. 두 개 이상의 서로 다른 스프라이트(예: 텍스처)에서 가져온 타일을 일괄 렌더링하려면 스프라이트가 단일 스프라이트 아틀라스 에셋으로 통합되어야 합니다.

스프라이트 아틀라스를 만들려면 자산 > 만들기 > 스프라이트 아틀라스를 선택합니다. 스프라이트 아틀라스 설정에서 포장용 오브젝트 목록을 찾을 수 있습니다. 일괄 렌더링하려는 모든 타일을 이 목록으로 드래그하고 올바른 가져오기 설정(일반적으로 개별 스프라이트의 설정과 동일)을 설정하기만 하면 됩니다.

이렇게 하면 타일이 올바르게 정렬되지만, 플레이 모드 또는 런타임에만 이러한 방식으로 표시됩니다.

따라서 편집하는 동안 타일맵 렌더러 모드를 개별로 설정하는 것이 좋습니다. 각 타일을 개별적으로 정렬하므로 플레이 모드가 아닌 상태에서도 올바르게 렌더링된 타일을 볼 수 있어 레벨을 계속 변경할 때 매우 유용합니다. 레벨 구조가 완성되면 언제든지 타일맵 렌더러 모드를 청크로 다시 설정할 수 있습니다.

개별 렌더 모드는 캐릭터와 함께 또는 서로 동적으로 정렬하려는 나무, 소품, 높은 지대 등의 오브젝트를 추가할 때도 유용합니다. 이 블로그 게시물에서는 모든 타일맵에 개별 모드를 계속 사용하겠습니다.

때로는 같은 그리드에 두 개 이상의 타일맵을 사용하고 싶을 수도 있습니다. 아이소메트릭 및 육각형 타일맵의 경우 레벨에 그리드와 정렬되는 소품 오브젝트를 추가하거나 첫 번째 레이어보다 높게 보이는 타일을 추가하려는 경우에 유용합니다.

그리드에 다른 타일맵을 첨부하려면 그리드 게임 오브젝트를 마우스 오른쪽 버튼으로 클릭하고 해당 유형의 타일맵을 새로 생성합니다.

새 타일맵에서 페인팅으로 전환하려면 타일 팔레트 창으로 돌아가서 기본 도구 모음 바로 아래에 있는 활성 타일맵을 변경합니다.

레벨에 고지를 추가하는 방법에는 일반적으로 두 가지가 있습니다. 가장 많이 사용하는 타일맵은 선택한 타일맵 유형에 따라 다릅니다. 가능한 각 경우에 대해 살펴보겠습니다.

또한 이 주제에 대한 짧은 동영상을 준비하여 일반 아이소메트릭 타일맵을 사용하여 이러한 접근 방식 중 하나를 시연하고 타일에 충돌 영역을 추가하는 방법을 설명합니다. 이 두 가지에 대한 간단한 동영상 참고자료가 필요하다면 이 동영상을 확인하세요:

일반 아이소메트릭 타일맵의 경우, 동일한 그리드 아래에 새 타일맵을 생성하고 레이어에서 더 높은 순서를 지정하면 됩니다. 그런 다음 타일 앵커 설정을 변경하여 새 레이어를 그리드에서 더 높은 지점에 앵커링할 수 있습니다.

제 그라운드 레벨 타일맵의 타일 앵커는 X와 Y에 각각 (0, 0)이었습니다. 새 레이어를 한 단위 더 높게 칠하고 싶으므로 새 타일맵의 앵커 포인트를 (1, 1)로 변경합니다. 또한 기본 레벨보다 한 단계 높은 레이어 1의 주문을 부여합니다.

이제 활성 타일맵을 두 번째 높이 레벨이 있는 타일맵으로 변경하고 페인팅할 수 있습니다.

때로는 동일한 타일맵을 사용하여 서로 다른 높이를 시뮬레이션하는 것이 유용할 수 있습니다. 이 경우 Z를 Y 아이소메트릭 타일맵 및 그리드로 사용할 수 있습니다.

Z를 Y 타일맵으로 사용하면 각 타일의 Z 값이 타일 렌더링 순서에 추가적인 영향을 미칩니다. 타일 팔레트 하단에 있는 브러시의 Z 위치 설정을 사용하여 타일을 칠하는 동안 타일의 Z 값을 조정할 수 있습니다('+' 및 '-' 단축키를 사용하여 변경할 수도 있음):

그러나 Z 값이 제대로 기여하고 타일이 올바르게 정렬되도록 하려면 사용자 지정 축 정렬 값으로 돌아가서 Z 영향을 추가해야 합니다. 여기서 사용하는 숫자는 Unity가 아이소메트릭 그리드에서 셀 위치를 월드 스페이스 값으로 변환하는 방식과 직접적으로 연관되어 있습니다.

예를 들어, 아이소메트릭의 기본값인 (1, 0.5, 1)의 XYZ 치수를 가진 그리드의 Z축 정렬 값은 -0.26입니다. 이 숫자가 어떻게 계산되는지 궁금하거나 셀 크기가 다른 그리드를 사용하는 경우, 자신의 사례에 맞는 Z 값을 찾는 방법을 알아보세요.

올바른 사용자 지정 축 정렬 값을 설정하고 나면 다른 Z 값을 가진 타일 페인팅을 시작할 수 있습니다. 기본적으로 1로 설정되어 있는 그리드의 Z 치수를 변경하여 Z 값이 상승된 타일을 위 또는 아래로 이동하는 증분을 조정할 수도 있습니다.

축 정렬의 Z 값을 계산하는 데 사용할 수 있는 일반적인 공식이 있습니다. 먼저 그리드의 Y 차원을 가져옵니다. 아직 Y 차원을 정하지 못했다면 이 블로그 게시물 상단의 에셋 가져오기에 대한 참고 사항을 살펴보세요. 이 값에 음수 0.5를 곱하고 여기서 0.01을 추가로 뺍니다.

이 공식에 따라 차원이 (1, 0.5, 1)인 그리드는 Z 정렬 값 -0.26(음수 26)이 됩니다. 이 축 정렬 값에서는 모든 (1, 0.5, 1) 그리드에서 타일이 올바르게 정렬됩니다.

이 값과 계산의 출처에 대해 자세히 알아보려면 여기에서 설명서를 참조하세요. 2D 렌더러가 어떻게 작동하는지, 아이소메트릭 셀을 월드 스페이스 값으로 변환할 때 어떤 방법이 사용되는지 자세히 설명합니다.

이제 일부 타일을 다른 타일보다 높게 배치했으므로 충돌을 사용하여 플레이어가 이동할 수 있는 영역을 제어하고 그 사이를 전환할 수 있습니다.

콜리전을 추가하는 방법은 여러 가지가 있지만, 저희의 경우 플레이어가 경사로를 이용해 레벨을 따라 오르내리기를 원했기 때문에 어떤 오브젝트에 콜리전이 있어야 하는지, 없어야 하는지가 명확하지 않았습니다. 대신 추가 타일맵을 사용하여 직접 충돌을 정의할 수 있습니다.

이 프로젝트에서는 충돌 영역을 정의하는 데 사용할 다양한 모양에 해당하는 몇 가지 스프라이트를 만들었습니다. 플레이어가 지나치지 않았으면 하는 영역에 세 번째 타일맵에 이러한 모양을 칠할 수 있습니다. 예를 들어, 플레이어가 절벽에 직접 걸어서 올라가지 않고 경사로를 이용해서만 절벽으로 올라갈 수 있게 하려고 합니다.

타일맵 렌더러 컴포넌트에 커스텀 머티리얼을 추가하여 타일에 레벨의 나머지 부분과 구별되는 다른 색을 입힐 수도 있습니다.

콜리전 타일을 배치한 후에는 콜리전 타일맵에 타일맵 콜리더 컴포넌트를 추가할 수 있습니다. 이렇게 하면 스프라이트의 모양에 따라 각 개별 타일에 대한 충돌기가 자동으로 생성됩니다.

더 나은 성능을 위해 컴포짓 콜라이더 2D 컴포넌트를 추가하고 타일맵 콜라이더에서 컴포짓에 사용됨을 체크할 수도 있습니다. 이렇게 하면 모든 개별 충돌기가 하나의 큰 모양으로 통합됩니다.

레벨에 소품을 추가하는 방법은 아주 간단합니다. 씬의 원하는 지점에 소품 스프라이트를 수동으로 배치하거나 소품을 개별 타일로 만들어 타일맵 그리드에 부착할 수 있습니다. 각 사례에 가장 적합한 접근 방식을 결정할 수 있습니다.

이 프로젝트에서는 레벨 주변에 나무를 수동으로 배치했습니다. 나무와 캐릭터는 레이어에서 동일한 순서를 가지므로 캐릭터가 나무의 앞뒤로 동적으로 정렬할 수 있습니다.

콜라이더를 사용하여 플레이어가 트리를 통과할 수 있는 지점을 정의할 수 있습니다. 이를 수행하는 방법에는 여러 가지가 있습니다.

첫 번째 방법은 동영상에서 설명한 것처럼 오브젝트에 자식 충돌기를 부착하고 필요에 따라 모양을 변경하는 것입니다.

다른 방법은 스프라이트 에디터 내에서 오브젝트에 대한 커스텀 피직스 셰이프를 정의하는 것입니다.

스프라이트 편집기를 열려면 개체의 스프라이트를 선택하고 인스펙터에서 스프라이트 편집기 단추를 찾습니다. 왼쪽 상단 드롭다운에서 커스텀 피직스 셰이프 에디터로 전환합니다. 여기에서 다각형 모양을 만들어 커스텀 콜라이더의 경계를 정의할 수 있습니다.

물리 모양을 정의한 후에는 오브젝트에 폴리곤 콜라이더 컴포넌트를 첨부하면 해당 모양에 해당합니다.

타일맵에서 소품을 타일로 사용하는 경우 그리드 콜라이더를 사용할 수도 있습니다. 소품 타일에 해당하는 타일 에셋을 선택합니다(타일 에셋을 어디서 찾을 수 있는지 다시 한 번 확인하려면 기본 타일맵 워크플로 섹션을 참조하세요). 콜라이더 유형에 대한 드롭다운 설정을 볼 수 있습니다. 기본적으로 스프라이트로 설정되어 있으며, 이는 자동 생성된 콜라이더가 앞서 설명한 피직스 셰이프를 사용한다는 의미입니다. 그러나 그리드로 설정하면 소품이 부착된 그리드 셀의 모양과 항상 정확히 일치합니다. 콜라이더를 구현하는 가장 정확한 방법은 아니지만 특정 유형의 게임에는 유용할 수 있습니다.

이러한 타일에 그리드 콜라이더를 사용하려면 소품이 있는 타일맵을 선택하고 타일맵 콜라이더 컴포넌트를 추가합니다.

규칙 타일은 타일 페인팅 워크플로우를 자동화할 때 매우 유용합니다. 규칙 타일은 타일링 매개변수 목록이 추가된 일반 타일처럼 작동합니다. 이러한 매개변수 또는 규칙을 사용하면 타일은 인접한 타일을 기준으로 어떤 스프라이트를 칠할지 자동으로 선택할 수 있습니다.

규칙 타일은 절벽이나 플랫폼을 만들 때와 같이 회전이 다른 타일을 손으로 직접 선택하지 않으려는 경우에 유용합니다. 또한 동일한 타일의 다양한 변형을 무작위화하여 명백한 패턴을 피하고 애니메이션 타일을 만드는 데에도 사용할 수 있습니다.

아이소메트릭 및 헥사곤 룰 타일은 유니티의 2D 엑스트라 리포지토리 (GitHub)에서 다운로드할 수 있습니다. 타일맵 기능을 위한 다른 유용한 에셋도 많이 포함되어 있습니다.

또한 아이소메트릭 스타터 키트 프로젝트에는 다양한 타일세트 각각에 대해 미리 구성된 규칙 타일이 포함되어 있습니다. 다음은 프로젝트에 포함된 타일의 몇 가지 예시이며 실험해 볼 수 있습니다:

이제 Unity의 아이소메트릭 타일맵에 대해 자세히 알아봤으니, 여기에서 아이소메트릭 스타터 키트 프로젝트를 다운로드하여 직접 사용해 보세요! 프로그래머라면 스크립트를 통해 타일맵과 상호작용하는 것도 가능하므로 이 방법도 시도해 볼 수 있습니다.

예를 들어 아이소메트릭 타일맵과 함께 작동하는 간단한 캐릭터 컨트롤러를 구현하는 방법은 이 동영상을 통해 확인할 수 있습니다:

이 프로젝트의 아트워크는 @castpixel이 Unity용으로 제작한 것으로, 여기에서 더 많은 작품을 확인할 수 있습니다. 타일맵을 사용하여 실험해 볼 수 있는 추가 2D 에셋을 찾고 있다면 Unity 에셋 스토어에서도 확인할 수 있습니다.

---

Unity Learn 프리미엄 플랫폼의 초급 및 고급 콘텐츠를 통해 타일맵을 사용한 모범 사례를 알아보세요.