타일 맵 에디터 — 무료 온라인 타일맵 제작기 및 레벨 에디터

타일 맵 에디터는 그리드, 타일셋, 브러시입니다. PNG를 가져오거나 프롬프트로 세트를 생성하고, 셀 크기를 하나로 정하고, 여러 레이어에 걸쳐 셀을 칠하고, 충돌용으로 고체 셀을 표시한 뒤 내보냅니다. 이 페이지의 타일 맵 에디터는 브라우저에서 실행됩니다: 다운로드도, 계정도, 빌드 단계도 없으며, 에디터의 스크린샷이 아니라 에디터 자체가 가장 먼저 보입니다.

아래의 모든 내용은 이 도구가 실제로 하는 일과 어디서 깨지는지를 설명합니다. 1 px 여백이 있는 시트가 타일 크기만 입력하면 왜 잘못 가져와지는지. 가장자리당 두 상태인 오토타일 규칙이 왜 16개가 아니라 47개의 변형을 필요로 하는지. TMX가 PNG가 담지 못하는 무엇을 담는지. 그리고 방금 칠한 맵을 재생 버튼을 눌러 걸어볼 수 있다는 것이 왜 수정 속도를 바꾸는지.

타일 맵 에디터 (라이브 도구)

라이브 도구는 이 페이지의 가장 첫 번째 요소입니다. 캔버스는 그리드이고, 타일셋이 그 옆에 있으며, 레이어 목록은 하나씩 숨기고 잠글 수 있는 독립적인 그리드의 스택입니다. 셀을 칠하는 것은 클릭 한 번입니다. 드래그하면 연속된 셀이 칠해집니다. 사각형 도구는 영역을 채우고, 플러드 필은 열린 바닥을 처리하며, 지우개는 아래 레이어까지 지워 냅니다.

네 가지 기능이 일을 합니다. 그리드는 문서 전체에 대해 하나의 숫자, 즉 픽셀 단위의 셀 크기를 고정하며, 모든 브러시, 레이어, 내보내기가 그 단위로 측정됩니다. 브러시는 클릭이 무엇을 쓰는지 결정합니다: 단일 타일, 사각형 블록, 플러드 필, 선, 또는 지우기. 레이어는 별도의 그리드를 쌓아 지형, 장식, 충돌을 독립적으로 편집할 수 있게 유지합니다. 충돌은 셀을 고체로 표시하고 아트워크에 칠하는 대신 데이터로 저장하므로, 벽을 다시 칠해도 차단 영역을 다시 만들 필요가 없습니다.

칠하기와 재생 사이에 저장 대화상자도, 컴파일 단계도 없습니다. 에디터가 쓰는 문서가 런타임이 읽는 문서이므로, 한 프로그램에서는 올바르게 보이던 맵이 다른 프로그램에서 로드되자마자 반 타일만큼 어긋나는 종류의 버그가 통째로 사라집니다.

타일셋 가져오기 또는 생성하기

들어가는 길은 두 가지입니다. 이미 가지고 있는 PNG를 가져오거나, 텍스트 프롬프트로 세트를 생성해 그것으로 칠하는 것입니다. 둘 다 같은 지점에 도달합니다: 캔버스 옆에 정렬된 타일 시트가 놓입니다.

둘 다 직접 그리기 싫다면, 무료 타일셋 라이브러리는 흔한 셀 크기의 준비된 시트를 모아 둔 카탈로그입니다. Agent Sprite Forge는 문제의 나머지 절반인 캐릭터와 소품을 담당하는데, 이들은 지형과 다른 규칙을 따르며 보통 동작마다 더 많은 프레임을 필요로 합니다.

에디터는 무엇이든 로드하기 전에 타일 크기를 묻고, 그 숫자는 아트워크와 정확히 일치해야 합니다. 16 px 타일의 256×256 시트는 16열 × 16행입니다. 시트 가장자리에 1 px 여백이 있고 타일 사이에 1 px 간격이 있다면, 이는 스프라이트 도구의 흔한 기본값인데, 순수한 계산으로는 열 수가 잘못 나오므로 여백과 간격도 입력하거나 시트를 잘라내세요. 잘못 설정하면 그리드가 비뚤어집니다: 첫 번째 열은 괜찮아 보이고 그 뒤의 모든 타일이 시트 전체에 걸쳐 커지는 오차만큼 어긋납니다.

