Introducción al editor de mapas Tiled: Una plataforma para mapas de nivel

En este artículo, te daré una introducción básica al Editor de mapas llamado Tiled y el proceso de diseño que lo rodea, al tiempo que describo las razones para usarlo. También te mostraré rápidamente cómo crear un mapa en Tiled.

Requisitos

• Versión de Tiled 0.8.1: http://www.mapeditor.org/
• Mosaicos que puedes descargar aquí. Estos mosaicos son un conjunto ligeramente modificado del conjunto de mosaicos de la comunidad de OpenGameArt.org: http://opengameart.org

¿Qué es Tiled?

Tiled es un editor de mapas de mosaicos de uso general. Funciona como una herramienta gratuita para permitir la creación sencilla de diseños de mapas. Es lo suficientemente versátil como para permitir especificar cosas más abstractas, como áreas de colisión, posiciones de generación de enemigos o posiciones de encendido. Guarda todos estos datos en un formato tmx conveniente y estandarizado.

¿Cómo funciona Tiled?

En esencia, el proceso de diseño de usar Tiled para crear mapas funciona siguiendo estos pasos:

1. Elige el tamaño de tu mapa y el tamaño del mosaico base.
2. Agrega mosaicos desde las imágenes.
3. Coloca los mosaicos en el mapa.
4. Agrega cualquier objeto adicional para representar algo abstracto.
5. Guarda el mapa como un archivo tmx.
6. Importa el archivo tmx e interprétalo para tu juego.

¿Por qué deberías usar Tiled?

Tener un sistema estandarizado y una poderosa herramienta flexible ya implementada te permite concentrarte en cosas más importantes en tu juego. Con Tiled podrás tomar algunos conjuntos de mosaicos, crear tu nivel y seguir tu camino.

Incluso si no quieres que tu juego tenga mapas basados en mosaicos, Tiled sigue siendo una excelente opción como editor de niveles. Con Tiled puedes especificar el tamaño de cada mosaico en tu imagen; puedes crear tu mapa sin un tamaño estricto en las imágenes. Luego, puedes usar Tiled para todas esas entidades invisibles, como áreas de colisión o generación de objetos dentro de tu mapa.

Una vez que puedas interpretar los datos tmx en tu juego, las herramientas Tiled se convierten en una obra de arte rápida para mapear la canalización. Dado que crear mapas en Tiled es tan simple y no requiere experiencia en programación, incluso los no desarrolladores pueden usarlo.

Otra razón para usar Tiled es que toda la información del diseño del mapa se almacena en el archivo tmx. Esto es poderoso porque te permite enviar el archivo tmx a un reproductor, y ellos instantáneamente tendrán el diseño sin tener que volver a descargar el cliente (asumiendo que el mapa tmx usa texturas que ya están en la computadora del jugador).

Creando tu primer mapa

A la siguiente parte del tutorial, donde usaremos el conjunto de mosaicos anteriormente mencionado, para crear un mapa.

Configuración

Después de iniciar Tiled, ve a Archivo > Nuevo... para comenzar a hacer un nuevo mapa. Aparecerá un nuevo menú donde tiene algunas opciones:

Orientación: Tenemos una selección entre isométrica y ortogonal. Para este artículo, selecciona ortogonal.

Tamaño del mapa: Selecciona 20 para el ancho y la altura, ya que no necesitaremos un mapa grande para este ejemplo. Esto se puede cambiar de tamaño más adelante.

Tamaño del mosaico: Para el tutorial, establece el ancho y el alto en 32px. El tamaño del mosaico no se puede cambiar una vez que lo hayas seleccionado. Tendrás que comenzar un nuevo mapa desde cero si deseas un nuevo tamaño de mosaico

Ahora que tenemos la configuración de las dimensiones del mapa, queremos crear un conjunto de mosaicos para el suelo. Selecciona Mapa > Nuevo conjunto de mosaicos...

Imagen: Selecciona grass-tiles-2-small.png de las imágenes del conjunto de mosaicos incluidas. El campo Nombre se establecerá automáticamente con el nombre del archivo, pero no dudes en cambiarlo según tus deseos.

Azulejos: nuevamente, establece el ancho y el alto en 32px.

Tiled debería verse así:

Añadiendo el terreno

Como puedes ver en la parte inferior derecha de la imagen en la vista Tilesets, tengo cuatro mosaicos seleccionados. Puedes seleccionar uno o varios mosaicos simplemente haciendo clic y arrastrando en la ventana Tilesets. Al hacer clic en el área gris grande, estos mosaicos se estamparán en la coordenada (con la coordenada en la parte inferior izquierda del área gris). Debes estar atento a esto, ya que no podrás estampar fuera de las coordenadas del mapa, 20 en este caso (como se especifica en la configuración de nuestro mapa), o en coordenadas negativas.

