2D 타일맵 에셋 워크플로: 이미지에서 레벨로

Unity 2017.2에서는 2D 기능 세트에 새로운 기능이 추가되었습니다: 타일맵! 타일맵을 사용하면 스프라이트와 게임 오브젝트를 조합하여 2D 레벨을 빠르게 레이아웃하고 제작할 수 있으며 레이어 순서, 타일맵 콜라이더, 애니메이션 타일 등의 프로퍼티를 제어할 수 있습니다! 이 블로그 포스팅에서는 이미지 파일을 Unity로 임포트하는 단계부터 2D 플랫포머의 레이아웃 레벨까지 전체 워크플로에 대해 설명합니다!

간단히 요약하자면 워크플로우는 다음과 같이 요약할 수 있으며, 각 요소는 Unity 에디터의 에셋 또는 컴포넌트와 관련되어 있습니다:

스프라이트 -> 타일 -> 팔레트 -> 브러시 -> 타일맵

유니티가 아닌 관점에서 보면 이러한 용어는 다소 추상적으로 보일 수 있습니다. 실제 캔버스에 실제 그림을 그리는 과정을 상상해 보세요:

색상 -> 페인트 -> 타일 팔레트 -> 페인트 브러시 -> 캔버스

프로세스의 각 단계에는 비슷한 로직이 있으며 각 단계의 이름도 비슷합니다!

이 글에서는 이 'GrassPlatform_TileSet' 이미지를 주요 예시로 사용하겠습니다:

최종 결과물은 2D 캐릭터가 달릴 수 있는 '레벨'로서 이러한 조각들로 구성된 레벨입니다:

Unity로 이미지를 임포트하는 방법은 다양합니다:
- 원하는 이미지 파일을 프로젝트의 'Assets' 폴더에 저장합니다.
- 상단 메뉴에서 '자산 -> 새 자산 가져오기'를 선택한 다음 원하는 파일을 선택합니다.
- 파일 브라우저에서 이미지 파일을 Unity 에디터의 '프로젝트 창'으로 드래그합니다(가장 쉬운 방법일 것입니다!).

이미지를 프로젝트로 임포트하면 현재 프로젝트가 어떤 동작 모드로 설정되어 있는지에 따라 기본 텍스처 유형 임포트 설정이 정의됩니다: 2D 또는 3D.

이 모드는 원래 새 프로젝트를 만들 때 설정됩니다:

또는 편집기 설정에서 변경할 수 있습니다:

내 프로젝트가 이미 2D 동작 모드로 설정되어 있으므로 'GrassPlatform_TileSet'은 타일 에셋이 스프라이트를 참조하는 데 필요한 설정인 텍스처 유형이 '스프라이트(2D 및 UI)'인 텍스처 유형으로 자동 임포트됩니다.

'GrassPlatform_TileSet'은 하나의 이미지에 있는 일련의 스프라이트이므로 이를 개별 스프라이트로 분할해야 하며, 스프라이트 모드를 '단일'에서 '다중'으로 설정하고 스프라이트 에디터를 열면 됩니다:

스프라이트 에디터 창을 사용하면 이미지를 여러 스프라이트로 '슬라이스'할 수 있으므로 원하는 이미지 편집 소프트웨어에서 하나의 스프라이트 시트에서 작업하고 Unity에서 직접 이미지의 어느 영역을 '개별' 스프라이트로 처리할지 정의할 수 있습니다. 수백 개의 개별 이미지 파일을 일일이 관리할 필요가 없습니다!

'GrassPlatform_TileSet'은 일련의 타일로 합성된 이미지이므로 스프라이트 에디터의 그리드 슬라이싱 설정을 사용하여 이미지를 여러 개의 스프라이트로 자동 분할할 수 있습니다. 이 타일 세트의 각 '셀 타일'의 크기는 64픽셀 x 64픽셀이므로 이 설정을 입력하면 스프라이트 에디터가 필요한 스프라이트 조각을 자동 생성하도록 할 수 있습니다:

'슬라이스' 버튼을 클릭하면 이제 슬라이스된 스프라이트 세트가 생겼습니다!