타일셋 가져오기를 깨뜨리는 다른 세 가지가 있습니다. 아트워크가 정수가 아닌 배율로 확대되어 타일이 15 또는 33 px가 된 경우. 아트워크가 이웃 셀 안으로 1 px 넘게 그려져 모든 이음새를 따라 인접 타일의 얇은 선으로 나타나고, 엔진이 필터링을 켜고 샘플링하면 더 심해지는 경우. 그리고 투명 영역이 실제로는 검은색인 알파 채널로, 맵이 렌더링되면 모든 빈 셀이 고체 블록이 되는 경우입니다.

대신 세트를 묘사하세요: 셀 크기, 시점, 팔레트, 그리고 필요한 타일 역할(바닥, 벽, 벽 모서리, 문, 물가 등)입니다. AI 타일셋 생성기는 요청한 셀 크기에 이미 정렬된 시트를 반환하므로 여백 계산 없이 가져올 수 있습니다.

결과물을 출발점으로 여기세요. 생성된 세트는 표면은 강하지만 연속성은 약합니다: 열여섯 번째 바닥 타일이 첫 번째와 매끄럽게 이어지는 경우는 드물고, 가장자리 타일들은 오토타일링이 연결된 지형으로 받아들이기 전에 보통 다시 칠해야 합니다.

타일 칠하기, 레이어와 충돌 추가하기

계속 편집하기 쉬운 맵은 하나가 아니라 세 개의 레이어입니다. 지면은 플레이어가 걷는 지형을 담습니다. 세부는 벽, 나무, 상자, 데칼처럼 위에 그려지는 모든 것을 담아 지면을 건드리지 않고도 다시 꾸미거나 숨길 수 있습니다. 충돌은 눈에 보이는 것을 담지 않습니다: 플레이어가 들어갈 수 없는 셀의 마스크입니다.

충돌을 지형에 구워 넣은 어두운 타일이 아니라 자체 레이어의 데이터로 유지하세요. 차단 영역이 지면 아트에 칠해져 있으면 아트를 편집하는 것이 레벨 디자인을 바꾸고 레벨 디자인을 편집하는 것이 아트를 바꿉니다. 별도 레이어가 있으면 바닥을 원하는 만큼 여러 번 다시 칠해도 벽은 있던 자리에 그대로 있습니다.

경계해야 할 실패 유형은 벽 구간에 표시되지 않은 셀 하나입니다. 마흔 타일짜리 벽에서 충돌 셀 하나가 빠지면 플레이어가 걸어 지나갈 수 있는 구멍이 되는데, 일반적인 확대 배율에서는 보이지 않습니다. 이를 잡아내는 절차: 충돌을 제외한 모든 레이어를 숨기고, 맵을 실루엣처럼 보고, 윤곽이 끊기지 않았는지 확인하세요.

오토타일링과 47타일 세트 설명

오토타일링은 주변에 무엇이 있는지에 따라 어떤 타일을 그릴지 선택하는 타일 맵 에디터의 기능입니다. 벽 모서리를 손으로 고르는 대신, 아무 벽 타일이나 칠하면 에디터가 이웃 셀을 검사하고 비트마스크를 만들어 일치하는 변형으로 교체합니다. 첫 번째 옆에 두 번째 벽을 칠하면 두 셀 모두 갱신됩니다.

이 규칙의 단순한 버전은 북, 동, 남, 서 네 이웃을 보며, 2의 4제곱인 16가지 조합을 만듭니다. 그 세트는 그리기 쉽지만 한 가지 특정한 곳에서 실패합니다: 안쪽 모서리입니다. 북쪽에 벽, 동쪽에 벽이 있고 그 외에는 아무것도 없는 바닥 셀을 생각해 보세요. 그것은 특이한 경우가 아니라 L자형 방의 내부가 어디서나 그렇게 생긴 모습입니다. 16타일 세트에는 한 셀의 북쪽과 동쪽 양쪽을 따라 가장자리를 그리는 변형이 없으므로, 떨어진 바닥 픽셀, 이중 테두리, 또는 눈에 띄는 구멍이 생깁니다.

