렉트 타일 제작하기

# 학습 과정 안내

크리에이터의 월드에 어울리는 특색 있는 렉트 타일을 그리는 방법을 소개합니다. 크리에이터가 사용하기 편한 소프트웨어를 사용해 타일을 제작할 수 있습니다. 이 가이드는 Adobe Photoshop을 사용해 타일을 제작합니다. 제작한 시트는 [아틀라스 활용하기](/docs/?postId=687)를 참고해 이미지를 일정한 크기로 잘라 타일로 활용할 수 있습니다.

##### 참고 가이드

[RectTileMap의 활용](/docs/?postId=589) [아틀라스 활용하기](/docs/?postId=687)

# 타일 종류

월드의 맵을 다채롭게 꾸미기 위해서는 다양한 타일이 필요합니다. 만약 차도를 만든다면 교차로, 막다른 길 같은 길도 제작해야 합니다. MSW에서 나누는 타일 종류는 아래와 같습니다.

  1. 기본 타일: 기본 타일은 두 가지로 나눌 수 있습니다. 
     * 패턴이 없는 타일: 맵을 구성하는 기본 타일로 사용하는 높이가 느껴지지 않는 타일입니다.  
[png](1683172461007e5dd537aba3b4c36a7988bc6e051253b)
     * 패턴이 있는 타일: 패턴이 있는 기본 타일입니다. 높이가 느껴지지 않습니다.  
[png](1683172485011d380326979b94099928580e77910ef59)
  2. 연결 타일: 두 가지 기본 타일을 사용해 차도, 도보, 오솔길 등을 만들 때 사용합니다.  
[png](1683172563731bbae861a1a4a4e159914605d974e095c)
  3. 높이 타일: 플레이어에게 높낮이를 인식하게 하거나, 갈 수 없는 곳으로 인식하게 만들 때 사용합니다. 
     * 벽 타일: 막힌 느낌을 낼 때 사용하는 타일입니다. 작업 시 64px 두 칸을 사용해야 합니다.
     * 계단 타일: 주로 벽 타일 사이에 배치되어 이동할 수 있는 곳으로 보일 수 있게 작업합니다.



# 사전 준비

기본 타일 1개의 크기는 64x64px입니다. 높이 타일은 타일 종류에 따라 여러 칸을 사용해 그려야 합니다.

> Tip 한 캔버스에서 64x64 크기를 미리 볼 수 있습니다. 아래처럼 설정하면 가상의 선이 일정한 간격으로 캔버스에 보입니다. 편집 - 환경설정 - 안내선, 격자 및 분할 영역 - 격자에서 격자 간격을 64px로 설정한 뒤 확인을 누릅니다. [png](1683176857137d50049c253964d4ab7cfed7384c46603)

# 기본 타일 그리기

타일을 그릴 때는 연필 툴을 사용해 그립니다. 1px크기로 설정해 세밀하게 작업하기를 권장합니다.

#### 패턴이 없는 타일

잔디밭으로 사용할 타일을 그려봅시다. 노이즈 효과를 사용해 빠르게 만들 수 있습니다.

  1. 타일의 기본색을 캔버스에 그립니다. [png](1683177510180846b5f4a72854ca09cb73fe35a50bf25)
  2. 노이즈를 만들어 기본 색상을 다양하게 만들 수 있습니다. 필터 - 노이즈 추가를 선택합니다. 분포를 가우시안으로 선택해 규칙이 생기지 않게 합니다. [png](1683177742296dfce8ee50e7a4ae9b62b58ecd398f650)
  3. 레이어를 추가하고, 캔버스를 확대해 가장 어두운 색을 스포이드 도구를 사용해 추출합니다.
  4. 선택한 색상을 기준으로 다양한 색상을 선택해 크리에이터의 기획에 따라 패턴을 그립니다.필요한 경우 새로운 레이어를 추가하고, 꽃, 돌, 벌레 등을 그려 활용할 수 있습니다. [png](1683178056930bd6b1b6e43774f0bbad8cd074b5a997c)



> Tip 패턴 미리보기 기능을 사용해 타일을 연속으로 배치했을 때 자연스러울지 확인할 수 있습니다. [png](168317923354137e1942dea934dcd99a2b073829f8cc3)

#### 패턴이 있는 타일

패턴이 있는 타일은 노이즈 효과를 사용하지 않고, 직접 패턴을 확인하며 그리는 것이 좋습니다.

  1. 기본색을 캔버스에 칠합니다. [png](1684213100045b739955101124b2e9c94a4e1f790a164)
  2. 연필 도구를 사용해 패턴을 그립니다. 다양한 크기의 패턴을 사용하면 좀 더 자연스러운 패턴을 만들 수 있습니다. 사방의 가장자리가 자연스럽게 이어지는지 확인합니다. 타일에 패턴을 그릴 때는 불규칙적인 모양으로 그리는 것을 권장합니다. [png](16842125974123f276d4479a1433c9fb49407ad3ec8fa)
  3. 패턴이 자연스럽게 이어지면, 다양한 색을 사용해 좀 더 다채롭게 보이게 수정합니다. [png](1684212623125803ddf134ed84e8ba260cc08d9ab2d6b)
  4. 경계가 흐리면 외곽선에 사용한 색을 좀 더 어두운 색을 사용합니다. [png](1684213063427fd9e3ff1e8c54d09b587c485d32ddc6e)



#### 연결 타일

