Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Programming

Análisis y representación de mapas de formato TMX en mosaico en su propio motor de juego

by
Read Time:13 minsLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

En mi artículo anterior, miramos Tiled Map Editor como una herramienta para crear niveles para tus juegos. En este tutorial, te guiaré por el siguiente paso: analizar y renderizar esos mapas en tu motor.

Nota: Aunque este tutorial está escrito usando Flash y AS3, debería ser capaz de utilizar las mismas técnicas y conceptos en casi cualquier entorno de desarrollo de juegos.


Requisitos


Guardar en formato XML

Usando la especificación TMX, podemos almacenar los datos en una variedad de formas. Para este tutorial, guardaremos nuestro mapa en formato XML. Si planea usar el archivo TMX incluido en la sección de requisitos, puede pasar a la siguiente sección.

Si creó su propio mapa, deberá decirle a Tiled que lo guarde como XML. Para hacerlo, abra su mapa con Tiled y seleccione Edit > Preferences ...

Para el cuadro desplegable "Store tile layer data as:", seleccione XML, como se muestra en la imagen a continuación:

Ahora, cuando guardes el mapa, se almacenará en formato XML. Siéntase libre de abrir el archivo TMX con un editor de texto para echar un vistazo al interior. Aquí hay un fragmento de lo que puede esperar encontrar:

Como puede ver, simplemente almacena toda la información del mapa en este útil formato XML. Las propiedades deberían ser sencillas, con la excepción de gid, entraré en una explicación más detallada de esto más adelante en el tutorial.

Antes de continuar, me gustaría dirigir su atención al elemento "Collision" del objectgroup. Como puede recordar del tutorial de creación de mapas, especificamos el área de colisión alrededor del árbol; así es como está almacenado.

Puedes especificar potenciadores o puntos de generación de jugadores de la misma manera, ¡así que puedes imaginar cuántas posibilidades hay para Tiled como editor de mapas!


Esquema básico

Ahora aquí hay un breve resumen de cómo vamos a tener nuestro mapa en el juego:

  1. Lea en el archivo TMX.
  2. Analice el archivo TMX como un archivo XML.
  3. Cargue todas las imágenes de tileset.
  4. Organice las imágenes de tileset en nuestro diseño de mapa, capa por capa.
  5. Leer el objeto del mapa

Lectura en el archivo TMX

En lo que respecta a su programa, este es solo un archivo XML, por lo que lo primero que queremos hacer es leerlo. La mayoría de los lenguajes tienen una biblioteca XML para esto; en el caso de AS3 usaré la clase XML para almacenar la información XML y un URLLoader para leer en el archivo TMX.

Este es un lector de archivos simple para "../assets/example.tmx". Supone que el archivo TMX se encuentra en el directorio de su proyecto en la carpeta "assets". Solo necesitamos una función para manejar cuando se completa la lectura del archivo:

Aquí es donde se lleva a cabo el análisis inicial. (Hay algunas variables de las que realizaremos un seguimiento fuera de esta función, ya que las utilizaremos más adelante).

Una vez que tenemos los datos del mapa almacenados, pasamos al análisis de cada juego de fichas. Creé una clase para almacenar la información de cada juego de mosaicos. Aplicaremos cada una de esas instancias de clase en una matriz, ya que las utilizaremos más adelante:

Nuevamente, puede ver que gid aparece nuevamente, en las variables firstgid y lastgid. Veamos ahora para qué es esto.


Comprender "gid"

Para cada tesela, debemos asociarla de alguna manera con un conjunto de mosaicos y una ubicación particular en ese conjunto de mosaicos. Este es el propósito del gid.

Mira el juego de mosaicos grass-tiles-2-small.png. Contiene 72 distintas:

Le damos a cada uno de estos mosaicos un gid único del 1 al 72, para que podamos referirnos a cualquiera con un solo número. Sin embargo, el formato TMX solo especifica el primer gid del conjunto de mosaicos, ya que todos los demás gid pueden obtenerse conociendo el tamaño del conjunto de mosaicos y el tamaño de cada mosaico individual.

Aquí hay una imagen útil para ayudar a visualizar y explicar el proceso.

Entonces, si colocamos el mosaico inferior derecho de este juego de fichas en un mapa en alguna parte, almacenaremos el gid 72 en esa ubicación en el mapa.

Ahora, en el archivo TMX de ejemplo anterior, observará que tree2-final.png tiene una firstgid de 73. Esto se debe a que seguimos contando los gid, y no lo reiniciamos a 1 para cada juego de mosaicos.

En resumen, un gid es una ID única asignada a cada tesela de cada mosaico en un archivo TMX, en función de la posición de la tesela dentro del mosaico y del número de mosaicos a los que se hace referencia en el archivo TMX.


Cargando los conjuntos de mosaicos

Ahora queremos cargar todas las imágenes fuente del conjunto de fichas en la memoria para poder poner nuestro mapa junto con ellas. Si no está escribiendo esto en AS3, lo único que necesita saber es que estamos cargando las imágenes para cada juego aquí:

Hay algunas cosas específicas de AS3 aquí, como usar la clase Loader para traer las imágenes del conjunto. (Más específicamente, es un cargador Loader, simplemente para que podamos almacenar las instancias TileSet dentro de cada Loader. Esto es para que cuando el cargador finalice podamos correlacionar fácilmente el cargador con el conjunto de mosaicos).

Esto puede sonar complicado, pero el código es bastante simple:

Ahora, antes de comenzar a tomar estos tilesets y crear el mapa con ellos, debemos crear una imagen base para colocarlos:

Copiaremos los datos del mosaico en estas imágenes de mapa de bits para que podamos usarlos como fondo. La razón por la que configuré dos imágenes es para que podamos tener una capa superior y una capa inferior, y hacer que el jugador se mueva entre ellas para proporcionar perspectiva. También especificamos que la capa superior debe tener un canal alfa.

Para los oyentes de eventos reales para los cargadores, podemos usar este código:

Esta es una función divertida, ya que puede hacer un seguimiento de cuánto ha cargado la imagen y, por lo tanto, puede proporcionar información al usuario sobre qué tan rápido van las cosas, como una barra de progreso.

Aquí almacenamos los datos del mapa de bits con el conjunto de fichas asociado. También contamos cuántos tilesets han sido cargados por completo, y cuando están listos, podemos llamar a una función (lo llamé addTileBitmapData en este caso) para comenzar a juntar las piezas.


Combinando los azulejos

Para combinar los mosaicos en una sola imagen, queremos construirla capa por capa para que se muestre de la misma manera que aparece la ventana de vista previa en Tiled.

Así es como se verá la función final; los comentarios que he incluido en el código fuente deberían explicar adecuadamente lo que está sucediendo sin complicar demasiado los detalles. Debo señalar que esto se puede implementar de muchas maneras diferentes, y su implementación puede verse completamente diferente a la mía.

Lo que sucede aquí es que estamos analizando solo las teselas con gids que están por encima de 0, ya que 0 indica una tesela vacía y las almacenamos en una matriz. Dado que hay tantos "0 mosaicos" en nuestra capa superior, sería ineficaz almacenarlos en la memoria. Es importante tener en cuenta que estamos almacenando la ubicación del gid con un contador porque usaremos su índice en la matriz más adelante.

En esta sección estamos analizando el nombre de la capa y comprobando si es igual a "Superior" (top). Si es así, configuramos una bandera para que sepamos copiarla en la capa de mapa de bits superior. Podemos ser realmente flexibles con funciones como esta, y usar aún más capas dispuestas en cualquier orden.

Ahora aquí estamos almacenando el gid, que analizamos al principio, en una matriz 2D. Notarás las inicializaciones de matrices dobles; esto es simplemente una forma de manejar matrices 2D en AS3.

También hay un poco de matemáticas pasando. ¿Recuerdas cuando inicializamos la matriz de tiles desde arriba, y cómo mantuvimos el índice con ella? Ahora usaremos el índice para calcular la coordenada a la que pertenece el gid. Esta imagen demuestra lo que está pasando:

Entonces, para este ejemplo, obtenemos el gid en el índice 27 en la matriz de tiles, y lo almacenamos en tileCoordinates[7][1]. ¡Perfecto!

Aquí es donde finalmente llegamos a copiar el juego de fichas en nuestro mapa.

Inicialmente, comenzamos recorriendo cada coordenada de mosaico en el mapa, y para cada coordenada de mosaico obtenemos el gid y verificamos el juego de fichas almacenado que coincida con él, comprobando si se encuentra entre el firstgid y nuestro lastgid calculado.

Si entendiste la sección de comprensión de "gid" de arriba, esta matemática debería tener sentido. En los términos más básicos, está tomando la coordenada del mosaico en el juego de fichas (sourceX y sourceY) y copiándolo en nuestro mapa en la ubicación del mosaico al que hemos enlazado (destX y destY).

Finalmente, al final llamamos a la función copyPixel para copiar la imagen del mosaico en la capa superior o base.


Agregar objetos

Ahora que ha terminado de copiar las capas en el mapa, veamos cómo cargar los objetos de colisión. Esto es muy poderoso porque, además de usarlo para objetos de colisión, también podemos usarlo para cualquier otro objeto, como un encendido o una ubicación de generación de jugadores, siempre que lo hayamos especificado con Tiled.

Entonces, en la parte inferior de la función addTileBitmapData, ingresemos el siguiente código:

Esto recorrerá las capas del objeto y buscará la capa con el nombre "Collision". Cuando lo encuentra, toma cada objeto en esa capa, crea un rectángulo en esa posición y lo almacena en la matriz collisionTiles. De esta forma, todavía tenemos una referencia y podemos ver si hay colisiones si tenemos un jugador.

(Dependiendo de cómo maneje el sistema las colisiones, es posible que desee hacer algo diferente).


Mostrando el mapa

Finalmente, para mostrar el mapa, primero queremos renderizar el fondo y luego el primer plano, para que la estratificación sea correcta. En otros idiomas, esto es simplemente una cuestión de renderizar la imagen.

He agregado un poco de código entre las capas aquí solo para demostrar con un rectángulo que la estratificación sí funciona. Aquí está el resultado final:

Gracias por tomarse el tiempo para completar el tutorial. He incluido un archivo comprimido que contiene un proyecto completo de FlashDevelop con todos los recursos y el código fuente.


Lectura adicional

Si está interesado en hacer más cosas con Tiled, una cosa que no cubrí fue propiedades. El uso de propiedades es un pequeño salto al analizar los nombres de las capas, y le permite establecer una gran cantidad de opciones. Por ejemplo, si quieres un punto de generación enemigo, puedes especificar el tipo de enemigo, el tamaño, el color y todo, ¡desde el interior del editor de mapas de Tiled!

Por último, como habrás notado, XML no es el formato más eficiente para almacenar los datos de TMX. CSV es un buen medio entre un análisis sencillo y un mejor almacenamiento, pero también hay base64 (sin comprimir, zlib comprimido y gzip comprimido). Si está interesado en utilizar estos formatos en lugar de XML, consulte la página de la wiki de Tiled en formato TMX.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.