Un vistazo rápido a Tiled. Un editor de niveles 2D de código abierto

Un requisito muy común incluso para el juego más simple es un editor de niveles. El nivel de sofisticación requerido varía enormemente de un juego a otro, pero muchas de las funciones son bastante comunes. En el nivel más básico, necesita una herramienta para diseñar los gráficos que conforman su mundo. Un poco más avanzado, necesita definir capas, propiedades y volúmenes de colisión. A menudo, las personas lanzan su propia solución, pero ciertamente no es necesario. Un editor de niveles 2D muy popular es Editor de mapas en mosaico que exporta en formato TMX, quizás el formato de juego 2D más compatible (Cocos2D, LOVE, LibGDX y muchos otros, todos admiten TMX de fábrica). Como voy a escribir un tutorial sobre el uso de mapas en mosaico en LibGDX, pensé que primero daría una introducción rápida a Tiled. Tenga en cuenta que solo vamos a rascar la superficie de lo que Tiled es capaz de hacer.

En primer lugar, descargue e instale Tiled. Tiene binarios disponibles para Windows y Mac y una versión fuente (y compilaciones diarias) disponible para Linux. Puedes descargar Tiled aquí. La documentación está disponible. aquí.

La interfaz de usuario en mosaico es bastante sencilla, aunque se ve bastante diferente en todas las plataformas. Hoy usaré la versión de MacOS.

Un mapa en mosaico es fundamentalmente simple. Básicamente estás haciendo una cuadrícula de mosaicos. Un mosaico es una imagen de tamaño fijo dentro de una imagen más grande. La imagen más grande se llama hoja de mosaico. Es algo así como trabajar con legos para hacer un nivel. Aquí hay un mosaico de ejemplo (tomado de aquí ):

Es una imagen de 512×512 compuesta por una serie de mosaicos con los que vamos a pintar nuestro nivel.

Ahora que tenemos nuestros mosaicos, creemos nuestro mapa. Tiled tiene la capacidad de crear mapas en perspectiva ortogonales (directos o «de arriba hacia abajo») o isométricas (perspectiva en ángulo). En este ejemplo, estamos creando un mapa ortogonal. A continuación, debe decidir de cuántos mosaicos consta su mapa en cada dirección. Sí, los mapas en mosaico siempre tienen forma rectangular. Finalmente, debe decidir las dimensiones de su mosaico en píxeles. Mirando el mapa de mosaicos de arriba, no está claro qué tan grande es cada mosaico, pero eso se debe a que algunas de las construcciones más grandes en realidad están compuestas por varios mosaicos. Verá cómo funciona en unos segundos, por ahora simplemente seleccione 32 × 32 píxeles para el tamaño del mosaico y 32 × 32 mosaicos para el tamaño del mapa. En términos de píxeles reales, esto hace que nuestro mapa tenga 1024 píxeles por 1024 píxeles.

Ahora necesitamos cargar nuestro conjunto de mosaicos en Tiled. Seleccione Mapa->Nuevo conjunto de mosaicos

Ahora, en el cuadro de diálogo resultante, asígnele un nombre y, de lo contrario, mantendremos los valores predeterminados. Nuestro conjunto de fichas se compone de fichas de 32×32, por lo que esos valores funcionan. El color de fondo se usa si usa un color de color particular para marcar la transparencia. En este caso, estamos usando el canal alfa para determinar la transparencia, por lo que no necesitamos establecer un valor de color.

Ahora, si observa la esquina inferior de Tiled, verá una cuadrícula de mosaicos disponibles. Simplemente seleccione un mosaico, luego pinte en la ventana derecha con él.

Comencemos pintando rápidamente todo nuestro mapa con un mosaico de hierba. Haga clic en un mosaico de césped en la ventana de conjuntos de mosaicos, así:

Ahora, en la ventana de la izquierda, seleccione la herramienta Relleno (o presione F), luego haga clic en la ventana, y se archivará con el mosaico seleccionado llenando nuestro nivel con una bonita base de césped.

Ahora digamos que queremos rellenar rápidamente algunas carreteras. La baldosa de carretera se compone en realidad de cuatro baldosas separadas. Esto se maneja fácilmente en Tiled, simplemente haga clic en el mosaico superior izquierdo en la ventana del conjunto de mosaicos, luego mantenga presionada la tecla MAYÚS, haga clic en la parte inferior izquierda, así:

Ahora puedes dibujar con las cuatro fichas a la vez simplemente haciendo clic en el mapa. Primero seleccione la herramienta Sello, luego dibuje los mosaicos como desee:

Entonces, ¿qué pasa con los mosaicos con secciones transparentes como estos?

Bueno, estos están diseñados para colocarse en capas sobre otros mosaicos. Lo que nos lleva muy bien a las capas. Si alguna vez ha usado Photoshop o GIMP, probablemente ya tenga una buena comprensión de las capas. Básicamente, las capas se dibujan sobre la parte superior de las capas inferiores. Entonces, por ejemplo, lo que dibuja en la Capa 2 se dibuja sobre lo que dibuja en la Capa 1.

En este momento, solo tenemos una sola capa, agreguemos otra. En el menú superior, seleccione Capa->Agregar capa de mosaico.

Ahora, en el panel Capas, debería ver una segunda capa disponible. Al hacer clic en la casilla de verificación al lado de la capa, se muestra/oculta su contenido. Al hacer clic en la capa en sí, se activa. Haga clic en Capa de mosaico 2.