2D MMORPG 만들기 - 1 (타일맵 에디터 구현)

맵부터 만들자!

일단 빠르게 시작하기 위해 유니티에서 기본적으로 제공되는 타일맵을 사용하고자 했는데, 서버에서 지형을 판단하고 동기화하기 위해서는 자체 포맷을 만들어서 직렬화하는 편이 더 낫겠다고 판단했다.

그래서 타일맵 에디터를 만들기로 결심했다.

…그렇게 연휴를 모두 소진(?)했다. (절망)

애셋 추출과 포맷 분석

나도 이번에 알게 된 사실인데, 메이플스토리는 데이터 파일의 구조가 사용자들에 의해 거의 완전하게 역공학(리버스 엔지니어링) 되어 문서화되어있다. 그래서 ‘위컴알’이라는 프로그램으로 간편하게 타일맵 애셋을 추출할 수 있었다.

하지만, 타일맵 에디터를 만드는 것은 다른 일이다. ‘위컴알’에는 맵을 렌더링하는 기능은 있지만, 이는 이미 배치된 타일들의 정보를 읽어 렌더링하는 것이기 때문에 각 타일 파츠가 어떤 역할이고 어떤 규칙으로 연결해야하는지 알기는 어렵다.

그래서 다방면으로 타일 애셋들을 분석해 본 결과, 이런 결론을 얻을 수 있었다.

• 기본 그리드의 크기는 90 * 60이다.
• 타일 파츠는 아래와 같이 구분된다.
  • bsc: 지형 중앙 (90 * 60을 가득 채움)
  • ed: 지형의 꼭짓점 마감 (혹은 ‘인내의 숲’ 등에서 활용되는 최소 크기 지형)
    • U: 위쪽 마감 (혹은 최소 크기 지형의 윗면)
    • D: 오른쪽 마감 (혹은 최소 크기 지형의 아랫면)
  • en: 지형의 상하좌우
    • H0: 지형의 윗면
    • H1: 지형의 아랫면
    • V0: 지형의 왼쪽 옆면
    • V1: 지형의 오른쪽 옆면
  • sl: 경사
    • LU: ↗경사의 윗면
    • RU: ↘경사의 윗면
    • LD: 경사진 왼쪽 아랫면 마감
    • RD: 경사진 왼쪽 윗면 마감

그리하여 분석된 구조를 영상으로 만들어보았다.

상상도 못한 정체

그런데 뭔가 아귀가 맞지 않았다. 90 * 60을 한 칸으로 하여 배치하다보면 이 방향이 정답이라고 생각되지 않았다. 특히, 경사를 배치하기가 애매했다. 며칠 동안 이 부분에 달라붙어봤는데 결론이 나지 않았다.

그러던 중, 메이플스토리의 리소스를 사용해 게임을 제작할 수 있는 ‘메이플스토리 월드’가 떠올라 직접 실행해보았다.

재미있는 사실을 알 수 있었는데, 메이플스토리 월드의 타일맵 에디터는 90 * 60을 9칸으로 나누어 처리한다는 것이다. 여기에서 힌트를 얻어, 여러가지 엣지 케이스들을 분석해 아래와 같은 에디터를 완성했다.

에디터에서 만든 맵은 (일단은) JSON 포맷으로 직렬화/역직렬화가 가능하며, 씬에서 불러오는 것도 가능하다.

여기에 너무 많은 시간을 쓰긴 했지만, 재미있는 구현이었다. 이제 간단한 로그인이나 좌표 동기화 같은 것부터 차근차근 구현해나가도록 하겠다.