그런 다음 스프라이트 편집기 창에서 슬라이스된 각 스프라이트를 선택하고 편집할 수 있습니다. 예를 들어 각 스프라이트의 이름을 설정하고 위치 및 피벗과 같은 값을 수동으로 조정할 수도 있습니다.

그런 다음 스프라이트 에셋에 변경 사항을 '적용'(스프라이트 에디터의 오른쪽 상단에 있는 적절한 이름의 '적용' 버튼을 클릭하여)하면 프로젝트 창에서 슬라이스된 각 스프라이트를 개별적으로 참조할 수 있습니다:

스프라이트 시트가 개별 스프라이트로 분할되었으므로 이제 이를 타일로 '변환'해야 합니다.

타일은 Unity 2017.2에 추가된 새로운 에셋입니다. 그 목적은 타일맵이 그리드의 특정 셀에서 사용할 데이터를 보관하는 것입니다.

기본 기본 타일 에셋(프로젝트 창의 '생성 -> 타일'에서 생성할 수 있음)을 사용하면 스프라이트를 할당하고 스프라이트의 색조 및 타일맵에서 사용할 콜라이더 유형(나중에 설명할 예정)과 같은 기타 커스터마이징을 할 수 있습니다.

Unity 2017.2에는 타일 팔레트라는 새로운 창이 도입되었습니다! 이 창은 사용할 타일과 타일맵 편집 방법을 선택하는 인터페이스 역할을 하므로 새로운 타일맵 시스템을 사용하는 데 필수적인 요소입니다.

타일 팔레트 창에 'TopGrassTile' 타일을 추가하기 전에 먼저 새 팔레트를 만들어야 합니다. 팔레트를 사용하면 창에 있는 하나의 작업 공간에 모든 타일(수백 개 이상일 수도 있습니다!)을 '저장'하는 대신 타일 세트를 정리할 수 있습니다.

드롭다운 팔레트 메뉴에는 새로운 팔레트를 만들 수 있는 옵션이 있습니다:

새로 만든 이 팔레트에 드래그 앤 드롭만큼이나 간단하고 쉽게 'TopGrassTile'을 추가할 수 있습니다!

하지만 어떤 상황에서는 2D 씬을 구성하는 수백, 수천 개의 스프라이트로 작업해야 할 수도 있습니다. 이러한 스프라이트 각각에 대한 타일 에셋을 수동으로 생성한 다음 개별적으로 팔레트에 끌어다 놓으면 시간이 매우 많이 걸립니다.

다행히도 타일 세트(스프라이트당 하나씩)를 자동으로 생성하고 원하는 팔레트에 모두 할당할 수 있는 워크플로우가 있습니다. 또한 드래그 앤 드롭처럼 간단하고 쉽습니다! 타일 에셋을 팔레트로 드래그하는 대신 슬라이스된 스프라이트가 포함된 소스 스프라이트 시트를 드래그합니다. 이 경우 'GrassPlatform_TileSet'입니다:

이제 타일 팔레트 창에 'GrassPlatform_TileSet' 스프라이트 시트가 성공적으로 설정되었으니, 2D 레벨을 구성할 차례입니다!

시작하려면 현재 씬에 새로운 '타일맵'을 생성해야 하는데, '게임 오브젝트 -> 2D 오브젝트 -> 타일맵' 드롭다운 메뉴에서 이 작업을 수행할 수 있습니다. 그러나 이렇게 하면 '타일맵' 게임 오브젝트(관련 컴포넌트 포함)뿐만 아니라 타일맵 게임 오브젝트가 자동으로 자식인 '그리드' 게임 오브젝트도 생성됩니다.

'그리드 <-> 타일맵' 설정과 가장 유사한 게임 오브젝트 구조는 Unity의 UI 시스템으로, 캔버스 부모 게임 오브젝트가 모든 자식 UI 게임 오브젝트(예: 텍스트 및 이미지)의 레이아웃 컨테이너 역할을 합니다. '그리드' 게임 오브젝트는 '그리드' 컴포넌트를 사용하여 모든 자식 타일맵 게임 오브젝트의 치수를 정의합니다. 레이아웃을 일부 사용자 지정할 수 있는 옵션이 있습니다:

그런 다음 자식 타일맵 게임 오브젝트는 타일맵 컴포넌트와 타일맵 렌더러 컴포넌트에 의해 구성되며, 전자는 타일에 칠해진 타일의 데이터를 포함하고 후자는 타일이 렌더링되는 방식에 대한 시각적 설정을 정의합니다.

타일맵 시스템은 여러 타일맵 게임 오브젝트가 동일한 그리드의 자식이 될 수 있도록 설계되었으므로 레벨의 최종 결과물을 여러 층의 서로 다른 타일로 쉽게 합성할 수 있습니다:

각 타일맵 렌더러는 타일 렌더링에 사용되는 머티리얼, 사용하는 소팅 레이어(스프라이트 렌더러, UI 캔버스 및 파티클 시스템과 동일한 레이어 시스템입니다!), 스프라이트 마스크에 반응하는 방식 등을 제어할 수 있습니다.

타일맵에 타일을 그리기 전에 두 가지를 선택해야 합니다. 현재 초점이 맞춰진 타일맵과 현재 사용 중인 브러시입니다.

첫 번째는 편집 옵션 아래의 타일 팔레트 창에 있는 '활성 타일맵' 드롭다운에서 선택할 수 있습니다:

이 드롭다운 목록에는 씬에 있는 '타일맵' 컴포넌트의 모든 인스턴스가 표시되며, 하나를 선택하여 페인팅하고 편집할 수 있습니다. 위의 스크린샷에는 기본 타일맵 게임 오브젝트의 이름을 딴 하나의 '타일맵' 옵션만 표시되어 있지만, 여러 개의 타일맵이 있는 복잡한 씬에서는 이와 같이 가능한 활성 타일맵 목록을 표시할 수 있습니다:

'GrassPlatform_TileSet' 예제의 경우, '타일맵' 게임 오브젝트의 이름을 더 정확하게 변경하면 활성 타일맵 목록 이름도 업데이트됩니다:

다음으로 선택할 것은 현재 브러시입니다. 타일 에셋이 셀에 포함할 데이터(비주얼, 콜라이더 유형 등)를 결정하는 반면, 브러시 에셋은 타일(또는 타일)을 타일맵에 배치하는 방법을 정의합니다. 현재 Unity에는 선택할 수 있는 브러시('기본 브러시')가 하나만 내장되어 있으며, 타일맵에 타일을 배치, 지우기, 이동, 채우기 등 이름에 걸맞은 기능을 갖추고 있습니다. 하지만 유니티 테크놀로지스 팀 깃허브에는 2D 엑스트라 리포지토리에 커스텀 브러시 및 타일을 스크립팅하는 다양한 예제가 있습니다! 프로젝트에 가져온 후 타일 팔레트 창의 하단에 있는 현재 브러시 메뉴에서 사용할 브러시를 선택할 수 있습니다:

이 글에서는 스크립터블 브러시와 스크립터블 타일의 사용에 대해 자세히 다루지는 않지만, 타일맵 기반 레벨 디자인 툴세트를 연구하고 통합하는 데 매우 강력한 영역입니다.

활성 타일맵과 현재 브러시를 설정한 다음 타일 팔레트 창에서 특정 타일을 선택한 다음 씬의 타일맵에 페인트하면 됩니다! 또한 편집 도구의 '페인트브러시' 아이콘도 선택되어 있는지 확인해야 합니다:

성공! 타일맵에 타일을 칠하고 있습니다! 그러나 타일이 그리드의 셀 크기보다 약간 작다는 것을 알 수 있습니다. 이것은 버그는 아니지만, 그 이유와 기본값을 변경하는 방법을 설명하기 위해 잠시 뒤로 물러서야 합니다.

그리드 컴포넌트의 셀 크기는 Unity의 월드 스페이스 거리 단위를 사용합니다(예를 들어 각 축의 기본 배율이 1인 원시 Unity 큐브는 기본 그리드의 셀 한 개와 같은 크기입니다). 각 스프라이트 에셋의 가져오기 설정에는 단위당 픽셀 수 값이 있으며 기본값은 100입니다: