타일 맵 에디터 온라인 — Tiled를 대체하는 무료 브라우저 도구

타일 맵 에디터는 크게 그린 배경 한 장 대신, 반복되는 작은 타일 이미지 묶음으로 레벨을 조립하는 프로그램입니다. mapeditor.org의 데스크톱 애플리케이션인 Tiled는 이 아이디어의 기준 구현입니다. 무료이고, 오프라인에서 동작하며, 다양한 그리드 유형을 유연하게 지원하고, 출시된 프로젝트 상당수가 아직도 .tmx 파일을 품고 있을 만큼 오래되었습니다. 이 페이지는 아무것도 설치하지 않고 같은 페인팅 작업 흐름을 원하면서, 재생을 눌러 방금 그린 맵 안을 걸어 다니고 싶은 경우를 다룹니다.

Neta Studio는 브라우저 탭에서 에디터를 실행합니다. 타일셋을 가져오고, 타일 크기를 설정하고, 지면 레이어와 디테일 레이어를 칠하고, 충돌을 표시한 다음 재생합니다. 그리드는 Three.js로 렌더링되는 3D 세계가 되고, 조종 가능한 캐릭터와 실제 충돌이 함께합니다. 내려받을 것도, 여러 기기 사이에서 동기화할 프로젝트 폴더도 없으며, 다른 사람에게 건네면 같은 맵을 열게 되는 링크만 있습니다.

Tiled와 온라인 타일 맵 에디터 비교

mapeditor.org의 Tiled는 많은 것을 잘합니다. 무료 오픈 소스이고, 오프라인에서 실행되며, 수년째 직교, 등각, 스태거드, 육각 그리드를 지원합니다. 레이어, 사각형·타원·다각형·폴리라인을 담는 오브젝트 레이어, 사용자 정의 속성, 템플릿, 타일 애니메이션, 충돌 도형, 지형/왕 세트가 모두 들어 있습니다. TMX/TSX XML과 JSON 변형을 읽고 쓰며, 이 형식은 대부분의 엔진용 내보내기 도구가 존재할 만큼 오래되었습니다. 여러분의 파이프라인이 이미 .tmx를 소비한다면, Tiled가 그것을 저작하기에 가장 안전한 곳입니다.

걸림돌은 편집 자체가 아닙니다. 편집을 둘러싼 모든 것입니다. Tiled는 데스크톱 애플리케이션이라, 프로젝트를 만지는 모든 기기에 설치가 필요합니다. 타일셋은 보통 상대 경로가 담긴 외부 .tsx 파일로 참조되는데, 폴더가 이동하거나 협업자의 체크아웃 위치 깊이가 달라지는 순간 깨집니다. 재생 버튼도 없습니다. 내보낸 다음, 맵이 제대로 되는지 확인하려고 두 번째 프로그램을 열어야 합니다. 공유하려면 프로젝트를 압축해서 상대편에서 경로가 맞기를 바라는 수밖에 없습니다.

온라인 타일 맵 에디터는 이 세 가지를 바꾸고, 그 외에는 아무것도 바꾸지 않습니다. 페이지에 에디터가 함께 제공되므로 설치가 없습니다. 타일셋과 레이어가 다시 열 수 있는 하나의 프로젝트 안에 있으므로 파일을 이리저리 옮길 필요가 없습니다. 그리고 맵을 그린 탭에서 바로 플레이할 수 있으므로 내보내서 테스트하는 반복이 없습니다. 포기하는 것도 분명합니다. 네이티브 플러그인, 스크립트 맵이 없고, 아주 큰 프로젝트는 데스크톱보다 브라우저에서 더 무겁습니다. 컴파일된 엔진으로 출하하는 대신 눈으로 보고 걸어 다녀야 하는 맵이라면, 이 맞바꿈은 충분히 값어치가 있습니다.

타일 맵이란 무엇인가 (그리고 이 이름이 모두를 헷갈리게 하는 이유)

이 단어는 두 가지 역할을 하고, 서로 충돌합니다. 대문자로 쓰는 Tiled는 제품 이름입니다. 소문자로 쓰는 타일 맵은 반복되는 타일로 만든 모든 맵을 뜻합니다. Tiled 안에서 타일 맵을 만들 수도 있지만, Godot의 TileMap 노드, Unity의 Tilemap 시스템, Phaser, 사용자 정의 가져오기 도구, 또는 여기에서도 Tiled를 한 번도 열지 않고 만들 수 있습니다.

이런 갈림 때문에 타일 맵 에디터를 검색하면 서로 다른 두 곳에 도착합니다. 절반은 특정 데스크톱 애플리케이션과 그 파일 형식을 원합니다. 나머지 절반은 타일 기반 맵을 만들고 싶을 뿐, 어떤 도구가 하든 상관하지 않습니다. 둘 다 타당합니다. 두 번째 그룹이라면, 질문은 어느 에디터의 기능 목록이 더 긴가가 아니라, 어느 쪽이 플레이 가능한 결과를 가장 빨리 눈앞에 놓아 주는가입니다.

구조적으로 보면 타일 맵은 작은 데이터입니다. 타일셋 이미지, 타일 너비와 높이, 타일 단위의 그리드 크기, 그리고 레이어마다 0이 비어 있음을 뜻하는 타일 번호 배열 하나입니다. 그 위에 사각형과 폴리라인을 담는 선택적 오브젝트 레이어, 그리고 키/값 문자열 속성 표가 있습니다. 이게 구조의 전부입니다. 에디터는 그 배열을 편집하기 위한 좋은 인터페이스이며, 이것이 형식이 도구 사이를 옮겨 다니는 유일한 이유입니다.

온라인에서 첫 타일 맵 그리기

