Tilesetter 대안 — 무료 온라인 타일셋 생성기 및 맵 편집기

Tilesetter는 베이스 이미지 한 장으로 타일셋을 만들고, 조립한 레벨을 Unity, Godot, GameMaker Studio 2로 내보냅니다. 이것이 이 도구의 홍보 문구이며, 실제로 훌륭합니다. 사람들을 막는 지점은 데스크톱으로 배포된다는 점입니다. 설치해야 하고, 기기마다 라이선스를 받아야 하며, 브라우저 탭에서는 실행할 수 없는 애플리케이션입니다. Tilesetter 대안을 찾고 있다면 중요한 질문은 두 가지입니다. 타일셋 생성이 여전히 제대로 작동하는가, 그리고 엔진을 열지 않고도 결과물이 움직이는 모습을 볼 수 있는가입니다.

Neta Studio는 브라우저 기반 대안입니다. 출발점은 같습니다 — 베이스 이미지 한 장이 곧바로 칠할 수 있는 그리드 정렬 타일셋이 됩니다 — 다만 재생을 누르면 레벨이 플레이 가능한 Three.js 장면으로 실행됩니다. 설치 프로그램도, 프로젝트 파일을 주고받는 왕복도, 플랫폼 게임의 점프가 타일 세 칸짜리 틈을 넘는지 확인하려고 엔진 빌드를 기다릴 필요도 없습니다.

Tilesetter가 잘하는 것

Tilesetter의 핵심 기능은 작은 베이스 이미지에서 지형을 생성하는 것입니다. 대표 타일 세 장에서 다섯 장, 보통은 중앙 채움 타일, 직선 가장자리 타일, 바깥 모서리 타일을 그리면 생성기가 나머지 세트를 만들어 냅니다. 안쪽 모서리, 가장자리 변형, 채움 조각입니다. 47조각짜리 지형 세트를 손으로 모두 그리는 일은 지루하고 일관성도 깨지지만, 베이스 이미지에서 이끌어 내면 모서리 정렬이 유지됩니다. 사람들이 실제로 도구를 바꾸는 이유가 바로 이 기능이며, 제대로 작동합니다.

나머지 절반은 레벨 구축입니다. 생성된 세트는 자동 타일 동작을 갖춘 그리드 편집기로 들어가므로, 지형을 드래그해 선을 그으면 똑같은 사각형이 줄줄이 이어지는 대신 가장자리가 자연스럽게 연결됩니다. 엔진 코드가 아니라 도구 차원에서 처리되는 자동 타일링입니다.

세 번째는 내보내기입니다. Tilesetter는 Unity, Godot, GameMaker Studio 2의 프로젝트 형식으로 직접 기록하므로, 레벨 데이터가 손으로 다시 잘라야 하는 PNG가 아니라 엔진에 맞는 타일맵으로 도착합니다. Tilesetter 워크플로에서는 이미지에서 플레이 가능한 엔진 장면까지 가는 가장 짧은 경로가 분명합니다.

대부분의 사람에게 Tilesetter가 부족한 점

설치하고 비용을 내야 하는 데스크톱 애플리케이션입니다. 라이선스 조건과 가격은 판매사가 정하며 시간이 지나면 바뀌므로, 비교 페이지를 믿기보다 원출처에서 확인하세요. 실질적인 제약은 가격보다 더 좁습니다. Chromebook, 회사가 관리하는 노트북, 또는 소프트웨어를 설치할 수 없는 기기에서 작업한다면 이 도구를 실행할 수 없습니다. 판매사가 설명하는 브라우저 버전은 없습니다.

플레이 가능한 결과물이 없습니다. Tilesetter는 레벨을 만들어 주지만, 실행되는 레벨을 주지는 않습니다. 점프 궤적이 틈을 넘는지, 혹은 타일 가장자리가 출시하려는 카메라 거리에서 잘 보이는지 확인하려면 내보내고, 엔진을 열고, 타일맵을 장면에 연결하고, 재생을 누르고, 눈으로 확인해야 합니다. 모든 설계 질문에 왕복 비용이 듭니다.

