타일맵 만드는 법 — 무료 편집기로 따라 하는 단계별 가이드

타일맵 만드는 법을 배우는 일은 결국 네 가지를 올바른 순서로 결정하는 문제입니다. 셀 크기, 타일셋 배치, 레이어 스택, 그리고 충돌이 어디에 있는지입니다. 이 결정을 한 번만 내리면 맵을 칠하는 일은 기계적으로 변합니다.

아래 단계는 글로 된 설명이 Neta Studio에서 플레이 가능한 세계가 될 때 우리가 사용하는 순서를 따릅니다. 타일셋을 고르거나 생성하고, 그리드를 확정하고, 디테일보다 지형을 먼저 블록으로 잡고, 레이어를 나눈 다음, 오토타일링이 가장자리를 처리하도록 합니다. 여기에는 설치가 필요한 것이 없습니다. 편집기는 브라우저에서 실행되며, 아래의 모든 수치는 나중에 맵을 다시 그리지 않고도 바꿀 수 있습니다.

타일맵이란 무엇인가? (명확한 정의 + 도해)

타일맵은 그림의 격자가 아니라 인덱스의 격자입니다. 각 셀은 타일셋 안의 한 타일을 가리키는 정수를 저장하고, 렌더러는 그 인덱스를 조회해 셀 위치에 타일을 그립니다. 32 px 셀 기준 20 × 12 맵은 640 × 384 픽셀을 차지하는 240개의 정수입니다.

그 간접 참조가 핵심입니다. 잔디 타일 하나는 시트에 한 번만 저장되고 수백 개의 셀이 이를 참조하므로 맵 파일은 작게 유지되고 빠르게 로드됩니다. 타일맵은 그림이 아니라 데이터이기 때문에 노이즈 함수로 생성하고, 텍스트로 편집하고, 두 버전을 Git에서 비교하고, 카메라가 움직일 때 청크 단위로 스트리밍할 수 있습니다.

이 페이지 상단의 도해는 32 px 기준 12 × 8 그리드에 우리 타일로 만든 것입니다. 잔디가 내부를 채우고, 모래가 왼쪽과 아래 가장자리를 따라 흐르며, 물이 모래가 끝나는 오른쪽 아래 모서리에 자리합니다. 데이터로 읽으면 열 3, 행 0의 셀은 잔디 인덱스를, 열 0, 행 7의 셀은 물 모서리 인덱스를 담고 있으며 나머지 모든 셀은 일반 모래 인덱스를 담고 있습니다. 원점은 왼쪽 위이고, x는 오른쪽으로, y는 아래로 증가합니다. 엔진이 왼쪽 아래를 원점으로 사용한다면, 행 인덱스를 (행 - 1 - y)로 뒤집기 전까지 맵이 거꾸로 렌더링됩니다.

• 그리드맵을 만들 때 고정되는 열과 행입니다. 20 × 12 맵과 40 × 24 맵은 같은 카메라 줌에서 매우 다르게 동작합니다.
• 셀 크기셀 하나가 차지하는 픽셀 크기로, 16, 32, 48 또는 64입니다. 타일셋의 타일 크기와 정확히 일치해야 하며, 그렇지 않으면 샘플링이 타일 중간에 걸립니다.
• 타일 집합인덱스가 가리키는 이미지와, 그것이 가진 열과 행 개수에 대한 정의입니다.
• 인덱스 레이어레이어마다 셀마다 정수 하나입니다. 지면 레이어는 빽빽하고, 디테일 레이어는 대부분 비어 있으며, 충돌 레이어는 그림 대신 플래그를 담습니다.

타일셋이란 무엇인가? (그리고 무엇이 다른가)

타일셋은 그림책이고, 타일맵은 그 책을 가리키는 참조 페이지입니다. 타일셋은 픽셀을 소유합니다. 즉 시트와, 그 시트가 예를 들어 32 px 타일 8열로 이루어졌다는 규칙입니다. 타일맵은 배치를 소유합니다. 즉 각 레이어의 각 셀에 어떤 인덱스가 놓이는지입니다.

두 용어가 끊임없이 뒤바뀌는 이유는 대부분의 편집기가 같은 패널에 나란히 보여 주고, 단일 파일 형식이 그 구분을 숨길 수 있기 때문입니다. Tiled에서는 타일셋 파일이 맵 파일과 분리되어 구분이 명시적입니다. Unity에서는 타일 에셋이 스프라이트를 담고 타일맵 컴포넌트가 셀을 담습니다. Godot에서는 타일셋과 타일맵 레이어가 별도의 리소스입니다.

