[Phaser3] Survival Game(2-1) - Tiled Map Editor 사용하기

🐣 일하면서 공부하기

개발자 린다씨 2023. 2. 5. 14:42

Tiled Map Editor 사용하기

이전 포스팅에서 Tiled Map Editor 툴을 다운로드해서 설치했습니다.

이제 새로운 맵을 만들어보겠습니다.

Tiled를 처음 실행하면 다음 창이 표시됩니다.

Project → Save Project as... 를 선택하여 새 프로젝트 파일을 저장합니다. 권장 위치는 프로젝트의 루트이지만 원하는 위치에 배치할 수 있습니다.

새 Map을 만들려면 New Map... 을 클릭합니다.

그러면 다음과 같은 팝업창이 뜹니다.

여기에서 초기 맵의 크기, 타일 크기, 방향, 타일 레이어 형식, 타일 렌더링 순서 및 맵이 무한인지 여부를 선택합니다.

저는 Tile layer format은 Base64(uncompressed)로 했고, Width와 Height는 16 tiles로 잡고 OK 버튼을 눌렀습니다.

버튼을 누르면 타일 그리드가 표시되고 초기 타일 레이어가 맵에 추가됩니다.

이제 타일을 사용하기 위해서 타일셋을 추가해 보도록 하겠습니다.

File → New → New TileSet...을 선택하여 새 타일셋 팝업창을 엽니다.

타일셋을 불러오기에 앞서 아래의 사이트에서 원하는 이미지를 다운로드합니다.

RPG Nature Tileset - Seasons by Stealthix

32x32px Tileset for outdoor areas in your RPG (Now with Snow and Autumn!)

stealthix.itch.io

사이트에 들어가서 스크롤을 내리면 Download라는 글 제목 아래 Download Now라는 파란색 버튼이 있습니다.

해당 버튼을 클릭합니다.

그럼 다음 팝업창이 뜨는데, 돈 얘기가 나옵니다.(사실 저도 처음에 보고 놀라서😨 그냥 Tiled 공식 사이트 github에 있는 이미지를 다운로드할까 고민했었습니다.)

가볍게 무시하시고 No thanks, just take me to the downloads를 클릭합니다.

클릭하면, 아래와 같은 창이 열립니다.

3개의 이미지 파일 중 다운로드하고 싶은 파일 옆의 Download 버튼을 클릭합니다.

그럼 해당 이미지의 다운로드가 진행됩니다.(만약 Opening 어쩌고의 팝업창이 뜨면 OK 버튼을 누르면 됩니다.)

다운로드가 완료되었으면 다시 Tiled로 돌아와서 Browse... 버튼을 클릭하고 다운로드한 이미지 파일을 선택합니다.

이후 OK 버튼을 누르면 맵을 구성할 수 있는 Tileset이 배치됩니다.

이제 Tileset을 이용하여 맵에 원하는 타일들을 마구 찍어봅니다.

열심히 찍은 결과 아래와 같은 맵이 완성되었습니다.