47타일 블롭 세트는 블롭 타일셋이라고도 하며, 네 모서리를 추가합니다. 여덟 이웃을 순진하게 모두 추적하면 2의 8제곱인 256가지 조합이 되지만, 그 대부분은 중복입니다: 모서리는 그 모서리에 닿는 두 가장자리가 모두 채워졌을 때만 그림을 바꿉니다. 빈 가장자리 두 개 사이에 있는 모서리는 네 가지 상태 모두에서 동일하게 렌더링됩니다. 이 한 가지 축소를 적용하면 256가지 경우가 47개의 서로 다른 경우로 줄어들며, 그 숫자가 여기서 나옵니다.

에디터는 보통 블롭 세트를 8비트 마스크로 색인된 조회 테이블로 저장합니다: 가장자리에는 1, 2, 4, 8, 모서리에는 16, 32, 64, 128입니다. 칠할 때 에디터는 칠한 셀과 오토타일링되는 모든 이웃의 마스크를 다시 계산하므로, 한 번의 클릭으로 최대 아홉 개의 셀을 다시 쓸 수 있습니다. 실질적인 결과는 오토타일링이 자체 지형 레이어를 필요로 한다는 것입니다. 손으로 배치한 소품을 그 레이어에 섞으면 모든 오토타일 갱신이 그것들을 덮어써도 되는지 판단해야 합니다.

Tiled 맵 대 타일 맵 — 어느 것을 의미하나요?

서로 다른 두 가지 검색이 여기로 오며 원하는 것도 다릅니다. 타일 맵 에디터는 범주입니다: 타일 그리드를 칠해 맵을 만드는 모든 도구를 가리킵니다. Tiled는 그 범주 안의 특정한 프로그램 하나로, mapeditor.org에서 배포하는 데스크톱 에디터이며, 사람들은 그 프로그램을 이름으로 지칭할 때 흔히 Tiled 맵 에디터를 입력합니다.

범주를 의미한 것이라면, 이 페이지의 라이브 도구가 타일 맵 에디터이며 설치가 필요 없습니다. 브랜드를 의미한 것이라면, 아마 원하는 것은 이미 가지고 있는 파일, 즉 데스크톱 워크플로가 만들어 내는 TMX 프로젝트와 TSX 타일셋을 열어, 지금 사용하는 컴퓨터에 아무것도 설치하지 않고도 계속 작업할 수 있게 해 주는 것입니다. Tiled 대안 페이지가 이를 직접 다룹니다: 어떤 파일이 그대로 넘어오고 어떤 설정은 그렇지 않은지, 두 프로그램 사이에서 내보내기 형식이 어떻게 맞아떨어지는지.

기계적으로 차이는 문서가 어디에 사는지입니다. 데스크톱 에디터는 프로젝트를 로컬 디스크에 쓰고, 다시 열려면 그 컴퓨터에 프로그램이 설치되어 있어야 합니다. 브라우저 에디터는 문서를 세션과 브라우저 저장소에 보관하며, 다른 곳에서도 맵을 다시 만들 수 있을 만큼 내보내기가 완전해야 합니다. 그래서 내보내기 형식이 둘 사이의 진짜 다리가 되며, 다음 섹션이 바로 그것을 다룹니다.

맵 내보내기 (PNG / TMX / JSON)

세 가지 형식, 세 가지 용도. 어느 것이 가장 공식적으로 들리는지가 아니라 무엇이 그 파일을 읽을지를 기준으로 고르세요.

PNG는 평면 이미지입니다. 내보내기는 맵을 셀 크기 곱하기 맵 크기로 렌더링하므로, 32 px 셀의 40×25 맵은 1280×800 픽셀이 되며, 레이어는 하나의 이미지로 합쳐지거나 레이어마다 파일 하나로 기록됩니다. 목업, 썸네일, 메뉴 배경, 또는 아티스트와의 대화에 사용하세요. 엔진으로 넘기는 전달물로는 사용하지 마세요: PNG는 그리드도, 타일 정체성도, 충돌도 담지 않으므로, 색상 외에는 하류의 무엇도 벽과 바닥을 구별할 수 없습니다.

