Razón Artificial

La ciencia y el arte de crear videojuegos

Tiled map editor – El editor de mapas libre

Escrito por adrigm el 7 de diciembre de 2010 en Desarrollo Videojuegos, Recursos | 3 Comentarios.

Ya he hablado en el blog acerca de este programa, pero ahora paso a hacerle un análisis en profundidad ya que es un programa que utilizo mucho y un buen recurso.

Desarrollar videojuegos no es solo escribir código. Conlleva una gran parte de diseño y diferentes recursos como gráficos, audios, modelos, etc. Teniendo los recursos y un buen compilador se podría crear un juego, pero eso sería tan absurdo como utilizar un ordenador a base de 1 y 0, se puede, pero nadie lo hace. Con los juegos pasa algo parecido lo que se crea no es directamente el juego en sí, sino que se hacen una serie de herramientas que faciliten el proceso y abstraigan ciertas partes de bajo nivel. Engines gráficos, de física, de inteligencia artificial que se programan a bajo nivel para hacerlo eficiente y luego son llamados desde lenguajes de scripts más sencillos para darle lógica al juego. Otra de las grandes herramientas son los editores de nivel. En los que se compone la acción con los gráficos y demás para luego ser cargados desde el juego y de los editores de niveles vamos a hablar.

Lo que he explicado arriba no se aplica solo a grandes producciones juegos en 2D también precisan de editores de nivel, editores de sprites e incluso algunos complejo de ciertos engines que abstraigan del bajo nivel de bibliotecas como SDL o Allegro.

Las compañías que cuentan con recursos y presupuesto suele crear sus propias herramientas y formatos propios para sus proyectos, pero para amateur a veces nos interesa centrarnos en crear videojuegos y aprovecharnos de herramientas libres para crear nuestros juegos y ahí es donde entra en juego Tiled Map Editor.

El Tiled es un editor de mapas libre escrito en C++ y con la biblioteca QT. El programa es multiplataforma y de propósito general. Como su propio nombre indica esta hecho para juegos que tienen sus mapas en forma de tiles (casillas) esto es la gran mayoría de los juegos 2D.

Características

  • Mapas tanto ortogonales como isométricos.
  • Formato de archivo XML.
  • Soporte para múltiples capas tanto de tiles como de objetos.
  • Soporte para múltiples tilesets.
  • Muy personalizable todas las propiedades de mapas con parejas de clave valor.
  • Soporte de color clave y transparencias.
  • Tamaño de los tiles y mapas totalmente personalizable.

Mapas ortogonáles e isométricos

Puedes crear mapas tanto en la vista clásica de los juegos 2D, como en la tan usada simulación del 3D a través de la vista isométrica. En la imagen inferior podemos ver la vista ortogonal.

Apreciamos como el editor cuanta con herramientas básicas en la parte superior para el dibujado de mapas como el tampón, el cubo de pintura para rellenar o la goma de borrar, con un par de usos se controlan todas estas herramienta. En la parte derecha nos encontramos con dos paneles, en la parte superior el panel de capas. Desde este panel podemos gestionar en que capa queremos pintar, cambiarles el nombre, ocultarlas o modificarlas. A parte de elegir su transparencia. Debajo de este panel nos encontramos con el panel de tilesets que se gestionan mediante pestañas. Ambos paneles son arrastables y se pueden poner como ventanas flotantes o acomodarlos en cualquier lugar del editor y con cualquier tamaño.

En la imagen superior podemos ver un mapa isométrico con dos tilesets abiertos.

Tamaño de los tiles y mapas totalmente personalizable

Cuando creas un nuevo mapa te da a elegir si será ortogonal o isométrico. También te deja elegir el número de tiles de ancho y alto y el tamaño que tendrán los tiles. Como vemos totalmente configurable.

Color clave y tilesets

Cuando se carga un nuevo tileset al mapa nos deja elegir el nombre, la imagen del tileset. El tamaño de los tiles y el margen y espacioado, esto es, la distancia visual en las que el editor debe separar los tilesets para un correcto mapeado. También nos deja elegir si usar color transparente. En el caso de marcarlo podemos escoger un color que representar como transparente, muy útil para si tienes tilesets con un fondo puesto.

Capas de objetos

Una característica muy interesante son las capas de objetos. Esto son capas especiales en las que se pueden colocar objetos rectangulares con la precisión a pixel y sin estar ligadas a los tiles.

Como podemos ver en la imagen superior podemos crear tantas capas de estas como queramos y asignarles diferentes colores y propiedades. Cada objeto que creemos tiene un cuadro de propiedades accesibles desde el boton derecho.

En este cuadro de diálogo podemos configurar diferentes datos del objeto como el nombre, el tipo, la posición, tamaño. Debajo tambiñen tenemos una lista con dos campos nombre y valor. Estas listas nos permitan definir propiedades propias y definir un valor. Como ves muy personalizable tu creas tus propias propiedades y sus valores para tu propio juego.

Estos cuadros de propiedades valor no solo estan disponibles en los objetos. También los poseen los tilesets, las capas, los mapas y en realidad casi todos los elementos para que puedas definir propiedades clave valor de casi todo. Debajo podemos ver un ejemplo de las propiedades del mapa y posibles usos. Pare definir una música de fondo, los enemigos, etc. Todo depende de tu proyecto.

El formato TMX

