En este tutorial vamos a explorar la funcionalidad del mapa de mosaicos integrada en el motor del juego Godot. Un mapa de mosaicos es un mapa de juego en 2D compuesto por capas de «mosaicos», que son esencialmente solo un sprite de tamaño fijo con algunas propiedades adicionales. Le permite pintar rápidamente un nivel y reutilizar recursos artísticos, lo que reduce en gran medida los requisitos de almacenamiento y memoria para los niveles. Además de admitir mapas de mosaicos, Godot también incluye un práctico editor, aunque ciertamente hay algunas verrugas.
Hay un Versión de video HD de este tutorial disponible aquí o incrustado debajo.
Vamos a necesitar dos escenas para este ejemplo, una para crear nuestro mosaico y otra para usarlo.
Creación de un conjunto de fichas
Sin embargo, antes de continuar, necesito un mosaico para usar. En lugar de crear uno, voy a usar Éste de OpenGameArt.org. Por supuesto, puede usar cualquier imagen que desee, solo asegúrese de que los mosaicos sean del mismo tamaño y no tengan espacio entre ellos (si desea mantener las matemáticas fáciles).
Aquí está el mosaico que elegí:
Sin embargo, esta versión está reducida, use el enlace de arriba si desea usar exactamente los mismos mosaicos. Cada mosaico en esta imagen tiene un tamaño de 32 × 32 píxeles. Esto será importante en breve.
Ahora vamos a crear un mosaico en Godot. Crea una nueva escena. Desafortunadamente, este proceso requiere mucha mano de obra, pero también es muy poderoso. Cree un Nodo raíz, luego un Sprite para su primer mosaico. Cada mosaico debe tener un nombre único. Solo voy a usar un subconjunto de lo que está disponible en esa hoja de sprites, pero simplemente repite el proceso para agregar más.
Cree una jerarquía como esta:
Ahora para Sprite Tile1. Ahora configura la textura del sprite en tu hoja de sprites. Es importante destacar que configure Region en on y configure Region Rect en 0,0,32,32, así:
Esto establece la fuente de imagen de este mosaico en una región de 32 × 32 en la esquina superior izquierda de la textura. Ahora deberías ver:
Ahora configuremos el ajuste, para que podamos organizar nuestros mosaicos en una cuadrícula agradable. Seleccione Editar->Configurar Snap
Establezca el paso de cuadrícula en las mismas dimensiones que sus mosaicos, en mi caso 32 × 32:
Ahora seleccione «Usar Snap» como se ve en el menú de arriba.
La siguiente parte es opcional, si quieres usar física o colisiones o no. Si lo hace, ahora debemos configurar StaticBody y alcanzar los límites de detección. Este proceso es el mismo que atravesamos en el tutorial anterior así que no voy a entrar en detalles sobre cómo. Sin embargo, desea el resultado final como este:
Luego defina las áreas de su CollisionsPolygon2D que son colisionables o no, así:
Activar y desactivar el complemento es fundamental aquí. Ajustar facilita la creación del cuadro delimitador inicial, ya que se ajustará automáticamente a cada esquina. Sin embargo, cuando comience a agregar detalles finos, asegúrese de apagarlo.
Ahora repita este proceso para cada mosaico que desee incluir de su hoja de sprites. Puede hacer que el proceso sea mucho más rápido usando la opción Duplicar (o Ctrl +D). Simplemente seleccione su primer mosaico y luego duplíquelo. Luego, solo necesita reposicionarlo en el mapa, redefinir los límites de CollisionPolygon2D y, por supuesto, actualizar la región al siguiente mosaico, así:
Esto seleccionará el siguiente mosaico de la parte superior izquierda de la imagen. Repita hasta que haya definido todos sus mosaicos. ¡Sí, sería bueno si este fuera un proceso automatizado!
Como soy perezoso, solo voy a definir tres mosaicos, así:
Que se ven así con polígonos de colisión definidos:
Tenga en cuenta que no había necesidad de poner espacio entre cada mosaico como tengo aquí. Ahora que hemos definido nuestros mosaicos, primero guarde su escena, yo llamé al mío tilemap.scn. Ahora vamos a exportar un mapa de mosaicos. Simplemente elija Escena->Convertir a…->TileSet…
Llamé al mío tileset.xml. Tenga en cuenta la opción Fusionar con existente. Cuando realice cambios en su conjunto de mosaicos en el futuro, probablemente desee desactivarlo si desea que sus cambios se sobrescriban por completo.
Personalmente, encontré que la exportación del polígono de colisión era extremadamente defectuosa. Es posible que desee abrir el archivo XML generado y asegurarse de que la información de colisión se haya exportado correctamente:
Usar un mapa de mosaicos
Ahora que hemos creado nuestro conjunto de teselas, nuestros polígonos de colisión configurados y todo listo, es hora de crear una nueva escena y luego crear un mapa de teselas.
El nodo que desea agregar es un TileMap, así:
Configure su mapa de mosaicos así:
Si está utilizando Física, active Usar cinemática; de lo contrario, no lo haga. Establezca el Tamaño de celda al tamaño de sus mosaicos y el conjunto de mosaicos a su conjunto de mosaicos recién exportado.
Notará que ahora, con el nodo TileMap seleccionado, sus mosaicos aparecerán en el lado izquierdo de la ventana del editor 2D:
Ahora puede usarlos para «pintar» su nivel, así:
Puede crear varios objetos TileMap si necesita tener diferentes capas de mosaicos (como accesorios de primer plano, por ejemplo). Hoy, sin embargo, vamos a ceñirnos a este simple ejemplo.
Finalmente, creé un sprite RigidBody para interactuar con nuestro mapa de mosaicos, por lo que nuestra escena final se ve así:
Ahora, cuando lo ejecutemos, debería verse así:
Puedes hacer algunas ediciones a tu mapa de mosaicos desde Godot sin volver a exportar el conjunto de mosaicos. Con su Tilemap seleccionado, seleccione su propiedad Tileset, luego Edite:
Notará que aparece un nuevo menú Tema, que le permite editar su Tileset, como agregar nuevos elementos:
También puede ver los mosaicos que componen el conjunto de mosaicos en el Inspector:
