[Cocos Creator] Tiled Map 정복하기 (2) - Tiled Map Editor 사용하기

Tiled Map Editor 사용하기

이번장에는 타일맵 에디터인 Tiled 를 사용하여 맵을 생성하는 방법을 해보겠다. Cocos2d 는 Tiled 에서 TMX 형식으로 저장된 맵을 지원하고 있다. Cocos2d 에서도 지원을 하고 있으니 그럼 본격적으로 타일맵을 만들어보자.

Map 생성

Tiled 에디터를 실행해보자. 그럼 아래 그림과 같이 뜰것이다. 

처음에는 우리가 만든 파일이 없으니 새로운 맵을 생성해야한다. 첫번째 버튼인 새로운 맵을 클릭하자.

클릭하면 위와 같은 화면이 나올것이다. 첫번째 구도는 맵의 타입을 정할 수 있다. 맵의 타입은 정사각형 (Orthogonal), 마름모형 (Isometric), 육각형 (Hexa) 타일의 맵을 선택할 수 있다. 우리는 정사각형 타일의 모양으로 맵을 만들것이기 때문에 Orthogonal 로 설정한다. 그리고 맵사이즈를 정하고 타일 크기를 지정한다. 테스트는 간단하게 960 * 640 크기의 배경을 만들어보기위해 너비는 30, 높이는 20 타일로 지정한다.

설정이 끝났으면 다른 이름으로 저장을 클릭하여 저장을 하면 아래와 같이 화면에 나타난다.

맵을 만들기 위해 기본 틀은 완성이 됬다. 이제 맵을 만들기 위한 타일들을 불러와보자.

Tileset 불러오기

타일셋은 우리가 맵을 만들기 위해서 필요한 타일들의 집합체이다. 맵애 필요한 타일들을 하나로 묶어서 png 파일로 만들어 타일셋으로 불러오면 하나로 묶은 파일을 여러개의 타일들로 다시 분할해서 맵에 적용을 할수가 있다. 

그럼 타일셋을 우리가 만들 맵에 추가하자. 위의 이미지에서 오른쪽 하단에 있는 New Tileset 버튼을 클릭하자.

클릭하면 위와 같은 화면이 뜰것이다. 그럼 찾아보기를 클릭하여 타일을 불러오자. 이 과정을 학습하기 위해 Tiled 공식 홈페이지에 있는 github 에서 이미지를 다운로드 하자.

https://github.com/bjorn/tiled/tree/master/examples

우리는 이미지중 tmw_desert_spacing.png 이라는 파일을 사용할 것이다. 이 파일을 사용하기 위해서는 여백과 간격을 설정해줘야한다.

여백은 첫 타일을 찾을 때 여백만큼 무시하고 타일을 읽을지 정하는 것이다. (너비 높이 모두)

간격은 다음 타일 데이터를 얻기 위해 실제 타일 픽셀을 읽은 후 몇 간격만큼 띄우고 다음 타일픽셀을 읽는지의 정도다. (너비 높이 모두)

tmw_desert_spacing.png 파일을 살펴보녀 각 타일의 주위에 1픽셀의 검은색 테두리가 있어서 여백과 간격을 1로 설정한다.

다른 이름으로 저장을 클릭하면 타일이 타일셋 창에 표시된다. 이제 우리는 이 타일들을 가지고 맵을 만들수가 있다.

Tiled Map 만들기

맵을 만들기 위한 타일도 전부 불러왔으니 타일을 만들어보자. 타일셋을 살펴보면 텍스쳐가 여러개의 줄로 나눠져 있다. 여러개의 줄로 나눠져있는 하나 하나를 타일이라고 하고 우리는 이 타일을 이용하여 맵을 만들것이다. 타일셋에 있는 타일중 1개를 클릭해보자. 이제 해당 타일을 맵에 추가할 수 있다. 상단에 툴에 보면 스탬프 모양을 하고 있는 스탬프 브러쉬 가 아래의 이미지처럼 있다 해당이미지를 클릭하자. (툴의 브러쉬 사용법은 따로 포스팅을 하겠다.)

클릭하면 우리는 전에 클릭했던 타일을 스탬프처럼 맵에 찍을수가 있다.

다른 타일들도 클릭하여 한번 추가해보자. 이전에 붙인 타일에 클릭하면 덮어 쓰여진다.

이제 사용하는 법을 알았으니 제대로된 맵을 만들어보자. 필자는 아래와 같이 맵을 만들어 보았다.

현재 내가만든 맵전체를 미니맵으로도 확인할 수 있다.

맵을 완성시켰으니 저장하고 Cocos Creator 에서 완성된 맵을 불러와보자. Creator 파일을 추가하고 아래와 같이 노드트리를 구성하자. TiledMap은 빈 노드로 구성을 한다.

구성이 끝나면 TiledMap 을 클릭하여 TiledMap 컴포넌트를 추가하자.

맵을 불러오기위한 틀은 완료가 되었다. 이제 저장한 Cocos Creator Asset에 파일을 추가하자. 이때 타일맵을 불러오기위해선 3개의 파일이 동일한위치의 디렉토리에 있어야한다.

타일 png 파일

타일셋 파일

타일맵 파일

우리가 만들었던 파일로 예를 들면 아래의 3개의 파일이 필요하다.

tiled_map_test.tmx

tmw_desert_spacing.png

tmw_desert_spacing.tsx

이3개의 파일을 동일한 디렉토리에 담아서 Cocos Creator Asset에 추가하자.

이제 노드트리에 있는 TiledMap 노드에 tiled_map_test 파일을 추가하면 맵이 화면에 보일것이다.

실행을 해도 잘동작한다.

---

참고

• http://blog.naver.com/PostView.nhn?blogId=game_studyz&logNo=220854277902&parentCategoryNo=&categoryNo=14&viewDate=&isShowPopularPosts=false&from=postView

• https://www.raywenderlich.com/29458/how-to-make-a-tile-based-game-with-cocos2d-2-x

Tiled Map 정복 시리즈

• Tiled Map 정복하기 (1) - Tiled Map Editor 설치하기
• Tiled Map 정복하기 (2) - Tiled Map Editor 사용하기
• Tiled Map 정복하기 (3) - Object Layer 추가하기
• Tiled Map 정복하기 (4) - Object 이동하기
• Tiled Map 정복하기 (5) - 충돌체 구현
• Tiled Map 정복하기 (6) - Tile Map 제거