Una vez tengas tu mapa listo querrás guardarlo para poder usarlo en tu juego, pero ¿Como uso los datos del mapa? Cuando guardas un mapa el programa crea un fichero con extensión .tmx esto fichero en realidad no es más que un archivo XML que contiene todo los datos de nuestro mapa. Solo deberemos leer el archivo XML desde nuestro juego (casi todos los lenguajes tienen bibliotecas para trabajar con XML) y usar los datos como creamos convenientes. Veamos un ejemplo.

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="isometric" width="40" height="40" tilewidth="64" tileheight="32">
 <properties>
  <property name="prop_map" value="25"/>
 </properties>
 <tileset firstgid="1" name="tiled_dungeon" tilewidth="64" tileheight="128">
  <image source="../graphics/tilesets/tiled_dungeon.png" width="1024" height="1920"/>
 </tileset>
 <layer name="Capa de Patrones 1" width="40" height="40">
  <properties>
   <property name="tipo" value="base"/>
  </properties>
  <data encoding="base64" compression="gzip">
   H4sIAAAAAAAAA+3SUQoAIQgAUa9Q9z9sN0jMFJUZ8K9dHpYI/WopU8G0L1Pdp+03Yu8W36u9q8+69+z7ffF5zlub5vv9f+/gw2fxeb+f5ou+L3y57x0fPnz48PXwERERUUwH5o9HhQAZAAA=
  </data>
 </layer>
 <layer name="Capa de patrones 2" width="40" height="40" visible="0">
  <data encoding="base64" compression="gzip">
   H4sIAAAAAAAAA+2V3QrCMAyF8066+f+H3ggK3ikivv9jWGGwWGNYllS9OB8cKGvWnaVNSgQimCfVTPdG/NnqB76q5tvTDrGDwl4kKkNs/UFXZc6bc4u/Poyc7x+Tdo32fjtvbJW5JdnyvlHWetbPmNp/GSZNmIcDm+NaK2tqeyf9lxYv7ROP71M7Vn8Les0R10mIP3/ZnxXub0bt2bkIY+mZ1tMi/JWs/ej8RROdP+nMauL1X8qfN3+l68N7/rz+eH+/CeO8/rQ7WboPvP4i61Pq79Z+mxPpL+I85cCfD/jzAX8+4M+H1t+t6nIfAAAAAOA/eACNJESSABkAAA==
  </data>
 </layer>
 <layer name="Capa de patrones 3" width="40" height="40" visible="0">
  <data encoding="base64" compression="gzip">
   H4sIAAAAAAAAA+3QMQrAIAxGYa+cpeBcsL1TPZwdHBzE0KGJ4vvgB4cMD0PAbpJ3ALb1vMveEQCA5UnzPupGzrqZzd5nKXoHfHB5B3Ro/3ebVOAvop8AAACgUQAv8zdRABkAAA==
  </data>
 </layer>
 <objectgroup name="Capa de Objetos 1" width="40" height="40">
  <object type="start" x="556" y="650"/>
  <object x="266" y="692" width="149" height="135"/>
 </objectgroup>
 <objectgroup color="#ffaaff" name="Capa de Objetos 2" width="40" height="40">
  <object x="188" y="193" width="110" height="92"/>
 </objectgroup>
</map>

Como puedes ver si te fijas un poco, contiene todo los datos que hemos configurado en nuestro mapa por un sistema de etiquetas XML, nada del otro mundo. Quizás la única parte inquietante sería esta.

<layer name="Capa de patrones 3" width="40" height="40" visible="0">
  <data encoding="base64" compression="gzip">
   H4sIAAAAAAAAA+3QMQrAIAxGYa+cpeBcsL1TPZwdHBzE0KGJ4vvgB4cMD0PAbpJ3ALb1vMveEQCA5UnzPupGzrqZzd5nKXoHfHB5B3Ro/3ebVOAvop8AAACgUQAv8zdRABkAAA==
  </data>
 </layer>

Esta parte como vemos guarda la información de las capas de tiles, pero los datos vienen codificados en base64 y comprimidos con gzip. ¿Por que esto? Por eficiencia, son la parte que más ocupa del archivo ya que contienen la lista de etiquetas de la grilla, algo como esto es lo que pone una vez descomprimido y decodificado.

<tile gid="17"/>
<tile gid="17"/>
<tile gid="5"/>
<tile gid="8"/>
<tile gid="0"/>

Como ves contiene en orden de arriba a abajo y de izquierda a derecha el tile que tiene la capa empezando por el uno. Es decir si la capa en el primer tile arriba a la izquierda la segunda imagen del tileset entonces contendrá un 2. Es importante resaltar que se empieza a contar en 1 y se deja el 0 para los casillas que no tienen ningún tile.

Los mapas sin comprimir y codificar ocupan entre 40 y 50 veces más, por lo que es altamente recomendable, luego desde el juego y el lenguaje de programación es fácil programar un algoritmo que descomprima y decodifique el mapa.

Página oficial: http://www.mapeditor.org/

3 Comentarios en "Tiled map editor – El editor de mapas libre"

  1. […] This post was mentioned on Twitter by Razon Artificial, pablo ar. pablo ar said: Tiled map editor – El editor de mapas libre: Ya he hablado en el blog acerca de este programa, pero ahora paso … http://bit.ly/eKA7ZU […]

  2. […] tilesets están pesados para ser usado con el Tiled Map Editor, pero se puede adaptar a cualquier herramienta de cración de […]

  3. Lucia dice:

    Hola!

    Estoy aprendiendo Cocos2D, bueno es mi proposito para 2013. En internet estoy leyendo mucho y queria hacer algun curso en el que al menos se vean conceptos basicos sobre el tema.

    He encontrado este curso http://www.cocoaosx.com/cursos/curso-cocos2d-basico/que si alguien esta en la misma situacion que yo seguro que la info le ayuda.

    Si alguien se le ocurren mas cosas que puedo hacer para aprender bien y en menos tiempo esta libreria, agradezco comentarios.
    Saludos

Deja un comentario