Diseñador de niveles o mapas para Pilas Engine 2

 

Link a la aplicación: Diseñador de niveles o mapas para Pilas Engine 2

En Pilas Engine 2 se tiene un par de funciones para crear un un nivel al estulo "mapa de mosaicos o Tile Map". En este link se puede acceder al manual donde se detalla esta mecánica.

En resumidas cuentas, se tiene la función definir_mapa:

En esta función cada carácter (letra o punto) es un espacio de 32 píxeles donde el punto significa espacio vacío y las letras indican que en esos lugares debe clonarse un actor.

El actor que corresponde a cada letra se indica en la función defninir_mapa:

Al ejecutar ambas funciones se obtiene los siguiente:

Basado en esta mecánica he creado una aplicación que permite diseñar un nivel de manera más visual: El diseñador de mapas.

El diseñador de mapas es una herramienta pensada para crear escenarios de manera visual. En lugar de escribir cadenas de símbolos, acá podés pintar una cuadrícula y luego exportar el resultado como código listo para pegar en otr proyecto de Pilas Engine.

¿Cómo funciona?

Al iniciar aparece una escena como la siguiente:

Aquí podemos configurar el mapa:

• Tamaño Tale: Se refiere al tamaño de cada cuadrado. Recomiendo dejarlo en 32 y ajustarlo en el proyecto final.
• Filas y Columas: El tamño de la cuadrícula del mapa.

Al clicar en el botón comenzar aparece una cuadrícula de casillas blancas. Cada casilla representa un espacio vacío. Si hacés clic sobre una casilla, cambia de color: primero blanco después rojo, después verde… y así podés ir armando tu diseño. Cada color se traduce en un símbolo dentro del mapa:

• Blanco → .

• Rojo → r

• Verde → v

Más adelante vas a decidir qué actor corresponde a cada símbolo. Por ejemplo, podés decir que r es una plataforma y que v es un enemigo.

Obtener el mapa

Cuando terminás de pintar tu nivel, hacé clic sobre el actor logo. En ese momento pasan dos cosas:

1. Se copia al portapapeles un bloque de código que ya incluye:

   • La definición de los símbolos con this.pilas.definir_mapa.

   • El mapa que acabás de diseñar con this.pilas.crear_mapa.

   Ese bloque está listo para pegar en tu proyecto y editar los nombres de los actores según lo que quieras usar.

2. En pantalla aparece la grilla de símbolos, para que veas cómo quedó tu nivel escrito. Esto se muestra con this.decir, y sirve para comprobar rápidamente el resultado.

Cómo usarlo en tu proyecto

1. Al clicar en el logo, se copia al portapales todo el código necesario.

2. Pegalo dentro de tu proyecto en Pilas Engine.

3. Editá la parte de this.pilas.definir_mapa para que cada letra (r, v, .) apunte al actor que quieras usar.

4. Ejecutá el proyecto: Pilas va a interpretar la grilla y colocar los actores en pantalla según tu diseño.

Por ejemplo, se tiene el siguiente diseño:

En otro proyecto, coloca el código que se copia al portapapeles en la escena donde quiero ese nivel. Se reemplaza verde por caja y rojo por piso:

Ventajas

• Podés diseñar niveles de forma visual y rápida.

• Evitás errores al escribir manualmente cadenas largas.

• Tenés libertad para decidir qué actor corresponde a cada símbolo.

• El resultado es código limpio y listo para integrar en cualquier proyecto.