실질적인 결과는 이렇습니다. 타일셋을 바꾸면 그것을 참조하는 모든 맵이 바뀌지만, 타일맵을 바꾸면 한 레벨만 바뀝니다. 32 px 시트를 48 px 시트로 교체하면 모든 인덱스는 여전히 해석되지만, 이제 모든 맵이 다른 축척으로 그려지고 가장자리에서 이웃 타일을 샘플링할 수 있습니다. 타일셋은 버전 번호가 붙은 공개 인터페이스로 취급하세요.

1단계: 타일셋 고르기 또는 만들기

두 가지 경로가 있습니다. 기존 시트를 사용하거나 새로 생성하는 것입니다. 기존 시트가 더 빠르지만, 그 팔레트와 셀 크기, 라이선스를 그대로 물려받습니다. 그 위에 맵 40개를 만들기 전에 라이선스를 확인하고, 그것이 압축 아틀라스가 아니라 그리드 시트인지 확인하세요. 아틀라스는 균일한 셀 대신 타일마다 사각형 좌표를 저장하므로 인덱싱이 더 어렵고 오토타일링이 까다로워집니다.

지형이 특정 팔레트와 맞아야 한다면 생성하세요. Agent Sprite Forge는 글로 된 설명에서 일관된 셀 크기의 타일 시트를 만들어 주므로, 가장 흔한 정렬 오류 원인을 제거합니다. 즉 아티스트가 셀 밖에 하이라이트를 추가해서 타일 하나가 33 px 너비가 된 시트 같은 문제입니다.

어느 경로를 택하든 첫 번째 작업은 그리기가 아니라 측정입니다. 시트를 100% 확대에서 열고, 열과 행을 세고, 셀 크기를 팀의 나머지가 찾을 수 있는 곳에 적어 두세요.

• 하나의 셀 크기대부분 비어 있는 타일까지 포함해 모든 타일이 같은 너비와 높이를 가져야 합니다. 32 px 시트에 33 px 타일이 하나 있으면, 내보내기가 읽기 순서로 묶을 경우 그 뒤의 모든 인덱스가 밀립니다.
• 진짜 투명도흰색이 아니라 알파입니다. 불투명한 흰색 배경을 가진 시트는 브라우저에서 하늘 위에 흰 상자를 그립니다.
• 문서화된 그리드열, 행, 그리고 패딩이 있는지 기록하세요. 인덱스 계산은 0부터 시작해 행 × 열 개수 + 열 번호이며, 왼쪽에서 오른쪽으로, 위에서 아래로 읽습니다.
• 거터 결정패딩이 있는 시트는 텍스처 번짐을 줄이려고 셀 사이에 1~2 px를 추가하지만, 그 대가로 샘플링 계산에 오프셋이 생깁니다. 첫 붓질 전에 어느 쪽을 쓸지 정하세요.

2단계: 타일 크기와 그리드 설정하기

셀 크기는 세 가지로 결정됩니다. 플레이어가 실제로 플레이하는 줌, 목표 렌더링 해상도, 그리고 감당할 의향이 있는 아트의 양입니다. 1920 px 너비 뷰포트에서 16 px 타일은 가로로 120개 셀을 만들어 화면당 레벨이 많고 디테일을 넣을 여지가 거의 없습니다. 64 px 타일은 30개 셀을 주고 읽을 수 있는 나무를 그릴 충분한 픽셀을 줍니다.

엄격한 제약은 산술입니다. 셀 크기는 시트를 나누어떨어뜨려야 합니다. 256 px 너비 시트는 32 px에서 정확히 8열이지만, 48 px에서는 5.33이 되므로 마지막 열이 타일의 일부가 되고 그 뒤의 모든 인덱스가 어긋납니다. 시트 크기는 미적 선택이 아니라 셀 크기의 배수입니다.

정수 배율을 사용하세요. 뷰포트가 그리드의 정수 배가 아니면 셀이 반 픽셀에 걸리고, 필터링이 이웃 타일 두 개를 샘플링하며, 맵 전체에 1픽셀 이음매가 나타납니다. 양쪽에서 해결하세요. 엔진에서는 최근접 이웃 필터링을 쓰고, 카메라 줌은 정수로 설정하세요.

3단계: 지면을 먼저, 그다음 디테일 칠하기

여러 차례에 걸쳐 칠하되, 항상 지형을 먼저 하세요. 지형은 바꾸게 될 것이고, 장식은 옮기고 싶지 않을 것입니다. 나무 60그루를 배치한 다음 해안선을 네 칸 왼쪽으로 옮기면, 그 나무들이 갑자기 모두 물속에 서 있게 됩니다.