첫 화면은 세 구역으로 나뉩니다. 왼쪽의 타일셋 패널, 가운데의 맵 캔버스, 오른쪽의 레이어 목록입니다. 먼저 맵을 만드세요. 직교 그리드를 선택하고, 그리드를 40 곱하기 30 타일로 설정하고, 타일 크기를 타일셋에 정확히 맞게 설정하세요. 32 곱하기 32 픽셀이라면 1280 곱하기 960 픽셀 캔버스가 되는데, 작업하기 적당한 크기이고 칠하는 동안에도 반응이 유지됩니다.

그다음 타일셋 이미지를 가져옵니다. 가져오기를 망가뜨리는 두 가지 설정은 여백과 간격입니다. 여백은 시트 전체를 둘러싼 빈 테두리이고, 간격은 타일 사이의 틈입니다. 시트를 내보낼 때 둘 중 하나라도 있었다면 숫자를 입력하세요. 건너뛰면 모든 열이 한두 픽셀씩 밀려서 맵이 미묘하고 짜증 나게 어긋나 보입니다. 그다음부터는 그냥 칠하기입니다. 지면 레이어를 채우고, 그 위 레이어에 디테일을 더하세요.

타일 맵 예시 — 지금 바로 열 수 있는 맵

여섯 개의 장면이 스크린샷이 아니라 플레이 가능한 맵으로 제공됩니다. 각각 브라우저에서 열리고 캐릭터를 몰고 지나갈 수 있는데, 이것이 타일 맵이 제대로 작동하는지 확인하는 유일하게 믿을 만한 방법입니다.

그중 셋은 완전한 프로젝트입니다. 나머지는 각각 하나의 메커니즘을 보여 주기 위해 에디터 안에 있는 작은 데모 맵입니다. 레이어, 충돌, 타일 크기가 어떻게 구성되었는지 글로 읽는 대신 직접 보고 싶을 때 열어 보세요.

브라우저로 TMX / 타일셋 가져오기

가져오기는 변환기가 아니라 파서입니다. 맵 요소에서 방향, 너비, 높이, 타일 너비와 높이를 읽고, 그다음 타일셋 항목에서 각 타일셋의 첫 타일 번호와 내장 이미지 또는 외부 .tsx 참조를 읽습니다. 그런 다음 각 레이어를 순서대로, 타일 데이터와 함께 읽습니다. 중요한 인코딩은 CSV와 base64이며, gzip이나 zlib 압축이 있든 없든 처리합니다. 우리가 해독하지 못하는 인코딩을 파일이 사용하면, 빈 그리드를 불러오는 대신 가져오기를 멈추고 그 이름을 알려 줍니다.

살아남는 것은 구조적인 부분입니다. 타일셋 참조는 업로드한 이미지를 가리키도록 다시 지정되므로, 데스크톱 프로젝트의 외부 .tsx 경로는 따라가는 대신 대체됩니다. 타일 크기, 여백, 간격은 그대로 넘어옵니다. 레이어 순서, 표시 여부, 불투명도도 그대로 넘어옵니다. 타일 번호는 각 레이어 안에서 상대 위치를 유지하며, 이것이 가져온 뒤에도 맵이 같아 보이게 합니다. 오브젝트 레이어는 사각형과 다각형으로 도착하고, 그 속성은 키/값 문자열로 평탄화됩니다. 선언된 타일 애니메이션은 유지됩니다.

살아남지 못하는 것은 코드였던 모든 것입니다. Tiled는 자바스크립트 확장, 사용자 정의 속성 클래스, C++ 플러그인을 지원하지만, 어느 것도 브라우저 탭에서는 실행되지 않습니다. 스크립트로 생성된 맵은 여기서는 그 출력 타일일 뿐입니다. 사용자 정의 속성 유형은 문자열로 격하됩니다. 청크 저장을 쓰는 무한 맵은 고정 그리드로 평탄화되어, 아주 큰 맵에서 메모리 동작이 달라집니다. 그리고 모든 타일이 개별 PNG인 이미지 모음 타일셋은 동작하지만 타일마다 이미지 요청이 하나씩 듭니다. 맵이 플러그인에 의존한다면, Tiled에서 계속 저작하세요.

무료 Tiled와 유료 Tiled

Tiled는 무료입니다. 오픈 소스 데스크톱 소프트웨어이고 비교할 유료 등급이 없으므로, 무료 Tiled와 유료 Tiled를 설명하는 페이지는 사실 다른 것, 보통 상용 타일셋 팩이나 엔진에 포함된 에디터를 설명하는 셈입니다. 우리는 Tiled가 돈을 받는다고 주장하지 않습니다. 실제로 그렇지 않으니까요.

진짜 갈림은 설치 대 무설치입니다. Tiled는 모든 기기에 내려받기를 요구하고, 폴더가 이동하면 깨지는 상대 경로로 타일셋을 유지하며, 내장 플레이 테스트가 없어서 내보낸 뒤 다른 프로그램을 열어야 합니다. 브라우저 에디터는 탭 하나만 요구하고, 프로젝트를 한곳에 유지하며, 같은 창에서 맵을 플레이합니다. 이것이 맞바꿈이고, 가격과는 아무 관계가 없습니다.

데스크톱이 이기는 부분도 있습니다. 플러그인, 스크립트 맵, 네트워크 없이 작업하기, 레이어가 많은 아주 큰 맵은 모두 데스크톱의 강점이며, 아니라고 하는 것은 정직하지 않습니다. 파이프라인이 이미 .tmx를 소비하고 그것을 유지하는 사람들이 있다면 Tiled에 머무르세요. 맵을 보여 주거나, 링크로 공유하거나, 에디터를 절대 설치하지 않을 사람이 걸어 다녀야 할 때 브라우저 에디터를 사용하세요.

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

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

FAQ