도로, 오솔길 같은 길을 만들기 위해서는 최소 12개의 타일이 필요하며, 크리에이터의 의도에 따라 더 필요할 수도 있습니다. 12개의 타일은 9개, 4개씩 정사각형 모양으로 모아 그리면 수월하게 작업할 수 있습니다. 연결 타일을 그릴 때는 레이어 한 개를 사용하는 것보단, 여러 개의 레이어를 사용해 적절히 타일을 나누어 그리는 것이 좋습니다. 또한, 이어지는 타일을 만들 때 캔버스 크기를 더 크게 만들어, 남는 여유 공간에 제작한 타일을 이리저리 응용해 배치해보며 타일들이 어울리는지 확인하는 작업을 거치는 것을 추천합니다.

  1. 12칸에 모두 제작한 기본 타일들을 각각의 레이어에 옮겨 그립니다. [png](16841253385017f35e462522443939954b1c45e9af49b)



> Tip. 사각형 도구를 이용해 제작한 타일을 손쉽게 추가할 수 있습니다. 사각형 선택 윤곽 도구(M) - 복사(Ctrl+C) - 붙여넣기(Ctrl+V) 

  2. 빈 레이어를 추가하고, 사각형 도구를 사용해 9개의 타일 안쪽에 지울 영역을 설정합니다. [png](1683600217782267bb2460a3648d795ae8035dbfc6943)
  3. 사각형 선택 윤곽 도구를 활용해 기본 타일 레이어에서 작은 사각형 범위를 선택합니다. Delete를 눌러 안쪽을 지웁니다. [png](16836003085094e6f0e1c4b384cd79fa4883cf8baf54a)
  4. 두 타일이 만나는 경계가 자연스럽게 이어지도록 기본 타일 레이어에서 그림자를 그립니다.
  5. 4칸의 타일 안쪽에 지울 영역을 사각형 도구를 이용해 그립니다. 중앙에 작게 그리는 것이 좋습니다. [png](16837929814178a2fa1b9d3a84089811d9668aa1abd79)
  6. 기본 타일 레이어에서 사각형 바깥 영역을 지웁니다. 타일이 겹치는 부분이 자연스럽게 이어지도록 그림자를 그립니다. [png](1683792351851bdf013fb85324732ba72cacad615b344)



> 더 알아보기 시트의 여유 공간에 사각형 선택 도구를 활용해 제작한 연결 타일들을 미리 다양하게 배치해볼 수 있습니다. 다양하게 조합해 그린 타일들이 모두 자연스럽게 이어지는지 확인하고 수정할 수 있습니다.. [png](1683172563731bbae861a1a4a4e159914605d974e095c)

# 높이 타일 그리기

크리에이터의 의도에 따라 높이 타일을 제작해 입체감이 느껴지는 맵을 제작할 수 있습니다. 벽 타일과 계단 타일 제작 방법을 소개합니다. 높이 타일 크리에이터의 의도에 따라 응용하여 그릴 수 있습니다.

#### 벽 타일

벽 타일은 아래와 같은 순서로 그립니다 [png](16837937290502fb16601298145539698b1e606f50ad4)

  1. 배경색을 캔버스에 그립니다. [png](168379507952663b08c218c404a698ed06d5d712c239d)



높이 타일은 2칸을 한 타일을 만드는 기준으로 생각하고 그립니다. 이때 칸 전체를 꽉 채워 그리기보다 위, 아래 4-6px 여백을 만들어 그리는 것을 권장합니다. 타일 칸 전체를 꽉 채워 제작하면 캐릭터와 타일이 겹칠 때 공간감이 어색해지기 때문입니다. [png](1683793076682f42c6e4d211249a085896ac4d968d131)

  2. 브러쉬, 연필 툴을 사용해 타일을 그립니다. 벽의 윗부분이 될 부분을 남기고 앞에서 봤을 때 보이는 부분을 먼저 그립니다. [png](1683799584550110a5602bd174daab81d06aefb44885a)
  3. 사물을 위에서 내려봤을 때를 생각해 그려야 합니다. 돌담의 경우 돌담의 가장 윗부분이 함께 보여야 합니다. [png](168380235708851a9316b524646f78d3730eda72853bb)
  4. 패턴 미리보기 기능을 활성화 합니다. 타일이 이어서 배치되었을 때 어색한 부분이 있는 지 확인합니다. [png](1683799652780e101c88d4935443d8ffa868750dd2818)
  5. 패턴이 자연스럽게 이어지는지 확인했다면, 타일에 명암을 나타나게 색을 칠합니다. 윗부분은 밝은 색, 아래는 어두운 색으로 칠해 명암을 나타냅니다. [png](16838017207928e91a3c7af2a4bfb9f90261110122226)
  6. 그림자와 풀을 그려 마무리합니다. [png](16838027731038ea6a3aeb2684b818debeb2de2fe1dff)



#### 계단 타일

계단은 다른 타일과 이어 사용하는 경우가 많습니다. 벽으로 사용하는 타일과 함께 자주 사용되므로 함께 사용했을 때 적절히 잘 어울리는지 확인하며 그리는 것이 좋습니다. 이번에는 벽 타일 사이에 들어가는 계단 타일 그리는 법을 살펴봅시다.

  1. 제작한 벽 타일을 양쪽에 배치하고가운데 지정한 배경색으로 사각형을 그립니다. 사각형은 양 벽 타일 대비 안쪽으로 만드는 것이 좋습니다. [png](16838048081190e727c53a86f461cb048285a5692503b)
  2. 배경색보다 약간 어두운 색상의 연필 도구로 계단 형태를 그립니다. [png](1683805578337318af7a249044751bcd3c360ffbccb91)
  3. 계단의 윗쪽은 밝게, 아랫쪽은 어둡게 그리며 계단에 명암을 나타냅니다. [png](1683806374729a2adb6d3cbb14d02a8cc06ade600f063)



> 더 알아보기 다양한 형태의 높이 타일을 만들어 아래와 같이 활용할 수 있습니다. [png](16841254749616f0d753209764215945f389c15eac91c)