타일 하나로 시작하세요. 맵 전체를 잔디 인덱스 하나로 채우고, 게임플레이 줌에서 실루엣을 본 다음에야 오토타일링이 가장자리를 처리하도록 하세요. 디테일은 형태가 정해진 뒤에 오고, 충돌은 디테일 뒤에 옵니다. 소품이 걸어 다닐 수 있다는 걸 뒤늦게 알게 되는 것은 다시 칠하는 일이 아니라 충돌을 편집하는 일이기 때문입니다.

플레이어가 볼 수 있는 모든 것을 칠하세요. 빈 셀은 렌더러가 맵 뒤에 그리는 것으로 기본 설정되는데, 보통 의도한 배경이 아닙니다. 지워진 캔버스에 의존하는 것보다 카메라에 배경색을 설정하는 편이 더 안전합니다.

4단계: 레이어, 깊이, 충돌 추가하기

타일맵을 레이어로 나누는 순간 타일맵은 평면이기를 멈춥니다. 최소한 유용한 스택은 세 개입니다. 빽빽한 지면 레이어, 성긴 디테일 레이어, 그리고 그림을 전혀 담지 않는 충돌 레이어입니다. 맵의 무언가가 플레이어를 가려야 한다면 캐릭터 위의 오버레이 레이어를 일찍 추가할 가치가 있습니다.

깊이는 같은 그리드에서 나옵니다. 탑다운 맵에서는 각 객체의 아래쪽 가장자리로 정렬합니다. 발이 가장 낮은 것이 마지막에 그려집니다. 타일의 경우 셀 y가 이미 위치를 담고 있으므로 이는 공짜입니다. 움직이는 캐릭터의 경우에는 결정론적 순서 기준이 있는 객체별 정렬이 필요하며, 보통 객체의 y에 셀 안에서의 소수 오프셋을 더합니다. 그것이 없으면 같은 행의 두 객체가 프레임마다 깜빡입니다.

충돌은 같은 크기의 병렬 배열로서 그리드에 대응합니다. 타일셋에서 각 타일에 고체 플래그를 주어 벽을 칠하면 자동으로 고체로 표시되게 하고, 맵별 재정의에는 충돌 레이어를 사용하세요. 셀별 플래그는 경사, 일방통행 발판, 셀 안의 얇은 벽을 표현할 수 없습니다. 그런 것은 그리드 위에 겹쳐 놓는 별도 객체에 속하며, 타일맵에 속하지 않습니다.

• 지면 레이어빽빽함: 모든 셀이 인덱스를 담습니다. 안전하게 오토타일링할 수 있는 유일한 레이어입니다.
• 디테일 레이어성기고 비어 있는 곳은 투명합니다. 나무, 바위, 데칼입니다. 여기의 어떤 것도 실수로 이동을 막아서는 안 됩니다.
• 오버레이 레이어캐릭터 위에 그려집니다. 나무 수관, 다리, 지붕입니다. 플레이어를 가려야 하는 모든 것입니다.
• 충돌 레이어그림이 없습니다. 맵과 같은 크기의 불리언 배열로, 타일셋의 고체 플래그에서 시작하고 예외는 손으로 편집합니다.

5단계: 오토타일링과 47타일 세트

오토타일링은 조용히 실패하는 부분입니다. 이웃이 여덟 개인 지형 타일은 2^8, 즉 256가지의 이웃 구성이 가능합니다. 모서리는 인접한 두 변이 모두 채워졌을 때만 중요하며, 그 대칭성 때문에 256가지 경우가 47개의 고유 타일로 줄어듭니다. 그래서 대부분의 엔진과 편집기는 지형마다 문서화된 배치로 정렬된 47타일 블롭 세트를 사용합니다.

16타일 세트도 만나게 되는데, 이는 네 변의 이웃만 읽고 모서리는 무시합니다. 또 2x2 미니타일 세트도 있는데, 각 셀을 네 개의 사분 타일로 그려서 13~16개의 미니타일로 모든 경우를 처리합니다. 16타일 세트는 그리기 더 간단하지만 모서리가 무뎌집니다. 미니타일 방식은 이미지가 더 적게 필요하지만 모든 지형을 사분면 단위로 제작해야 하므로 픽셀 아트가 부드러워집니다.

틈 없이 오토타일링되는 타일맵 만드는 법

