[Tutorial] Mapa con TiledMap

Buenas gente! En esta entrada vamos a ver una herramienta muy útil para crear mapas: TiledMap. Es una herramienta completamente gratuita que podéis descargar de su página web aquí.

Con este editor podremos crear de forma rápida mapas tanto en vista ortogonal como isométrica, pudiendo hacer mapas de tipo plataforma o el típico mapa visto desde arriba.

Primero veremos como crear un mapa simple con este programa y luego veremos cómo añadirlo a nuestro juego fácilmente y como coger información de él.

Usando TiledMap

Para hacer un mapa, en primer lugar necesitaremos una imagen de donde sacar los patrones o “tiles” para nuestro mapa. Un ejemplo de imagen de patrones podría ser la siguiente:

Como podemos ver, la imagen tiene 4 cuadrados, de 64 píxeles cada uno. Esto serán nuestros 4 tiles. Por supuesto, estos son solo tiles de ejemplo, pero puedes crear mapas impresionantes. Otros mapas de patrones que puedes usar es este zip que puedes descargar en la página web de TiledMap como ejemplo. En él te viene un mapa de patrones además de imágenes de arbustos, un árbol y un mapa de ejemplo.

Una vez que tenemos nuestro mapa de patrones abrimos TiledMap y le damos a nuevo. En nuestro caso usaremos una perspectiva ortogonal. En ancho del patrón seleccionamos el tamaño de los “tiles”, suelen ser de 16 o 32 píxeles, pero nosotros usaremos de 64, para que se vean grandes. En el tamaño del mapa pondremos el número de tiles que queramos que tenga.

Ahora que tenemos nuestro mapa vacío vamos a cargar nuestra imagen con los patrones. Para ello vamos al menú de arriba y le damos a Mapa → Nuevo conjunto de patrones...

En la ventana que se nos abre seleccionamos nuestra imagen, le ponemos el nombre que queramos y nos aseguramos que el ancho y alto de nuestros tiles sea el mismo que hemos seleccionado para el mapa.

Ahora ya podemos ir seleccionando los tiles que queramos e ir dibujando nuestro mapa poco a poco. Podemos poner varias capas fácilmente haciendo click derecho en el menú de capas, a la derecha del mapa y seleccionando Nueva capa de patrones...

Yo he creado dos capas para mi juego, la capa suelo que será por donde mi personaje pueda ir andando y la capa de colisiones, donde pondré aquellos objetos que no se podrán traspasar.

Se pueden añadir atributos a cada tipo de tile. Esto nos puede servir por ejemplo para indicar distintas propiedades de cada tile, como puede ser que sea agua, por lo que nuestro personaje tuviera que ir más lento y nadando, que fuera un punto de aparición de enemigos, y cualquier cosa que se nos ocurra que podamos necesitar para nuestro juego. Para ello hacemos click derecho en el tipo de tile que queramos darle un atributo dentro de la pestaña conjunto de patrones, al lado del mapa donde dibujamos y seleccionamos Atributos del patrón... y añadir todos los atributos que queramos.

En mi caso, he puesto los cuadrados morado y rojo en la capa de colisión y he puesto como propiedad a todos los cuadrados verdes que sean el punto de aparición de mi personaje, de modo que no tenga para cada mapa que indicárselo yo manualmente.

Con esto ya tenemos nuestro mapa listo para usarse en el juego. Para ello lo guardamos como fichero con extensión .tmx y lo colocamos en nuestra carpeta Assets de nuestro proyecto name-android, junto con la imagen que hemos usado para los tiles.

Usando el mapa creado en nuestro juego

Una vez tenemos el mapa en la carpeta correcta, vamos a nuestro código. Creamos una nueva clase para colocar aquí todo lo que necesitemos de nuestro mapa. Necesitaremos los siguientes objetos:

El primero será nuestro mapa, cargado de nuestro fichero .tmx como veremos ahora.

El segundo será el encargado de renderizar y mostrar por pantalla el mapa.

El tercero es opcional y guardará una capa del mapa, en mi caso, la de colisión.

Ahora vamos a inicializarlos, para ello, usaremos las siguientes líneas:

Para inicializar nuestro mapa crearemos un nuevo TiledMap y cargaremos el fichero .tmx que hemos creado.

Para obtener nuestra capa de colisiones cogeremos del mapa recién creado la capa con el nombre que hayamos puesto, en mi caso “Colisiones”.

Por último, inicializamos el renderer pasándole nuestro mapa y un SpriteBatch, que puede ser alguno que ya estemos usando. Puedes ver más información sobre SpriteBatch aquí.

Para dibujar nuestro mapa tan solo tendremos que ejecutar la siguiente línea de código donde queramos que se dibuje:

Al cerrar la aplicación tendrás que hacer un dispose() tanto del mapa como del renderer:

Puedes coger la celda de una capa en determinada posición con la línea:

En este caso, i y j son números enteros, para pasar de una posición de pantalla a un número de celda deberás dividir la posición entre el tamaño de cada celda:

Podrás ver los atributos de una celda con la siguiente línea:

Puedes ver más funciones y usos de estos mapas en esta página.

Notas:

•   Recuerda hacer el dispose() del mapa y su renderer. No es necesario hacerlo de las capas.
• Puedes dibujar todo el mapa, como hemos hecho aquí, o dibujar solo una o varias capas que tu decidas.
• Si ya tienes el batch que usas en el renderer iniciado deberás pararlo (batch.end()), luego dibujar el mapa con el renderer y por último volver a iniciar el batch (batch.begin()). Si no te dará un fallo.
• Cada tile acepta canal alfa, por lo que puedes crear tiles con transparencias y que se vea el tile de la capa inferior al dibujarse una celda.