2D 맵 에디터 Tiled

게임개발로그 2011. 3. 16. 00:34




 1. Tiled 란?
Tiled 는 2차원 타일기반의 게임을 개발하기 위한 범용 맵 에디터로,  사용하기 쉬우며  다양한 게임 엔진과 함꼐 사용할 수 있다.
프리 소프트웨이며, QT 프레임웍을 사용하여 C++로 작성되었다. Tiled 특징은 다음과 같다.  




2. Tiled의 특징 
XML 기반 맵포맷의 범용 맵에디터이다. 
orthogonal 과 isometric 맵을 지원한다
커스템 객체들을 픽셀단위 정밀도로 배치할 수 있다.
undo/redo 와 copy/paste 를 지원한다. 
타일 ,레이어, 오브젝트, 맵에 커스텀 속성을 추가할 수 있다. 
외부에 변경된 타일셋을 자동으로 리로드한다. 
필요할 때, 타일맵의 크기를 변경할 수 있다. 
stamp와 fill brush 같은 호율적인 타일에디팅 도구를 제공한다. 





3. Tiled 설차하기
아래 사이트에서 Tiled를 다운로드하여 설치하자. 
http://www.mapeditor.org/





4. Tiled의 간략한 사용법
애플리케이션을 실행시키면 다음과 같은 인터페이스로 구성되어 있다. 



 Tiled Map Editor를 사용하여 2가지 방식의 맵을 생성할 수 있다. orthogonal 맵은 그림과 같은 하늘에 내려다 보는듯한 시점의 
맵이다. isometric 맵은 고전 RPG인 파랜드 택틱스 같은 게임에서 사용됐던 비스듬한 시점에서 보는 듯한 방식이다.
최초에 2가지 방식 중  타입을 지정하고, 타일 한개의 픽셀 크기와 가로, 세로가 몇개의 타일로 구성되어 있는지 크기를 지정
해서 맵을 생성해한다. 이렇게 생성된 맵파일은 .tmx 라는 확장자를 갖는다. 

우측하단의 Tilesets 은 맵을 구성하기 위해 필요한 타일들로만 구성된다.  타일이미지 샘플이라 생각할 수 있다. 원하는 타일을
선택하여 맵에 타일을 배치할 수 있다.  이와 같이  타일셋 이미지를 하나로 구성해야,  애플리케이션에서 로딩시 메모리를 절약
할 수 있다. 

이렇게 배치된 타일들은 게임에서 의미있게 해석되기 위해서 레이어들로 구분되어 그려진다.  
Background , Objects, Forground, Meta 와  같은 레이어들은 서로 다른 z 축 값을 가지는데, 위 그림에서는 Background 레이어가
가장 바닥에 그려진다.   각 레이어들은 동일한 깊이를 갖는 Sprite 집합 이라 생각할 수 있으며, 게임엔진에서 레이어 이름을 통해
레이어 내 Sprite 들을 얻어올 수 있다. 

tileset 에 있는 특정 타일들에는 타일속성을 키와 값 형태로 지정할 수 있으며, 게임엔진에서 특정 타일좌표에 있는 타일의 속성을
읽어와서  게임 로직을 처리할 수 있다. (예를 들면, 아이템인지 장애물인지 판단할 수 있다.)
위 그림에서 Objects 라는 이름을 갖는 레이어만  오브젝트 레이어이며, 나머지 레이어들은 타일 레이어이다. 이름에서 의미하듯
오브젝트 레이어는  배경이 아닌,  게임에서 특징한 의미를 갖는 객체들이 위치하는 레이어이다.  게임 로직을 구성하기 위해 사전에 미리 속성정보를 알아야 할 대상을 위해 사용한다. 




File 메뉴에서 새로운 맵을 생성하는 다이얼로그 창이다. 

이 맵은 32 pixel x 32pixel 크기의 타일이 가로, 세로 50개가 배치된 크기를 갖는다. 



Map 메뉴에서 새로운 타입셋을 추가하는 다이얼로그 창이다 




이렇게 생성한 맵을  저장한 파일 TileMap.tmx 의 내용은 다음과 같다.  
Cocos2D 게임엔진에서 이 파일을 읽어서 타일들의 정보들을 가져와 맵을 구성할 수 있다.  
<?xml version="1.0" encoding="UTF-8"?>

<map version="1.0"orientation="orthogonal"width="50"height="50"tilewidth="32"tileheight="32">

<tileset firstgid="1"name="tmw_desert_spacing"tilewidth="32"tileheight="32"spacing="1"margin="1">

<image source="tmw_desert_spacing.png"/>

</tileset>

<tileset firstgid="49"name="meta_tiles"tilewidth="32"tileheight="32"spacing="1"margin="1">

<image source="meta_tiles.png"/>

<tile id="0">

<properties>

<property name="Collidable"value="True"/>

</properties>

</tile>

<tile id="1">

<properties>

<property name="Collectable"value="True"/>

</properties>

</tile>

</tileset>

<layer name="Background"width="50"height="50">

<data encoding="base64"compression="gzip">

   H4sIAAAAAAAAA+3Uyw6CMBCF4a7EhYo7bwmp8ZIoiu//do6Ji4YgaZGWEf/Ft+uEczJkCmNMMTIbse1gpyC7ay+O4hrgJA4Kstd7hGbqMhOD7bGHDZxlH//T42bab1L9pt0V9riYz3epbHlT9vT92CoxEZmYKsjT5OxpIXKx9Hj7cAzdr87tMXSWJpmn+bvHLGAm5T+YR/TaXZWoxyqidcJ9fMsqyPCL2TBOVkEGAAAAAAAAAAAQxxPutT2PECcAAA==

</data>

</layer>

<objectgroup name="Objects" width="50" height="50">

<object name="SpawnPoint"x="77"y="432"/>

</objectgroup>

<layer name="Foreground"width="50"height="50">

<data encoding="base64"compression="gzip">

   H4sIAAAAAAAAA+3UQQ0AAAwCMZzMv8vJINlaBRceJNA17YDHbA9c5+cAAAAAAAAAfln1IckFECcAAA==

</data>

</layer>

<layer name="Meta"width="50"height="50">

<data encoding="base64"compression="gzip">

   H4sIAAAAAAAAA+3UUQqAIBAFQK9k9z9c9CeVZAm2ygwI/iy8VdeU1pM7ViSr9VGzfagZJZ/2bzOVNRH6OZSZ7s7+qSaK3vuIomWWZ5rz2fuomSUnV63/HP8wW2NFPu/I2ViTNwcAAAAAAOvaAbuBPXIQJwAA

</data>

</layer>

</map>



'게임개발로그' 카테고리의 다른 글

2D 맵 에디터 Tiled  (0) 2011.03.16
아이폰 2D 게임엔진 Cocos2D  (1) 2011.03.16
게임 개발 기초  (2) 2011.02.14
게임 시스템 모듈 구성  (0) 2011.02.13
DirectX 와 OpenGL  (0) 2011.02.13
3차원의 기초  (0) 2011.02.13
, , ,
트랙백 0개 , 댓글 0개
1 ··· 123 124 125 126 127 128 129 130 131 ··· 212

티스토리툴바