페이퍼 2D 타일 세트 / 타일 맵

이 글의 기능은 현재 실험단계 이므로, 일부 기능이 완벽지원되지 않을 수 있습니다.

Paper 2D (페이퍼 2D) 안의 Tile Sets (타일 세트) 및 Tile Maps (타일 맵)으로, 프레임워크의 레이아웃 또는 2D 레벨의 "일반적인 레이아웃" 작업을 쉽고 빠르게 할 수 있습니다. 타일 세트(텍스처에서 끌어온 타일 집합)와 타일 맵(타일의 폭과 높이가 정의된 2D 그리드)을 만들어 함께 사용하면, 타일 맵에 "칠할" 다양한 타일을 선택하여 레벨 레이아웃에 사용할 수 있습니다. 다수의 각 레이어마다 타일을 칠하여, 특정 레이어에 대해 맵의 각 셀에서 어떤 타일을 나타나게 할 것인지 각각 지정할 수도 있습니다.

타일 세트 만들기

타일 세트는 다른 애셋과 마찬가지로 콘텐츠 브라우저 안에서 만들 수 있습니다. 기본 애셋부터 만들거나, 다른 기존 애셋에서 생성할 수도 있습니다.

빈 타일 세트

빈 타일 세트 애셋을 새로 만들려면:

1. 콘텐츠 브라우저 의 버튼을 누른 다음, 기타 아래 타일 세트 를 선택합니다.

   

2. 새로운 타일 세트 애셋에 이름을 입력합니다.

   

3. 애셋을 더블클릭 하여 타일 세트 에디터 창에서 엽니다.

   

4. 디테일 패널 안에서 사용할 타일 시트 텍스처 애셋을 지정합니다.

   

텍스처에서 타일 세트

기존 텍스처에서 타일 세트를 만들려면:

1. 콘텐츠 브라우저 에서 텍스처 애셋에 우클릭 한 다음 스프라이트 액션 아래 타일 세트 생성 을 선택합니다.

   

2. 제공한 텍스처를 기준으로 타일 세트를 자동 생성 및 이름을 짓습니다.

   

   애셋 이름변경은 선택한 뒤 F2 키를 누르거나, 우클릭 후 이름변경 을 선택하면 됩니다.

3. 애셋에 더블클릭 하여 타일 세트 에디터 창에서 엽니다.

   

타일 세트 에디터

새로운 타일 세트 애셋을 생성한 후, 애셋에 더블클릭 하면 타일 세트 에디터 에서 열립니다.

위의 뷰포트 창(1)에는 타일 세트와 사용하도록 지정한 타일 시트가 보입니다. 타일 에디터 창(2)에는 현재 선택된 타일이 표시됩니다. 디테일 패널(3)에서는 타일 세트나 그 세트를 이루는 개별 스프라이트에 영향을 끼치는 여러가지 세팅을 설정할 수 있습니다 (아래 타일 세트 환경설정하기 부분을 참고하세요).

타일 세트 환경설정하기

시트 안에 각 타일이 정확히 선택되었는지 확인하기 위해서는, 타일 세트 환경설정을 제대로 해 줘야 합니다.

뷰포트 안에서 타일 시트에 좌클릭 하면 하양 타일 선택 박스가 떠 현재 선택된 타일임을 나타냅니다.

뷰포트 안에서 우클릭 드래그 및 마우스 휠 버튼으로 타일 시트 줌 인/아웃 가능합니다.

위에서 Tile Width (타일 폭)과 Tile Height (타일 높이) 기본값 32 (픽셀)은 하양 선택 박스를 나타내는데 사용되고 있습니다. 아쉽게도 타일이 기본값보다 크므로 타일 폭과 높이가 (노랑 외곽선으로 나타낸) 전체 타일을 아우르도록 하고 싶습니다.

