Una de la problemáticas del desarrollo de videojuegos, sobre todo al principio cuando solo se quiere hacer un prototipo o juegos sencillo es tener un editor de mapas decentes. Hay dos opciones o crear tu propio set de edición o usar un editor de mapas de propósito general como Tiled Map editor.
El Tiled es un editor de mapas sencillo, pero potente se adapta a cualquier tipo de juego 2D tanto si tu juego es un RPG, un plataformas como un clon del Breakout con Tiled tienes todo lo que necesitas.
Características
Como hemos dicho Tiled es un editor de propósito general que se adapta a todo tipo de proyectos, cuenta con un formato basado en XML llamado TMX del que luego hablaremos.
Soporta mapas tanto Ortogonales como isométricos, soporte para objetos con precisión a nivel de pixel que hace que no sea necesario que tu mapa sea basado solamente en tiles.
Tiene soporte para copiar y pegar trozos de mapa de manera natural ideal para partes repetitivas y cuenta con deshacer y rehacer fácilmente.
Recarga automáticamente los tileset usados, ideal para cuando se está diseñando o modificando un tileset en un programa de edición de imágenes como Photoshop o GIMP al guardarlo automáticamente se actualiza en el Tiled.
Soporta plugins escritos con C++ y QT por lo que es ideal para adaptarlo a cualquier proyecto y generar ficheros de mapa acorde a cualquier tipo de engine.
En resumen sus características más destacables son las siguientes.
-
Mapas ortogonales e 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.
Novedades de la versión 0.9
El pasado 28 de enero se estreno la esperada actualización de este proyecto que no para de crecer. Sus principales novedades fueron las herramientas de terreno que nos permite definir varios tiles como un terreno y nuestro mapa se dibuja y se adapta solo para hacer transiciones correctas entre los tipos de terreno.
Otra de las novedades más interesantes es la inclusión de un minimapa ideal para navegar por mapas de tamaño considerable.
Por último destacar el panel de edición de objetos para navegar por todos los objetos de la escena y sus propiedades fácilmente.
El formato de mapa de Tiled Map Editor
El editor está muy bien diseñado y es perfecto para editores de niveles, pero como programadores lo que más nos interesa es el formato de mapa para saber como usar los archivos generados en tiled en nuestro proyecto.
Como hemos dicho el formato de Tiled es el TMX que no es más que un fichero XML. por tanto se puede editar fácilmente en un editor de texto. Vamos a ver 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 vemos es fácil de ver en el documento toda la información de nuestro mapa basta con usar la biblioteca XML de turno de nuestro lenguaje para extraer toda la información necesaria, quizás las parte más inquietante del mapa sea 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 (en las últimas versiones se utiliza por defecto zlib en lugar de 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"/>
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 codificar y comprimir ocupan entre 40 y 50 veces más por lo que es más eficiente tenerlos en este formato y usar nuestro lenguaje para comprimir y decodificar la información.
Para un detalle a fondo del formato de mapa puedes revisar las especificaciones oficiales.
Implementeción en lenguajes y engines
Tiled es un editor de mapas muy popular y usado en muchos videojuegos 2D por lo que si usas un lenguaje o un engine popular es probable que ya exista un cargador de mapas para tu lenguaje o engine. Existen cargadores para C++, Python, C#, Flash, etc. y los engines más populares como Cocos2D, XNA o Game Maker.
Puedes encontrar una lista completa de todas las implementaciones del formato de mapa de tiled.
Conclusiones
Tiled Map Editor es ahora mismo el editor de mapas 2D de referencia usado en muchos proyectos comerciales y muy ligado a los juegos para móviles.
Más información | Sitio oficial
Wiki | Tiled Wiki
GitHub | Tiled Code
