MapEditor 개요

GN2 Map Studio의 MapEditor는 폴리곤 랜드, 경로, 스탬프, 라벨을 조합해 세계를 구성하고, JSON으로 내보내 팀과 공유할 수 있는 스튜디오급 에디터입니다.

에디터 바로가기: /MapEditor · 문서 인덱스: /Documents

빠른 시작

  1. 자산 로드: 페이지 로드 시 AssetManager.loadAll()로 텍스처/타일이 준비됩니다.
  2. 캔버스 준비: 기본 1100x720 캔버스가 표시됩니다. 사이즈는 사이드바 Map Size에서 조정 후 Apply Size 클릭.
  3. 도구 선택: 사이드바 버튼 클릭 → MapEngine.setTool(type, value) 호출로 활성화됩니다.
  4. 그리기/배치: 캔버스 클릭/드래그로 랜드(폴리곤), 라우트, 스탬프, 라벨을 배치합니다.
  5. 저장/불러오기: Save MapexportMap() 결과 JSON 다운로드. Load Map → JSON 선택 후 importMap으로 복원.
  6. 새 맵: Clear Map 클릭 시 확인 후 기본 크기(800x600)로 초기화.

캔버스 & 내비게이션

  • 패닝: Space 키를 누른 채 드래그 → #isPanning으로 스크롤 이동.
  • 크로스헤어 모드: 기본 커서. 도구 선택 시 클릭/드래그로 적용.
  • 랜드(폴리곤): Landmass (Poly) 클릭 후 포인트를 순서대로 찍어 영역 생성. 다른 도구로 바꾸면 자동 마감(#finishPoly).
  • 라우트: Route 선택 후 드래그하면 대시 스타일 경로가 추가됩니다.
  • 렌더 스케일: #resize()가 DPR에 맞춰 캔버스를 스케일링해 좌표 오차를 방지합니다.

도구 & 사이드바 이벤트

  • 랜드/라우트/라벨: tool-changeMapEngine.setTool(type, value).
  • 스탬프: 산/나무/성/위험/포트/X 마크 클릭 후 캔버스 클릭으로 배치.
  • 사이즈 변경: map-resizeresizeCanvas(width,height).
  • 새 맵: map-newresetMap(width,height) (기본 800x600).
  • 저장/불러오기: map-save/map-load → JSON 직렬화/역직렬화.

저장 · 불러오기

`main.js`는 exportMap() 결과를 Blob으로 만들어 파일을 다운로드하며, JSON을 불러올 때 importMap을 호출합니다.

Tip: 중요한 버전은 서로 다른 파일명으로 내보내 백업을 유지하세요.

단축키 & 모드

  • Space: 패닝 모드 (드래그 이동)
  • Ctrl: 이동 모드. 스탬프/라벨/경로를 드래그로 옮길 수 있습니다.
  • 도구 버튼 재클릭: 랜드 모드에서 비활성화하면 폴리곤이 마감됩니다.

문제 해결

  • 좌표 오프셋: 브라우저 줌/반응형으로 좌표가 어긋나면 리사이즈를 한 번 클릭하거나 창 크기를 변경해 DPR 스케일을 재적용하세요.
  • 폴리곤이 안 닫힐 때: 도구를 다른 것으로 전환해 자동 마감 후 다시 선택하세요.
  • JSON 불러오기 실패: 유효한 JSON인지 확인 후 다시 시도하세요.