Puedes notar que puedes arrastrar el sello por el mapa para una colocación rápida del mosaico. Sin embargo, esto puede ser problemático cuando tienes más de un mosaico seleccionado para tu conjunto de mosaicos, ya que simplemente sobrescribirás los mosaicos anteriores. Una buena solución es una selección aleatoria de los mosaicos que has seleccionado. Puedes habilitar esto haciendo clic en el icono de dados en la parte superior de la ventana. Con esto habilitado, Tiled seleccionará aleatoriamente el mosaico de los que has seleccionado y lo colocará mientras lo arrastras.

¡Asegúrate de guardar con frecuencia!

¡También hay una herramienta de relleno y una herramienta de borrador que estoy seguro de que te serán de utilidad! También puedes rotar e invertir el mosaico seleccionado con las teclas Z y X.

Después de jugar con él por un tiempo, puedes esperar tener algo como esto:

Agregar un objeto de primer plano

Ahora nuestro pequeño mapa se ve un poco desnudo, así que agreguemos un árbol a la escena. Ve a Mapa > Nuevo conjunto de mosaicos... y esta vez selecciona el archivo tree2-final.png. Nuevamente usa un ancho y alto de 32px.

A continuación, queremos crear una nueva capa de mosaico para pasar sobre la capa de césped. Selecciona Capa > Agregar capa de mosaico.

Deberíamos tener Tile Layer 2 ahora en el menú Capas. No es un nombre muy bonito, así que cambiemos el nombre a Primer plano y cambiemos el nombre de Tile Layer 1 a Fondo.

Antes de agregar el árbol completo, simplemente selecciona la base del árbol y agrega el árbol donde desees, como se ve en la imagen a continuación.

Esto puede parecer un poco extraño, pero ten paciencia conmigo. Cuando tengamos este mapa en nuestro juego, querríamos que nuestro personaje aparezca detrás del árbol cuando pase, por lo que tendremos que darle a las hojas del árbol alguna propiedad para decirle a tu juego que lo represente sobre el personaje. Es posible que hayas notado que esto no coincide perfectamente con los tamaños de los mosaicos, pero puede modificarse simplemente cambiando el tamaño de la imagen o los tamaños de los mosaicos.

En este caso, creemos una nueva capa, y asígnale el nombre Top, para decirle a nuestro juego que la muestre encima del personaje.

Ahora, con la capa superior seleccionada, selecciona el resto del conjunto de mosaicos del árbol (todo excepto el tronco) y colócalo en el tronco. Puedes seleccionar áreas más complejas del conjunto de mosaicos manteniendo presionada la tecla Ctrl.

Hay una variedad de formas de decirle al juego que queremos renderizar cosas encima de otras, como agregar una propiedad a una capa o un mosaico específico. Prefiero usar una capa para todo lo que se renderizará sobre el personaje, ya que ayuda a mantener todo organizado.

Tiled sin mosaicos

Como mencioné, puedes usar Tiled sin que esté "en mosaico". He aquí un ejemplo rápido.

Agrega un nuevo conjunto de mosaicos con Mapa > Nuevo conjunto de mosaicos... y selecciona el árbol nuevamente, pero esta vez establece el ancho y la altura del mosaico en 256px. Básicamente, estás creando un conjunto de mosaicos a partir del tamaño exacto de la imagen, por lo que lo convierte en un mosaico más grande. Esto crea mucho más espacio libre para la ubicación, ya que básicamente podrías hacer tu mapa completo con cualquier editor de imágenes sin estar limitado a los tamaños de mosaico y luego importarlo usando este método. Desde allí puedes agregar objetos que permitan cualquier cosa.

Especificación de colisiones

Ahora bien, si quisiéramos especificar las colisiones, hay algunas formas en que podemos hacerlo también. Voy a usar una capa de objeto ya que se pueden usar para casi cualquier cosa, así que será una buena introducción.

Selecciona Capa > Agregar capa de objeto. Con la capa de objeto seleccionada, selecciona "Insertar objeto" en la parte superior del menú. Ahora puedes hacer clic y arrastrar un cuadro alrededor del tronco del árbol para definir el cuadro de colisión.

¡Eso es! Date una palmada en la espalda porque acabas de completar el mapa inicial.

Conclusión

Gracias por leer este artículo. Espero que te haya resultado una introducción útil a Tiled. A continuación, comprueba cómo interpretar el formato TMX y obtén este mapa en su motor de juego.