타일 에디터 프리뷰 창 안에서 현재 선택된 타일과 그에 연관된 타일 번호가 (아래와 같이) 표시됩니다. 그 바로 아래, 디테일 패널 안에서, 타일 폭과 높이가 전체 타일을 아우르도록 조절할 수 있습니다.

위 예제에서 타일 폭과 높이를 64 로 올려 타일 크기에 맞췄습니다.

클릭하면 원래 크기로 봅니다.

뷰포트에서, 흰색 타일 선택 박스가 이제 타일 시트의 개별 타일 하나 전체를 강조하고 있습니다 (타일 시트 구성에 따라 다른 값으로 실험을 해야 할 수도 있습니다). 타일 에디터 창 역시 선택된 타일 시트에서 하나의 타일을 표시하도록 업데이트합니다.

타일 폭과 높이 설정에 추가로, 디테일 패널에서 다음 세팅을 통해 추가적인 타일 세트 조정이 가능합니다.

타일별 세팅 / 타일 콜리전 적용하기

또한 디테일 패널에는 (특정 타일에 콜리전 적용같은) 타일별 세팅을 지정할 수 있습니다.

타일에 콜리전을 적용하려면:

1. 뷰포트(1)에서 타일을 선택한 다음, 콜리전에 사용하려는 모양 유형(2)을 클릭합니다.

   

2. 모양이 적용되며, 타일 에디터 창 안에서 추가로 편집이 가능합니다.

   

   편집중인 타일 번호(위의 초록 박스)를 눈여겨 보세요. 이 타일에 세팅을 적용하려면 이 번호가 필요합니다.

3. 디테일 패널에서 Sprite 섹션 아래, 선택된 타일을 찾아 원하는 지오메트리 유형 으로 변경합니다.

   

   스프라이트 콜리전 유형 관련 상세 정보는, 스프라이트 콜리전 문서를 참고하세요.

그러면 지정된 지오메트리 유형과 사용된 모양에 따라 타일의 콜리전 구성이 완료됩니다. 게임내에서 콜리전의 실제 적용을 위해서는, 타일 맵 생성시 Sprite Collision Domain 설정을 해 줘야 합니다 (타일 맵 생성/사용 관련 정보는 아래 참고).

타일 맵 생성하기

타일 맵은 콘텐츠 브라우저 에서 만들며, 타일 맵 에디터 에서 편집합니다.

새 타일 맵

새 타일 맵 애셋을 생성하려면:

1. 콘텐츠 브라우저 에서 버튼을 누르고, 기타 아래 타일 맵 을 선택합니다.

   

2. 새 타일 맵 애셋에 이름을 입력합니다.

   

3. 애셋을 더블클릭 하여 타일 맵 에디터 창에서 엽니다.

   

타일 맵 에디터

새 타일 맵 애셋을 연 뒤, 타일 맵 에디터 안에서 작업을 하기 위해서는 작업할 Active Tile Set (활성 타일 세트)를 할당해 줘야 합니다.

1. 사용할 활성 타일 세트 지정은 툴박스 창 안에서 선택 박스를 클릭하면 됩니다.

   

   그런 다음 현재 작업하고자 하는 타일 세트를 선택합니다.

   

   생성한 타일 세트가 위 창에 표 시되어, "활성 타일 세트"를 전환할 수 있습니다.

2. 타일 세트를 선택했으면, 뷰어가 선택된 내용으로 업데이트됩니다.

   

타일 맵 에디터를 이루는 세 창은 아래와 같습니다.

위의 툴박스 창(1)에서는, 타일 맵 생성에 사용할 타일 세트를 전환할 수 있습니다. 맵에 있는 타일에 칠하기, 지우기, 또는 채우기 용 툴(은 물론, 현재 선택된 타일을 뒤집거나 회전시키는 옵션)도 있습니다. 이 창의 하단에는 뷰어가 있는데, 타일 세트 뷰어와 조작방식이 같습니다 (우클릭 드래그로 패닝, 마우스 휠 로 줌 인/아웃 합니다).