마스크가 전체 메커니즘입니다. 각 셀에 대해 여덟 이웃으로부터 8비트 정수를 만듭니다. 비트 0은 북, 비트 1은 북동, 비트 2는 동, 이런 식으로 시계 방향으로 진행합니다. 순서를 하나 정하고, 코드 옆에 적어 두고, 절대 바꾸지 마세요. 한 비트 어긋난 마스크도 그럴듯한 지형을 만들어 내기 때문에, 서로 맞지 않는 관례가 몇 달 동안 살아남은 뒤에야 누군가 모서리가 잘못됐다는 걸 알아차립니다.

그다음 마스크를 타일 인덱스로 변환합니다. 두 가지 방법이 있습니다. 생성하기 쉽고 행을 출력해 디버그할 수 있는 완전한 256항목 조회 테이블, 또는 47항목 테이블에 대칭 함수를 더한 것입니다. 대상이 메모리 제약이 있는 경우가 아니라면 완전한 테이블을 택하세요. 그것이 모서리 버그 한 종류를 통째로 없애 줍니다.

오토타일을 연결하기 전에 알아 둘 만한 실패 유형

맵 가장자리의 이음매는 범위 밖 셀을 일관성 없이 처리할 때 생깁니다. 맵 바깥의 세계가 비어 있는지 같은 지형인지 한 번 정하고, 그 규칙을 모든 지형에 적용하세요.

두 번째로 흔한 실패는 덮어쓰기입니다. 오토타일링은 자기가 소유한 셀을 다시 쓰기 때문에, 특정한 모양을 위해 손으로 칠한 타일은 다음 차례에 사라집니다. 오토타일링 후 지형 레이어를 잠그거나, 수동 재정의를 마지막에 실행되는 별도 목록에 저장하세요.

열어서 플레이할 수 있는 타일맵 예시

작동하는 맵을 읽는 것이 그 설명을 읽는 것보다 더 많이 가르쳐 줍니다. The Cyclops' Island는 별도의 충돌 레이어와 함께 단일 지형 세트로 만든 플레이 가능한 맵입니다. 해안선을 따라 걸으며 모래에서 물로 넘어가는 곳에서 타일이 바뀌는 지점을 보세요. 그것이 실제로 사용되는 47가지 블롭 경우입니다.

Mini World는 더 작은 예시입니다. 이것을 열어 지면과 디테일, 오버레이로 이루어진 레이어 스택을 보고, 맵이 비어 보이지 않고 완성된 것처럼 읽히는 데 디테일 타일이 얼마나 적게 필요한지 확인하세요.

3D 게임 빌더는 같은 그리드를 가져와 돌출시킵니다. 각 셀이 블록이 되고, 충돌 레이어가 수직 벽이 되며, y 정렬이 Three.js 장면에서 실제 깊이가 됩니다. 2D 맵이 일관되면 3D 버전은 거의 비용이 들지 않지만, 레이어가 뒤섞여 있으면 돌출 과정에서 즉시 드러납니다.

• The Cyclops' Island편집기 확대가 아니라 플레이 속도에서 오토타일된 지형 가장자리를 연구할 수 있는 걸어 다닐 수 있는 맵입니다.
• Mini World스크롤 없이 레이어 스택을 살펴볼 수 있는 작은 그리드입니다.
• 3D 게임 빌더같은 타일맵을 블록으로 돌출시킨 것으로, 충돌 레이어가 형상이 되고 깊이가 실제가 됩니다.

타일셋 템플릿 다운로드 (포토샵 / Aseprite 그리드)

템플릿은 그리기 보조물이지 필수 요소가 아닙니다. 셀마다 안내선이 있고, 안전 영역을 표시하는 1픽셀 안쪽 표시가 있고, 위쪽 행과 왼쪽 열을 따라 인덱스 번호가 있어서 그리는 동안 인덱스가 어디에 놓이는지 볼 수 있는 투명 캔버스입니다. 그 위에 그리고, 내보내기 전에 숨기세요.

템플릿을 프로젝트에 맞추세요. 512 × 512 캔버스는 32 px 셀의 16 × 16 그리드를 담습니다. 16 px 셀이면 같은 파일이 32 × 32 그리드를 담으므로, 안내선 불투명도를 낮춰야 합니다. 그 밀도에서는 안내선이 아트를 가리기 때문입니다.

그것이 속한 세계로 걸어 들어가기

스프라이트는 설 자리가 없는 캐릭터입니다. 마지막 단계는 다른 곳에서는 아무도 제공하지 않는 것입니다. 방금 만든 시트를 가져와 누군가 걸어 다닐 수 있는 세계, 즉 작은 섬, 행성, 비 내리는 거리 모퉁이에 넣는 것입니다. 이 사이트의 모든 세계는 하나의 글로 된 설명에서 만들어졌고 플레이할 수 있는 페이지로 게시되었습니다.

FAQ