내보내기가 끝이기도 합니다. 타일 디자인을 바꾸면 시트 크기도 함께 바뀌고, 엔진은 다시 가져오고, 아틀라스는 다시 연결되며, 픽셀 오프셋을 기준으로 한 타일 참조를 모두 확인해야 합니다. 순환은 다시 생성하고, 다시 내보내고, 다시 가져오고, 다시 검증하는 것입니다. 할 수는 있지만 피드백 주기가 초가 아니라 분 단위로 측정됩니다.

Tilesetter 대 Neta Studio — 전체 비교표

아래 Tilesetter 관련 항목은 모두 해당 제품의 공개 설명을 바탕으로 작성했습니다. 가격이나 플랫폼 요구 사항처럼 숫자를 알지 못하는 경우에는 추측하지 않고 작동 방식을 설명합니다.

베이스 이미지 한 장으로 완전한 타일셋 생성하기 (라이브 데모)

이 구역의 생성기는 Tilesetter가 가장 잘 알려진 바로 그 일을 합니다. 베이스 이미지를 받아 곧바로 칠할 수 있는 그리드 정렬 타일셋을 돌려줍니다. PNG를 끌어다 놓고 셀 크기를 16, 32, 48픽셀 중 하나로 설정하면, 도구가 이를 시트와 타일 인덱스로 잘라 냅니다. 설치도, 라이선스도, 먼저 만들 엔진 프로젝트도 없습니다.

가장 먼저 문제가 생기는 것은 이미지를 나누지 못하는 셀 크기입니다. 너비가 1023픽셀인 시트에 32픽셀 셀을 지정하면 31개의 온전한 열과 31픽셀짜리 열 하나가 나옵니다. 마지막 열은 그래픽 처리 장치가 이웃 타일을 샘플링하기 때문에 이음새가 생깁니다. 무엇이든 칠하기 전에 너비와 높이가 정확히 나누어지는지 확인하세요. 도구는 조용히 반올림하지 않고 나머지를 알려 줍니다. 바로 이것이 핵심입니다.

두 번째 문제는 필터링입니다. 시트를 선형 필터링으로 샘플링하면 인접한 타일이 서로 평균화되어 모든 가장자리에 1픽셀 번짐이 남습니다. 해결책은 두 가지입니다. 엔진에서 텍스처 필터를 최근접으로 설정하거나, 내보낼 때 각 타일을 2픽셀씩 확장해 경계 픽셀이 바깥으로 반복되게 하는 것입니다. 누군가 필터 설정을 잊은 프로젝트에서도 살아남기 때문에 확장이 더 안전합니다.

그리드가 깨끗해지면 칠하는 일은 곧바로 이루어집니다. 레이어, 충돌 플래그, 오브젝트 배치는 모두 같은 그리드 위에 있고, 플레이 모드에서는 결과가 Three.js 장면으로 실행됩니다. 그리드가 감당하는 레벨 규모를 보고 싶다면, 예시 세계인 사이클롭스의 섬과 Mini World가 이 방식으로 만들어졌습니다.

• 정확한 그리드 분할너비와 높이를 셀 크기로 나눕니다. 나머지는 망가진 마지막 열에 흡수되지 않고 그대로 보고됩니다.
• 가장자리 확장모든 타일 주위에 선택적으로 2픽셀 여백을 둬서, 최근접 필터 샘플링이 이웃 타일의 픽셀을 절대 집어오지 않게 합니다.
• 타일 인덱스 매니페스트셀 좌표를 숫자 타일 식별자로 대응시키는 JSON 맵으로, 엔진 코드가 픽셀 오프셋 대신 인덱스로 타일을 지정할 수 있습니다.
• 지형 변형 생성손으로 그린 소수의 타일에서 이끌어 낸 가장자리, 모서리, 채움 변형으로, 바깥 모서리의 일관성이 유지됩니다.
• 같은 그리드의 스프라이트 소스Agent Sprite Forge가 같은 셀 크기에 맞춘 스프라이트를 내보내므로, 캐릭터와 소품 아트를 크기 조정 없이 그리드에 바로 놓을 수 있습니다.

Unity, Godot, GameMaker로 내보내기 — 나란히 비교