가운데 창, 뷰포트 (2)는 타일 맵 레이아웃을 채우는 데 사용됩니다. 툴박스의 툴을 사용해서 타일 맵 내 타일을 칠하거나 지우거나 채워 원하는 이펙트를 만들 수 있습니다. 게임에서 맵이 어떻게 나타나는가 "칠하는" 곳이 바로 이 곳입니다.

디테일 패널(3)에서는, 타일 맵을 이루는 레이어 갯수에 대한 환경설정은 물론 타일 맵 자체의 폭/높이, 맵을 이루는 타일의 폭과 높이, 픽셀과 언리얼 유닛 사이의 스케일 인수, 사용할 콜리전 유형 등의 여러가지 세팅 조절이 가능합니다.

타일 맵에 콜리전 켜기

타일 세트 섹션에서 말씀드렸듯이, 어떤 타일에 콜리전이 있고 없고를 지정한 이후에는 타일 맵에 사용할 콜리전 유형을 설정해주기도 해야합니다. 그 작업은 디테일 패널 아래 Collision 섹션에서 가능합니다.

콜리전 두께 (즉 3D 콜리전 도메인 사용시 콜리전 지오메트리의 돌출 두께)는 물론 (타일 맵이 콜리전 지오메트리를 갖고 물리 월드에 참여할 것인지를 나타내는) 콜리전 도메인 자체 설정도 가능합니다.

Use 2D Physics (2D 피직스 사용) 옵션은 현재 실험단계라 정상 작동하지 않을 수 있습니다. Use 3D Physics (3D 피직스 사용) 옵션을 대신 사용해 주시기 바랍니다.

레벨에서 플레이할 때, Show Collision 콘솔 명령으로 어느 타일에 콜리전이 있고 없고를 확인할 수 있습니다.

위에서, 플레이어가 걸어다니는 맨 위쪽 땅바닥 타일에는 콜리전이 적용된 반면, 땅바닥 아래와 물 타일은 그렇지 않습니다.

예제 타일 맵 작업방식

아래는 타일 맵을 만드는 전형적인 작업방식 예제입니다.

1. 타일 맵 애셋을 엽니다.

2. 디테일 패널에서 타일 맵의 Map Width 및 Map Height (맵 폭과 높이)를 설정합니다.

   

   사실상 맵 또는 레벨의 크기가 됩니다.

3. 맵의 개별 타일에 대한 Tile Width 및 Tile Height (타일 폭과 높이)도 설정해 줍니다.

   

   보통 타일 세트에 정의한 크기와 같습니다.

4. 타일 맵 구성을 위해 작업할 Active Tile Set (활성 타일 세트)를 할당합니다.

5. 또한 작업할 부가 레이어를 몇 개 (배경에 하나, 전경에 하나, 플레이가능 레벨 지오메트리에 하나) 추가합니다.

   

   옵션입니다만, 배경 요소로 된 레이어 하나, 그리고 전경 요소와 플레이어가 걸어다닐 수 있는 (땅바닥, 박스, 플랫폼 등) 레벨 지오메트리로 된 레이어를 별도로 하나씩 만들어 두는 것이 좋습니다.

6. 뷰어에서 타일을 선택한 다음, 맵에서 좌클릭 하여 맵에 칠합니다.

   

   뷰어에서 좌클릭 드래그하는 것으로 다수의 타일을 선택해서 맵에 다수의 타일을 한 번에 칠할 수도 있습니다.

   

   맵에서, 이제 선택된 타일로 칠할 수 있습니다.

   

7. 맵에 타일을 계속 칠하고 채우고 지워서 원하는 레이아웃을 만듭니다.

   

8. 디테일 패널의 Collision 섹션에서 콜리전을 켜 줍니다.

   

   어느 타일이 콜리전이 있고 없고 타일 세트에 지정을 해 둬야 콜리전 효과가 발휘됩니다.

9. 타일 맵 애셋을 레벨에 끌어놓은 후 필요에 따라 이동 및 스케일 조절합니다.