Bienvenidos sean a este post, hoy hablaremos sobre este concepto y otros temas.
Un tile map, tambien podemos llamarlo mapa de mosaicos, es el concepto utilizado para crear el fondo de pantalla o escenario para los juegos 2D. En este concepto, tendremos un conjunto de imagenes pequeñas que distribuiremos en un marco para generar nuestro escenario o fondo de pantalla. Hay varias formas distintas de hacerlo pero la mas recomendada es a traves de algun programa. Para esta ocasion, les recomiendo usar a Tiled que es un editor de mapas. Para instalarlo, les dejo el siguiente post donde explico como hacerlo:
Pero que es realmente un tile maps? Podemos considerarlo como una sucesion de imagenes que se usan para crear una gran imagen. Explicado asi no queda muy claro, para entenderlo mejor veamos la siguiente imagen
Veamos esta primera imagen, si cuentan las divisiones se van a dar cuenta que es de 20 de ancho y 15 de alto. Si cada cuadrado, o mosaico, lo consideramos de 32×32 pixels y multiplicamos el ancho y el alto por cada cuadrado nos va a dar una resolucion de 640×480. El mismo tamaño de la ventana del proyecto Juego que estuvimos trabajando. Como mencionamos anteriormente, esta imagen se genero a partir de otras imagenes. Ese conjunto de imagenes, se denomina como conjunto de mosaicos o tileset. Veamos un ejemplo de este tipo de conjunto
Observen como algunas de las imagenes en este conjunto se encuentran distribuidas en la imagen anterior. Otro factor comun, en el conjunto tenemos mosaicos de imagenes con el mismo tamaño de la imagen anterior, 32×32 pixels. Para que se entienda como este conjunto de imagenes se aplico en la primer imagen veamos la siguiente imagen
Lo que hicimos fue numerar las distintas imagenes que integran a esta, el cielo es simplemente un color de fondo. Con esto en mente, veamos como se numera al conjunto
Ahora tenemos los numeros de cada mosaico en el conjunto, y si vuelven a mirar la imagen anterior notaran las coincidencias. Como podran darse cuenta, podemos reutilizar todas las veces necesarias una misma imagen. Si se preguntan, como es que ubicaremos cada una de las imagenes del conjunto en el mapa? Bueno, de eso justamente se encargara el programa mencionado al principio.
De una manera muy sintetica, cada celda en el mapa tendra una identificacion y en ella asignaremos la identificacion de la celda en el conjunto. Y si lo dejamos en blanco, o usamos el valor de 0, el mapa considera que no ira nada y lo dejara asi. Hacer esto manualmente, no solo puede ser engorroso sino que tambien irritante, y por eso se recomienda el uso del programa Tiled.
Vamos a utilizarlo, para ello debemos abrir el programa que instalamos previamente. Pero antes deben descargar el siguiente archivo:
Este archivo sera el conjunto de mosaicos o tileset que usaremos para nuestro mapa. Guardenlo en algun lugar y tengan lo cerca porque muy pronto lo necesitaremos. Pasemos al programa para comenzar con la creacion del mapa.
Primero, iremos a Archivo, despes New, y luego a New Project. Esto nos abrira la siguiente ventana
En esta ventana, elegiremos donde guardaremos el nuuevo proyecto y asignaremos el nombre que lo identtificara. Presionan Guardar, y ya teemos nuestro proyecto creado, pasemos a completarlo. Nuevamente, vamos a Archivo, a Nuevo, y ahora elegimos a Nuevo Mapa. Esto nos abrira la siguiente ventana
Las tres primeras opciones deben dejarlas como aparecen porque es el mas generico y simple que podemos elegir. Elegimos ese formato de la capa de Patrones para tener una version mas compacta del mapa pero sobrer esto hablaremos un poco mas adelante. Al igual que en la imagen, deben establecer un ancho de 20 patrones y alto de 15 patrones. Y el tamaño de cada patron lo haremos de 32×32 pixels. Presionen Ok para crear este nuevo elemento. Lo cual generara lo siguiente:
Ya tenemos nuestro mapa generado, y listo para recibir las imagenes que lo compondran. Pero antes e pasar al siguiente tema, presionen Ctrl+S para guardar este nuevo mapa.
Le asignaremos el nombre de mapa01.tmx y este lo usaremos muy pronto. Solo nos resta el conjunto de imagenes, tileset, para crear la imagen en el mapa. Para ello, debemos ir nuevamente a Archivo, Nuevo, y elegir Nuevo Conjunto de patrones. Esto nos abrira la siguiente ventana
El nombre lo usaremos para identificacion, el tipo les recomiendo usar la que se ve en la imagen porque esta nos permitira usar la imagen que descargamos al inicio. Tambien debemos tildar la opcion de Empotrar en el mapa, para tener las imagenes en nuestro mapa. Siguiendo con el tema, en fuente deben ir a la ubicacion donde esta el archivo descargado. Para finalmente, establecer un ancho y alto de 32 pixels. Asi como tambien un tamaño de 2 pixels para el Margen y Espaciado, esto por la separacion que posee la imagen. Este valor dependera de como es la separacion en el origen, si no hubiera tales separaciones se usa a 0 pixel para los ultimos dos campos. Le dan al boton Ok para integrarlo y nos quedara de la siguiente manera
Nota:
Si no les agrega automaticamente el conjunto, pueden ir a Mapa->Añadir conjunto de patrones externo. Van a donde se encuentra y lo seleccionan.
Ahora veremos como colocar cada elemento en el mapa y para ello usaremos el siguiente video
En el video se puede ver lo practico de armar el escenario, comparandolo con la forma manual, pero algo aburrido si tuvieramos que agregar mas elementos. El resultado final es muy parecido a lo que vimos al inicio de este post pero todavia nos falta el color de fondo. Para establecerlo, vamos a seguir los siguientes pasos.
Primero van a la opcion de Mapa y una vez seleccionado, van hasta la opcion Atributos del mapa. Y ahora podran acceder a estos atributos
En esta lista de atributos, debemos ir a la que esta seleccionada en la imagen. En este, presionen el boton con los tres puntos y nos abrira la siguiente ventana
En esta nueva ventana, elegiremos el color que usaremos de fondo de pantalla. Si bien, no es obligatorio elegir el mismo. Por un tema de practicidad, elegi uno de los que ofrece en la gama de ejemplos pero si lo desean pueden experimentar buscando el color mas correcto a su proyecto. Presionen Ok para que cierre la ventana y establezca el color, veamos como quedo.
Ya tenemos la imagen base pero vamos a mejorarla un poco mas, y para ello descarguen el siguiente archivo:
Una vez descargado, vamos a repetir el proceso de crear un nuevo Conjunto de patrones que vimos anteriormente pero ahora con el nuevo archivo. Nos dirigimos a Archivo, Nuevo, Nuevo conjunto de patrones. Le asignan la identificacion de Imagenes 2, repiten los mismos parametros que el caso anterior y seleccionan al nuevo archivo descargado. Le dan a Ok para agregarlo y nos quedara de la siguiente manera
En la imagen vemos como en el margen derecho inferior tendremos los dos conjuntos de patrones para poder utilizar las imagenes almacenadas. Vamos a modificar a la imagen generada anteriormente como se ve en el siguiente video
Este va a ser nuestrro nivel para el proyecto Juego. Antes de finalizar, les dejo un link donde podran acceder a los archivos que genere en este post:
En resumen, hoy hemos visto que es un tile map, o mapa de mosaicos, su estructura simple, asi como tambien mencionamos un programa para crearlos, para despues crear nuestro escenario o nivel para nuestro proyecto. Espero les haya sido de utilidad y les dejo algunas de mis redes sociales para seguirme o recibir una notificacion cada vez que subo un nuevo post:
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 
