Razón Artificial

La ciencia y el arte de crear videojuegos

Engine IV: Tiled Map Editor

Escrito por adrigm el 8 de abril de 2010 en Desarrollo Videojuegos, Noticias, Programación | 8 Comentarios.

En el anterior artículo explicamos la forma de almacenar un mapa y de como se representa este mapa, obviamente no vamos a rellenar el array que representa nuestro mapa a base de crear el array en el programa esto sería una tarea titánica. Se podría crear un archivo con los valores y cargarlo, pero seguiría siendo muy complicado

Es por eso que vamos a usar un Editor de mapas, el Tiled Map Editor, es un editor de mapas que está bastante bien. Tiene soporte de Capas, de eventos, propiedades para capas y para tileset con valores configurables, etc. Pero lo más importante es que guarda los mapas en formato XML que hacen que sean muy fáciles de leer con Python y extraer la información.

Como vemos tiene una interfaz sencilla e intuitiva, puedes descargarlo de su página Web, es multiplataforma, hay versiones tanto para Windows, MacOS X y Linux, para este último hay que compilarlo, pero no es nada complicado y si tenéis duda dejadme un comentario y os lo explico.

El archivo TMX

El guardar el mapa se genera un archivo tmx que no es mas que un documeno XML que tiene el siguiente formato:

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" width="35" height="30" tilewidth="40" tileheight="40">
 <tileset firstgid="1" name="bosque" tilewidth="40" tileheight="40">
  <image source="../../engine/graphics/tilesets/tile_bosque.png"/>
 </tileset>
 <layer name="Layer 1" width="35" height="30">
  <data encoding="base64" compression="gzip">
   H4sIAAAAAAAAA81WQQ6DMAzrlSNsO2zAYfD...
 </data>
 </layer>
 <layer name="Layer 2" width="35" height="30">
  <data encoding="base64" compression="gzip">
   H4sIAAAAAAAAA9WXh07DMBRF/TvQQhlhRuyC...
  </data>
 </layer>
 <layer name="Layer 3" width="35" height="30">
  <data encoding="base64" compression="gzip">
   H4sIAAAAAAAAA+WWsQ7CMAxE/RWFiTIBG2yw0Q022...
  </data>
 </layer>
 <objectgroup name="Eventos" width="35" height="30">
  <object name="" x="700" y="495"/>
 </objectgroup>
</map>

Como ves almacena gran cantidad de información como el tamaño del mapa, el tamaño de los tiles que utliza, la ruta del tileset, etc. Luego almacena las capas en un formato bastante raro:

<data encoding="base64" compression="gzip">
    H4sIAAAAAAAAA81WQQ6DMAzrlSNsO2zAYfD...
</data>

La cadena entre las etiquetas en realidad es mucho más larga solo que yo la he acortado con puntos suspensivos para que cupiera y esto es lo que contiene nuestra array con la pos del tiled que utiliza, solo que viene cifrado en base64 y comprimido con gzip, pero ya veremos una forma muy fácil de decodificarlo y descomprimirlo con python.

Por ahora trata de hacer pruebas con el Tiled y ver en que va cambiendo el archivo XML generado y que datos va almacenando, en el siguiente tutorial aprenderemos a leer estos datos con Python.

8 Comentarios en "Engine IV: Tiled Map Editor"

  1. roberto dice:

    muy buen tutorial, estoy empezando y me son muy utiles.
    esperando por mas…..

  2. admin dice:

    Pronto habrá más, que ando algo escaso de tiempo ahora mismo.

    Un saludo

  3. Gxus dice:

    Vaya!

    Están muy muy bien estos tutoriales, he visto muchos por diversos sitios, pero tu lo haces muy bien paso a paso.

    Me he llevado un chasco, no me esperaba que el engine fuese “tan reciente” que aun no se ha terminado, jeje. Bueno, pues nada, a esperar, asi voy practicando por mi cuenta

  4. admin dice:

    Gxus, sí, la verdad es que está bastante más avanzado, pero por falta de tiempo no he podido publicar nuevas entregas. En dos semanas estaré de vacaciones y prometo mucho contenido nuevo.

    Un saludo.

  5. calos dice:

    Hola

    Muchas gracias por hacer este tutorial, me esta gustando mucho

  6. Andru dice:

    Man te amo, desde colombia

  7. […] Engine IV: Tiled Map Editor […]

  8. […] Tiled me ha gustado bastante, me quedo con él. En su wiki se explica el formato que utiliza y en Razón Artificial hay un buen ejemplo de cómo usarlo, entre otros artículos y tutoriales muy interesantes. En […]

Deja un comentario