타일셋 작업이 보통 어긋나는 지점은 엔진으로 가져오는 단계입니다. 시트는 멀쩡한데 설정이 잘못된 것입니다. 엔진마다 요구하는 숫자 세트가 다르고, 실패 양상도 각각 다릅니다.

Unity

Texture Type을 Sprite (2D and UI)로, Sprite Mode를 Multiple로, Filter Mode를 Point로 설정하고 Generate Mip Maps를 끕니다. 픽셀 아트라면 Compression은 None으로 해야 합니다. 그다음 Sprite Editor를 열어 Slice, Grid By Cell Size를 사용하고, 셀 크기를 타일에 맞춥니다 — 16, 32, 48픽셀 중 하나입니다.

고전적인 실패는 Pixels Per Unit입니다. 32픽셀 타일에서 기본값 100을 그대로 두면 각 타일의 너비가 0.32 월드 단위가 됩니다. 타일맵 그리드가 셀당 1단위를 전제로 하면 행 경계마다 틈이나 겹침이 눈에 띕니다. Pixels Per Unit을 타일의 픽셀 크기와 같게 설정하거나, 타일맵 셀 크기를 그 역수로 설정하세요. 사람들이 자주 틀리는 또 하나의 설정은 피벗입니다. 탑다운 맵에는 Center, 타일이 지면선에 맞는 사이드스크롤에는 Bottom Left를 씁니다.

Godot

TileSet 리소스를 만들고 Tile Size를 셀에 맞추며, 시트를 가리키는 TileSetAtlasSource를 추가합니다. 시트에 여백이 있다면 자동 감지에 기대지 말고 Margin과 Separation을 명시적으로 설정하세요. Godot 4에서는 텍스처의 불투명 영역에서 타일을 채우는 옵션이 느린 수작업을 덜어 줍니다. 칠하기는 TileMapLayer 노드에서 이루어집니다.

사람들을 자주 걸리게 하는 마이그레이션 주의점이 하나 있습니다. Godot 4는 Godot 3의 오토타일 비트마스크 체계를 peering bits에 기반한 지형 세트로 대체했습니다. Godot 3 오토타일용으로 생성한 시트는 Godot 4에서 일반 타일로 가져와집니다 — 픽셀은 문제없지만 지형 연결 설정은 그렇지 않습니다. 지형 세트를 다시 만들며, 이미지를 다시 내보내는 것이 아닙니다. 또한 Rendering > Textures > Canvas Textures > Default Texture Filter도 확인하세요. 이것이 Linear라면 시트에 무엇이 들어 있든 픽셀 아트에 번짐이 생깁니다.

GameMaker Studio 2

GameMaker는 프레임 크기가 타일 크기와 같은 스프라이트를 요구하고, 그 스프라이트로 만든 Tile Set 에셋을 요구합니다. 까다로운 제약은 나누어떨어짐입니다. 스프라이트 너비가 130픽셀이고 타일 크기가 32라면 타일 세트가 거부됩니다. 크기가 정확한 배수가 될 때까지 시트를 잘라 내거나 늘리세요. 타일 세트의 Origin은 왼쪽 위이고, 칠하기는 룸 에디터의 타일 레이어에서 이루어지므로 레이어 순서가 다른 두 엔진보다 여기서 더 중요합니다.

시트의 타일 사이에 여백이 있으면 GameMaker는 스프라이트에서 그것을 추론하지 않습니다. 이 대상에 맞춰 여백 없는 시트를 내보내거나, 타일 세트를 만들기 전에 여백 있는 시트를 개별 프레임으로 나누세요.

5분 만에 Tilesetter에서 갈아타는 방법

무엇도 다시 그릴 필요는 없습니다. 타일셋은 PNG이고, 레벨은 그 PNG를 가리키는 인덱스의 그리드입니다. 둘 다 이전해도 그대로 남습니다. 유일하게 남지 않는 것은 프로젝트 형식 내보내기입니다. 워크플로에 중립적인 교환 형식이 없기 때문입니다 — 레벨은 변환하는 것이 아니라 다시 칠한다고 생각하세요.

한 화면짜리 방이라면 몇 분간 드래그하면 됩니다. 크고 여러 층인 맵이라면 반나절이 걸리지만, 그래도 시트를 처음부터 다시 만드는 것보다는 짧습니다.

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

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

FAQ