TMX는 Tiled의 XML 교환 형식이며 타일 도구 생태계가 공통어에 가장 가깝게 가진 것입니다. 레이어, 타일셋 참조, 타일별 속성, 오브젝트 레이어, 사용자 지정 속성을 담으며 대부분의 엔진과 변환기가 읽을 수 있습니다. 대부분의 버그를 일으키는 세부 사항이 하나 있습니다: TMX의 타일 식별자는 맵의 모든 타일셋에 걸쳐 전역이며, 타일셋마다 firstgid만큼 오프셋됩니다. 두 시트를 병합하고 그 오프셋을 잘못 잡으면, 두 번째 시트를 사용한 모든 셀이 잘못된 시트의 타일로 로드됩니다. 오류는 나지 않습니다. 그냥 잘못 보일 뿐입니다.

JSON은 대부분의 엔진과 웹 런타임이 직접 받아들이는 형식입니다. 일반적으로 레이어 목록이며, 각 레이어는 타일 인덱스의 평탄한 배열과 셀 크기를 담고, 충돌은 별도 배열입니다. 소비자가 런타임에 맵을 구성하므로 행 순서 규칙이 중요합니다: 뒤집으면 맵 전체가 상하로 반전되는데, 해안선이 있는 맵에서는 뻔히 보이고 대칭적인 던전에서는 보이지 않습니다. 빈 셀에도 정의된 값이 필요합니다. 어떤 형식은 0을, 어떤 형식은 -1을 사용하며, 잘못 고르면 모든 빈틈에 실제 타일이 들어갑니다.

맵 안으로 들어가기 (플레이 가능한 데모)

이 페이지의 플레이 가능한 데모는 The Cyclops' Island로, 같은 에디터에서 칠한 타일 맵으로 만든 아이소메트릭 픽셀 아트 게임입니다. 재생을 누르면 카메라가 맵 안으로 들어갑니다. 충돌 레이어는 벽이 되고, 지면 레이어는 캐릭터가 걷는 바닥이 되며, 세부 레이어는 위치에 따라 캐릭터 뒤나 앞에 그려집니다.

이것이 대부분의 도구 페이지가 건너뛰는 단계입니다. 맵을 칠하고 내보내면, 플레이어 크기에서 레벨을 처음 보는 순간이 다른 프로그램에서, 다른 카메라로, 빌드 후에 찾아옵니다. 제자리에서 재생하면 레벨 디자인이 1분에 열 번도 돌릴 수 있는 반복 작업이 됩니다: 복도를 칠하고, 걸어 보고, 한 타일 너무 넓다는 걸 알아차리고, 다시 칠합니다.

아이소메트릭 투영은 직교 맵이 결코 고민할 필요가 없는 한 가지를 더합니다: 그리기 순서입니다. 화면에서 아래에 있는 타일이 카메라에 더 가까우므로, 렌더러는 대략 행을 기준으로, 그다음 레이어를 기준으로 깊이 정렬을 합니다. 그렇지 않으면 캐릭터가 자신을 가려야 할 벽 위에 그려집니다. 증상은 스프라이트가 벽 뒤로 걸어갈 때 벽 꼭대기를 뚫고 나오는 것입니다. 데모에서 그런 것을 보면 원인은 충돌 마스크가 아니라 깊이 정렬입니다.

거기서부터 맵은 두 방향으로 갈 수 있습니다. 2D로 두면 플레이어 컨트롤러를 얹은 타일 맵으로 남습니다. 3D 게임 빌더로 가져가면 같은 그리드가 지오메트리가 되며, 각 셀이 바닥 슬래브나 벽으로 압출됩니다. 이것이 Mini World의 접근 방식입니다. Agent Sprite Forge는 캐릭터 쪽을 담당합니다. 어느 쪽이든 칠한 그리드는 변하지 않습니다.

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

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

FAQ