안드로이드 스튜디오 Libgdx 타일맵 구현
본문 바로가기
프로그래밍/게임 프로그래밍(Libgdx)

안드로이드 스튜디오 Libgdx 타일맵 구현

by 124578 2020. 10. 6.

안녕하세요. 요즘 열심히 포스팅 하려고 노력중입니다.

회사에서 퇴근후 포스팅을 할 수 있는 오늘을 감사한 마음으로 마무리 하려고 합니다.

 

오늘은 저번 포스팅 화면설정에 이어 게임의 전체맵이되는 타일맵을 포스팅합니다.

최종 타워디펜스 게임을 위해 필요한 도구를 모은다고 보면 되겠습니다.

 

게임은 한가지 툴만가지고 개발을 하기는 거의 불가능에 가깝습니다.

안드로이드 스튜디오를 포스팅하고 있습니다만, 한계는 있습니다.

 

게임을 만들기위해 툴을 만들어서 써야하는 상황입니다.

 

하지만 그에 따른 오픈소스도 상당히 많이 개발되어 있습니다.

 

오늘은 그 오픈소스중 하나인 Tiled Map Editor를 이용하겠습니다.

 

구글에 '타일드' 라고 치시면 Tiled Map Editor 이라고 뜹니다.

 

 - Tiled 설치

웹사이트에 들어가서 Download 받습니다.

물론 기부성 멘트가 나오지만 무시하고 자신의 OS 환경에 맞는 파일을 다운 받으시면 됩니다.

 

 

타일드는 오픈소스이긴 하지만 약간의 기부금을 요구 합니다.

하지만 안내셔도 상관은 없습니다.

 

설치는 간단하기 때문에 생략하겠습니다.

우선 타일드를 먼저 실행 합니다.

 

 

 - Tile Map 파일 만들기

실행 된 후 File -> New -> New Map를 클릭합니다.

 

 

하기와 같이 맵설정을 해줍니다.

Map Size 의 Width 32x32 pixel 짜리 타일을 가로로 60개 Height 34개를 그린다는 의미입니다.

그렇다면 전체 맵의 사이즈는 1920X1088이 되겠습니다.

 

 

Save As를 클릭하여 저장합니다.

현재 제작중인 게임의 프로젝트인 TowerDefense -> android ->assets에 저장합니다.

파일이름은 TileMap으로 저장합니다.

 

 

 -  Tile Set 파일 만들기

   Tile Set 파일을 만들기 위해 아래와 같이 File -> New -> New Tileset 를 클릭합니다.

아래의 그림처럼 Name에 TileMap 이라고 적고 Tile set으로 사용할 Source의 이미지 소스 파일의 경로를 지정합니다.

그런후  Save As..를 클릭하여 다른경로로 저장합니다.

 

다른 부분은 건들지 않습니다.

 

 아래 이미지는 제가 직접 그린 이미지 Tile Set 파일 입니다.

 사용하고 싶으신 분은 사용하셔도 됩니다. 

 

정상적으로 불려졌으면 아래와 같이 이미지가 불러 집니다.

 

아래의 순번과 같이 ID가 부여 됩니다.

 

 

 

이후 아래와 같이 Project->Open Project..를 클릭 합니다.

현재 제작중인 게임의 프로젝트인 TowerDefense -> android ->assets의 경로로 열기합니다.

 

아래 이미지와 같이 프로젝트가 불려진것을 확인합니다.

 

 

만약 아래의 TileSet패널이 보이지 않으면 View -> View and Toolbars -> TileSets를 체크하여 줍니다.

 

아래 왼쪽은 이미 제가 그린 타일 맵 입니다. 

그리는 방법은 TileSets의 그리고 싶은 부분을 클릭한 후 타일맵에 드래그 하면 됩니다.

 

실제로는 프로그램에서는 이미지가 ID 값으로 저장이 됩니다.

이 ID 값으로 프로그램 상의 지형지물을 인식합니다.

 

예를 들어 0,4,8,9,2,3,7,11은 블록으로 인식되어 통과하지 못합니다.

나머지 10으로 된 부분은 이동 할 수있는 지형입니다.

 

오늘은 타일맵을 만들어주는 Tiled 프로그램에 대해 알아보았습니다.

이런 툴이 없다면 게임을 제작 할때 맵을 만들어야 할 경우 번거러울 수 있습니다.

 

여기까지 입니다.

 

다음에는 오늘 제작한 이미지를 적용하여 프로그램 하도록 하겠습니다.

 

감사합니다. 

 

 

댓글


TOP

TEL. 02.1234.5678 / 경기 성남시 분당구 판교역로