게임 전용 타일맵 에디터 - 2D 타일맵 맵 툴 & JSON·PNG·SVG 렌더링 스튜디오

게임 전용 타일맵 에디터는 별도의 인스톨 없이 웹 브라우저에서 2D 레트로 및 모던 게임의 레벨 맵을 설계하고, 충돌 영역 설정과 함께 JSON·PNG·SVG 데이터를 클립보드 복사 및 다운로드할 수 있는 웹 기반 개발 도구입니다. 스위스 인터내셔널 타이포그래픽 그리드 테마 기반의 직관적인 UI를 제공하여 게임 개발자와 인디 개발자가 타일 맵 제작 시간을 대폭 단축할 수 있도록 돕습니다.

🌟 주요 기능 및 특장점

1. 모듈형 멀티레이어 맵 편집

• 4단계 표준 레이어 구성: 배경(Background), 지형(Terrain Ground), 오브젝트/장식(Objects/Deco), 충돌 메타 데이터(Collision) 레이어로 분류하여 맵을 체계적으로 구조화할 수 있습니다.
• 레이어 제어 기능: 각 레이어별 투명도(Opacity) 조절, 표시/숨김 토글 및 활성 레이어 즉시 전환을 지원합니다.

2. 다양하고 자유로운 그리드 & 타일 세트

• 타일 사이즈 변경: 8×8, 16×16, 32×32, 64×64 픽셀 단위로 타일 규격을 자율 설정할 수 있습니다.
• 3가지 기본 테마 타일셋: 자연/지형(Overworld & Nature), 성/던전(Castle & Dungeon), 사이버펑크/SF(Cyberpunk & Sci-Fi) 픽셀 아트 타일을 제공합니다.
• 커스텀 픽셀 타일 생성기: 픽셀 페인트 모달을 열어 나만의 타일을 직접 도트 그래픽으로 그리고 타일셋 팔레트에 추가할 수 있습니다.

3. 강력한 5가지 드로잉 툴 & 히스토리

• 브러시(Brush): 단일 타일 칠하기 [단축키: B]
• 직사각형 박스(Rect): 영역 드래그 칠하기 [단축키: R]
• 버킷 채우기(Fill): 플러드 필 타일 채우기 [단축키: F]
• 지우개(Eraser): 배치된 타일 제거 [단축키: E]
• 스포이드(Picker): 캔버스 타일 선택 추출 [단축키: I]
• 실행 취소/다시 실행(Undo/Redo): 최대 30단계의 히스토리 스택 [단축키: Ctrl+Z / Ctrl+Y]

4. 3가지 내보내기 (JSON / PNG / SVG) & 즉시 복사

• 📄 JSON Export: Tiled 맵 에디터 호환 2D 매트릭스 배열, 타일 레이어 구성, 충돌 메타 데이터 및 타일 속성 포함. (원클릭 클립보드 복사 & file download 지원)
• 🖼️ PNG Export: 캔버스에 그려진 타일맵 전체를 고해상도 픽셀 이미지로 렌더링하여 PNG 다운로드 및 클립보드 복사 제공.
• 📐 SVG Export: 타일 구성 요소와 그리드 라인을 벡터 스케일 XML 구조로 내보내어 확대/축소 시 손실 없는 일러스트 데이터로 복사 및 저장.

🎯 대상 사용자 & 활용 사례

대상 사용자

• 2D 인디 게임 개발자: Unity, Godot, Phaser 3, PixiJS, HTML5 Canvas 기반 게임의 타일 맵을 빠르게 기획하고 매트릭스 데이터를 추출하려는 개발자.
• 레벨 디자이너: 게임 스테이지 레이아웃과 벽/충돌(Collision) 구역을 시각적으로 빠르게 스케치하고 프로토타이핑하려는 디자이너.
• 픽셀 아티스트 & 학생: 도트 타일맵 조합 연습 및 2D 게임 개발 리소스 제작 학습자.

활용 사례

• RPG 게임의 탑다운(Top-down) 마을, 던전 맵 레이아웃 구성
• 사이버펑크 2D 플랫포머 게임의 레이저/벽면 충돌 데이터 생성
• 웹 게임 및 모바일 2D 게임용 JSON 매트릭스 데이터 즉시 클립보드 복사 후 코드 삽입

📖 사용 방법

1. 맵 크기 및 타일 규격 설정: 상단 툴바에서 TILE SIZE(8/16/32/64px) 및 MAP COLS/ROWS를 입력하고 RESIZE MAP 버튼을 누릅니다.
2. 타일셋 및 타일 선택: 좌측 패널(01 // TILESET PALETTE)에서 테마를 선택하고 사용할 타일을 클릭합니다.
3. 레이어 지정: 우측 패널(04 // LAYER MANAGER)에서 타일을 그릴 레이어(Ground, Objects, Collision 등)를 선택합니다.
4. 캔버스에 그리기: 캔버스 뷰포트에서 마우스 드래그로 타일을 그립니다. (단축키 B, R, F, E 활용)
5. 데이터 익스포트 & 복사: 우측 하단(05 // DATA EXPORT)에서 JSON, PNG, SVG 카드 중 원하는 포맷의 📋 COPY 또는 💾 DOWNLOAD 버튼을 클릭합니다.

❓ 자주 묻는 질문 (FAQ)

Q1. 익스포트한 JSON 데이터를 유니티(Unity)나 고도(Godot) 엔진에서 사용할 수 있나요?

네, 내보낸 JSON 파일에는 맵 차원(width, height), 타일 크기(tilewidth, tileheight), 그리고 각 레이어의 1차원/2차원 타일 ID 매트릭스 배열이 포함되어 있어 파싱 스크립트로 바로 불러올 수 있습니다.

Q2. 캔버스에 직접 그린 타일을 복사하거나 이미지로 저장할 수 있나요?

네, 📋 COPY PNG 또는 📋 COPY SVG 버튼을 누르면 캔버스 렌더링 결과물이 시스템 클립보드에 이미지/XML 데이터로 저장되어 카카오톡, 피그마(Figma), 깃허브 등에 바로 붙여넣을 수 있습니다.

Q3. 인터넷 연결이 없는 상태에서도 타일맵 에디터를 사용할 수 있나요?

네, 본 앱은 100% 클라이언트 사이드 HTML5 Canvas 및 Pure JavaScript로 동작하므로 브라우저 로딩 후 네트워크 연결 없이 완전하게 작업할 수 있습니다.

⚠️ 제한 사항

• 생성 가능한 최대 맵 크기는 브라우저 메모리와 렌더링 성능을 고려하여 64×64 타일 이내를 권장합니다.
• 클립보드 PNG 복사 기능은 일부 구형 브라우저 환경에서 보안 정책에 의해 text-fallback으로 전환될 수 있습니다.