[Unity]2D 타일맵 에디터 수정/제작

2D 타일기반 게임을 만들다 보니 가장 귀찮은게 바로 맵 제작이다.

CSV파일로 만들어 파싱해 쓰는 것까진 좋았지만, CSV를 수정하고 유니티로 확인하고 다시 CSV를 수정하고....

여간 귀찮은게 아니다.

맵 에디터를 제작하자니 이것 또한 시간이 많이 걸리기에 에셋 스토어에 있는 괜찮은 무료버전을 찾아 입맛에 맞게 수정하였다.

우선 에셋 스토어로 가서 "2D map Editor"를 검색해 가격을 FREE로 맞추면 1페이지에 사진에 동그라미친 맵 에디터가 있다.

먼저 기존 에디터를 분석해보았다.

1. 프로젝트 구조

다운받아보니 여러 맵에디터가 있었는데 그 중 필요한건 PlatformerDemo라는 씬에 있었다.

여러 맵에디터에서 공통적으로 사용하는 Scripts - Functionalities내의 스크립트들과 LevelEditor 스크립트를 우선적으로 보았다.

2. 좌표(에디터)

기존 에디터의 좌표는 사진처럼 좌하단이 0.0으로 1사분면을 생각하면 될 것이다. 하지만 제작중인 게임의 맵은 4사분면으로 좌상단이 0,0으로 시작한다. 일단 이 부분은 파일이 어떠한 형식으로 저장되는지도 살펴봐야할 것 같다.

3. 저장 방식(SaveFunctionality 스크립트)

지정된 경로로 파일을 저장하는 메소드이다.

주석처리된 부분을 보면 맵을 저장할 때 바이너리포맷으로 저장하고 있어 일단 이 부분을 수정하여 어떤 방식으로 저장됬는지 확인해 보았다.

저장해보니 비어있는 부분은 "EMPTY", 채웠던 부분은 해당되는 프리팹의 이름으로 저장되는 것을 확인할 수 있었다. A1셀을 보면 앞에 0이 붙은게 좀 미심쩍어 2층까지 찍어보았다.

위에서 숫자가 찍히는 부분은 레이어 번호임을 알 수 있었다.

그리고 1층이 밑으로 내려가고 2층이 상단에 위치했다. 또 하나 문제는 1층의 1행이 옆으로 밀려있고.. 에디터의 문제인지는 모르겠지만 2층의 가로 16을 벗어난 부분에 EMPTY가 왜 찍히는지는 모르겠다.

그래도 일단 중요한 점은 만들고 있는 게임은 1층 레이어가 바닥타일을 먼저 깔아주고, 2층에 찍은 타일은 움직일 수 없는 구조물 같은 레이어로 구성되어 있다는 점이다. 선택을 해야 됬는데 현재 만들고 있는 게임의 파싱 구조를 바꾸던지 아니면 에디터를 수정해야 했다.

또 하나 더 얘기하자면 SaveLevel() 메소드를 보니 한 행(newLevel)을 Reverse() 함수를 호출해 반전시키고 있었는데 해당 함수를 주석처리 해보니 상하가 반전되어 저장되었다. 이게 1,2층이 내림차순으로 저장되는 이유 중 하나였고, 상하반전되어 저장하는 부분을 해결하고자 이 함수를 쓴 것 같았다.

수정해야 할 부분을 정리하면

 - 좌표(Scene 실행시 화면에 보이는 그리드도 수정해야 함)

 - 저장되는 방식

 - 로드되는 방식(스크립트를 보니 읽을 때 그리드에 배치될 타일의 좌표를 거꾸로 찍어주고 있었다.)

 - 내가 사용할 MapSprite의 적용

정리할 내용을 바탕으로 하나씩 해결해 보았다.

1. 좌표 수정(GridOverlay.cs)

onPostRender() 함수에서 그리드를 그려주고 있다. 원하는 방식은 4사분면의 형태니 단순히 -1을 곱하였다. 단순히 여기서 끝나면 안되고 실제로 타일이 그려주는 위치도 수정해주어야 한다.

간단히 예를 들면 LevelEditor.cs에서 타일을 생성하고(사용자가 툴을 이용해) 지울 때다. 그린 타일을은 3차원 배열에 저장되고 있는데 수정 전은 양수 값의 좌표만 들어오니 걱정할 일이 없다. 하지만 현재 수정한 y의 좌표는 음수이다. 배열 인덱스에 음수가 들어가지 않도록 해당 메소드들을 찾아 y좌표값에 -1을 곱해주었다.

밑은 예시 사진이다.

추가로 LoadFunctionality 스크립트에서도 이와 같은 경우가 있기 때문에 수정해야 한다.

2. 저장 방식 수정

원하는 CSV형식은 맵 사이즈(Width, Height)가 있고, 1층, 2층, 3층... 형태로 순서대로 찍히는 형태이다.

뒤집어 저장할 일도 없기 때문에 Reverse() 부분의 코드도 지웠다. 이 부분은 크게 어렵지는 않았다.

로드하는 부분도 크게 어려운 부분은 없고 읽어들인 CSV파일을 바탕으로 알맞은 타일을 생성해서 해당 좌표에 배치(반전시키지않고)하는 것 뿐이니 이 부분은 생략하겠다.

3. 맵 스프라이트 변경

Tileset.cs를 보면 딸랑 Tiles를 담는 배열구조체 변수만 있었다. 기존에디터는 여러 타일들이 프리팹으로 되어있고 이 프리팹을 담는 하나의 프리팹이 있는  걸 확인할 수 있었다.

이 부분을 삭제하고 싶었는데 유니티나 코드상에서 찾기가 힘들어 어떻게 해야할까 고민하는 찰나에 스터디에 동생이 삭제하지 않고 그냥 다른걸로 로드시키는 방식으로 간편하게 해왔길래 동생걸로 쓰기로 결정했다.

그냥 Sprite들을 읽어 변수에 추가하여 사용하였다.

TilePrefab을 하나 만들어 이 프리팹의 Sprite만 교체하여 Tiles에 추가해주고 있다.

현재 이렇게 잘 사용하고 있다.

 - 느낀점

그래픽 작업하는 사람이 없어 직접 오픈 리소스를 구하고 csv로 일일이 확인해 가면서 작업하다보니 여간 불편한게 아니였다.

이러한 툴을 우리 프로그래머가 만들어주지 않고, "그냥 숫자 잘 찍고 실행해가면서 확인하세요" 이러면 분명히 언젠가는 싸움이 날게 뻔하다.

물론 나도 만들어야지 만들어야지 하다 귀찮아서 안 만들었다. 결국은 기존에 나와있는 에디터를 맞게 수정해서 쓰고 있지만 언젠가 필요에 따라 만들어야 하지 않을까 싶다.

수정된 에디터는 빠른 시일내로 좀 정리해서 github에 올리겠다.