Tutorial de Godot – Parte 07: Usando mapas de mosaicos para crear el mapa del juego

En este tutorial, veremos cómo usar el Editor TileSet de Godot para crear varios tipos de mosaicos. A medida que vayamos creando los mosaicos, los utilizaremos en un TileMap para dibujar el mapa de nuestro juego.

En Godot 3.2, hay 3 tipos de fichas:

  • Mosaicos individuales: mosaicos individuales que pueden abarcar una o más celdas del mapa de mosaicos.
  • Mosaicos automáticos: al usar mosaicos automáticos, puede dibujar fácilmente áreas del mapa sin colocar manualmente mosaicos individuales uno a la vez. El algoritmo de mosaico detectará automáticamente los bordes y las partes internas de un área y seleccionará el submosaico correcto para usar.
  • Atlas de mosaicos: un atlas es simplemente una colección de mosaicos individuales agrupados.

Vamos a analizar este tipo de mosaicos uno por uno.

Pasos preparatorios

Abra el proyecto SimpleRPG. Si siguió el tutorial anterior , elimine los nodos Rock , MovingRock y Flowers de la escena y luego elimine el archivo Flower.gd .

Cree una carpeta llamada Tilesets y mueva el archivo map_tiles.png a ella. Si no ha descargado el archivo en el tutorial anterior, puede descargarlo ahora haciendo clic en el botón a continuación (cuando importe la imagen, recuerde desactivar el filtro en el panel Importar ).

Descargar «Teselas de mapa SimpleRPG»map_tiles.png – 5 KB

Ahora, agregue un nodo TileMap a Root .

Agregar un nodo de TileMap

Un TileMap es una cuadrícula de mosaicos que se utiliza para crear un mapa de juego. Hay muchos beneficios en el uso de mapas de mosaicos. En primer lugar, puedes dibujar un mapa simplemente pintando mosaicos en una cuadrícula, que es mucho más rápido que colocar manualmente todos los sprites. Además, puede dibujar mapas mucho más grandes porque los nodos de TileMap están optimizados para esta tarea. Finalmente, los mosaicos pueden incluir formas para colisiones, oclusión de luz y navegación.

Los mosaicos que usaremos en nuestro juego tienen un tamaño de 16×16 píxeles. Entonces, en el Inspector , debemos establecer el Tamaño de celda de TileMap en 16×16 .

Una vez hecho esto, podemos crear el TileSet que se usará en este TileMap . En el inspector, haga clic en [vacío] cerca de Conjunto de mosaicos y seleccione Nuevo conjunto de mosaicos .

Crear nuevo conjunto de mosaicos

Ahora, haga clic en el recurso TileSet recién creado :

Haga clic en el recurso TileSet

Se abrirá el editor de TileSet .

El Editor TileSet aparecerá en la parte inferior de la ventana de Godot

césped autotiles

Para empezar, crearemos un autotile que nos permitirá dibujar hierba colocando al azar varios tipos de mosaicos . Esto hará que el terreno sea más interesante y visualmente agradable.

Para facilitar la edición, haga clic en las dos flechas en la parte inferior derecha o presione Shift+F12 para maximizar el área de trabajo.

Agregue la imagen con los mosaicos presionando el botón Más en la parte inferior izquierda y seleccione map_tiles.png en la carpeta Tilesets. Una vez agregada la imagen, use los botones de zoom para ampliarla.

Ahora haga clic en el botón New Autotile . Aparecerá una nueva pestaña llamada Región y su barra de herramientas.

Haga clic en el segundo botón de la barra de herramientas para activar Grid Snap . Es muy probable que la cuadrícula que aparece sea de un tamaño incorrecto, como en la siguiente imagen:

¡El tamaño de la cuadrícula es incorrecto!

Cambiar el tamaño de la cuadrícula no es particularmente intuitivo. Para hacer esto, seleccione una región aleatoria de la imagen: solo en este punto aparecerá la sección Opciones de ajuste en el Inspector . Cambie los valores x e y del Paso a 16 para establecer el tamaño de cuadrícula correcto.

Ahora el tamaño de la cuadrícula es correcto

Seleccione los 4 cuadrados de hierba en la parte superior izquierda. Compruebe que en el Inspector , Mosaico seleccionado → Tamaño de subtile está establecido en 16,16:

Cuando hay una región seleccionada, aparecen más pestañas:

  • Colisión : aquí puede dibujar las formas de colisión de los mosaicos.
  • Oclusión : en esta pestaña puedes dibujar las formas de oclusión utilizadas por el sistema de iluminación de Godot.
  • Navegación : aquí puedes dibujar las formas que utiliza el sistema de navegación de Godot.
  • Máscara de bits : se utiliza para configurar el sistema de mosaico automático.
  • Prioridad : cuando desee colocar mosaicos al azar, debe establecer sus prioridades aquí.
  • Icono : es la pestaña donde eliges el icono del mosaico
  • Índice Z : aquí puede configurar el índice Z de cada mosaico

Vaya a la pestaña Máscara de bits . Explicaré cómo funciona esta pestaña más adelante, cuando creemos el mosaico automático de arena. Por ahora, confíe en mí y seleccione los cuatro mosaicos de hierba con el botón izquierdo del mouse (verá que cada mosaico se divide en subcuadrados de 2 × 2, seleccione todos los cuadrados).

En Bitmask, seleccione todos los cuadrados de hierba

Ahora, ve a la pestaña Prioridad .

Al hacer clic en cada mosaico, puede establecer su probabilidad de uso (ahora están todos configurados en 1/4). Seleccione la ficha completamente verde y eleve su probabilidad a 17 de 20 para que sea la más utilizada.

Finalmente, vaya a la pestaña Icono y seleccione el icono de mosaico automático. Elijo el mosaico de hierba en la esquina superior derecha.

Usando hierba autotile

Antes de probar el autotile que acabamos de crear, establezca su nombre en el Inspector a Grass y guarde el TileSet en el disco. En el Inspector , haga clic en el icono del disco , elija Guardar y guarde el archivo en la carpeta Tilesets con el nombre MapTileset.tres .

Haga clic aquí para guardar el TileSet

Ahora, en el panel Escenas , haga clic en TileMap . El Editor TileSet se cerrará y cambiará al modo de dibujo.

Hay cuatro herramientas para dibujar el mapa:

  • Paint Tile (tecla P): se utiliza para dibujar una sola celda del mapa de mosaicos.
  • Cubo de llenado (tecla G): se utiliza para llenar un área cerrada con el mosaico seleccionado.
  • Seleccionar mosaico (control): se utiliza para seleccionar el tipo de celda debajo del puntero del mouse.
  • Seleccionar (Control+B): se utiliza para seleccionar un área del mapa de mosaicos.

En las herramientas Paint y Bucket , use el botón izquierdo del mouse para dibujar mosaicos y el botón derecho para borrarlos.

Se puede acceder a estas herramientas (y otras) en la barra de herramientas del espacio de trabajo:

Intente dibujar un contorno con la herramienta Pintar y luego rellénelo con Cubo :

Para nuestro juego, crearemos un mapa de 50×50 celdas. Para dibujarlo más rápido, primero dibuje todos los bordes y luego rellene el área con la herramienta Cubo.

Si desea hacer algunos toques finales a mano, puede activar la casilla de verificación Desactivar mosaico automático . Aparecerá un nuevo cuadro, con todas las sub-fichas dentro de la auto-ficha de Hierba . Puede seleccionar uno de estos mosaicos y usarlo para dibujar el mapa como vimos anteriormente.

Grass autotile con Disable Autotile activado

Por ejemplo, usé la colocación manual para crear un área llena de flores en la esquina suroeste del mapa.

Dibujé muchas margaritas al sureste del mapa.

Si después de dibujar el mapa, ya no ves al jugador, verifica en el Inspector que el jugador tiene un valor de Índice Z de 1.

Configuración de la cámara del juego

Si inicias el juego ahora, verás al jugador moviéndose en el mapa, pero la cámara permanecerá fija y el jugador podrá salir de la pantalla. ¡Obviamente, este no es el comportamiento que queremos! Queremos que la cámara siga al jugador cuando se mueve hacia los bordes de la pantalla.

La forma más sencilla de hacerlo es crear un nodo Camera2D como elemento secundario de Player. Con Camera2D seleccionada, en el Inspector active la casilla de verificación Actual para convertirla en la cámara activa para la escena actual. Luego, habilite ambas propiedades de Margen de arrastre para mover la cámara solo cuando el jugador alcance los márgenes de arrastre. Al hacer esto, hay un rectángulo en el centro de la pantalla dentro del cual el jugador puede moverse sin mover la cámara).

Ahora, dado que Camera2D es un elemento secundario del nodo Player , lo seguirá en cada movimiento a medida que se mueve por el mapa. ¡Nuestro proyecto se parece cada vez más a un juego real!

¡Advertencia! Si al ejecutar el juego tiene problemas con el mapa de mosaicos que causan parpadeos intermitentes, parpadeos u otras anomalías en los mosaicos, puede probar una de estas cosas:

  • en Configuración del proyecto , active Rendering → Quality → 2d → Use Pixel Snap (si siguió mis tutoriales, ya debería haberlo activado)
  • active Y Sort en el nodo TileMap (esto funcionó para mí)
  • en Configuración del proyecto , deshabilite Renderizado → Calidad → Profundidad → HDR .

Arena autotile

Para crear el mosaico automático de arena, vuelva a abrir el conjunto de mosaicos haciendo doble clic en el archivo MapTileset.tres . Luego, seleccione la imagen en la columna izquierda del Editor TileSet y, si es necesario, haga zoom en la imagen para trabajar más cómodamente.

Ahora, haga clic en New Autotile y seleccione los mosaicos de arena como en la imagen a continuación.

Seleccionar todas las baldosas de arena

Vaya a la pestaña Máscara de bits .

Bitmasking es un método para seleccionar automáticamente el sprite apropiado de un autotile definido. Funciona estableciendo qué partes de cada sub-mosaico son internas (es decir, qué partes no son bordes). Con esta información, Godot puede decidir automáticamente qué sprite dibujar para una celda de un mapa de mosaicos, en función de la celda que lo rodea.

Entonces, lo que tenemos que hacer es seleccionar, con el botón izquierdo del mouse, qué partes de nuestras sub-tejas son internas, como se muestra en la siguiente imagen:

En Bitmask, seleccione las partes internas de los mosaicos

Si selecciona un cuadrado por error, puede deseleccionarlo con el botón derecho del mouse.

Como puede ver, cada mosaico se divide en una cuadrícula de 2 × 2. Este tipo de mosaico automático nos permite tener hasta 16 mosaicos secundarios diferentes para diseñar nuestras áreas de arena (nuestra imagen tiene solo 15 mosaicos secundarios para arena porque falta un mosaico con bordes en los 4 lados).

Hay otros dos tipos de máscaras de bits en las que los subtiles se dividen en cuadrículas de 3×3, y que nos permiten tener mapas más complicados (con hasta 48 tipos diferentes de subtiles), pero no los usaremos en este tutorial.

Una vez configurada la máscara de bits , vaya a la pestaña Icono y seleccione el icono para este mosaico automático. Finalmente, en el Inspector , cambie el nombre a Arena y guarde el conjunto de fichas.

Uso de autotiles de arena

Haga clic en el nodo TileMap y luego, en el espacio de trabajo, seleccione el mosaico Arena . Si intentas dibujar un área de arena, verás que Godot colocará automáticamente los bordes de la manera correcta.

Dibujar un área de arena

Agregue algunas áreas de arena para que el mapa sea más interesante. Mi resultado es este:

He colocado un área de arena en mi mapa

agua autotile

Repita el procedimiento que usamos para el mosaico automático Sand , esta vez seleccionando todos los sub-tiles de agua en la imagen.

El agua es un obstáculo que nuestro jugador no podrá atravesar. Entonces, una vez que haya configurado la Región , la Máscara de bits y el Icono , vaya a la pestaña Colisiones para dibujar formas de colisión.

La pestaña Colisión

Echemos un vistazo rápido a la barra de herramientas. Yendo en orden, los botones son:

  • Seleccionar sub-mosaico actual : esta herramienta se utiliza para seleccionar el sub-mosaico para editar.
  • Crear nuevo rectángulo : con esta herramienta seleccionada, al hacer clic en un submosaico se creará una forma de colisión rectangular, que puede modificar arrastrando las esquinas.
  • Crear nuevo polígono : con esta herramienta puedes dibujar una forma de colisión poligonal.
  • Eliminar forma : elimina la forma de colisión actual.
  • Mantener el polígono dentro de la región rect : cuando está habilitado, el área de dibujo se limitará a la región de sub-mosaico seleccionada.
  • Ajustar a la cuadrícula : cuando está habilitado, limita el posicionamiento de los puntos de los polígonos a la cuadrícula.

Antes de comenzar a dibujar las formas de colisión, asegúrese de que Mantener el polígono dentro de la región rect esté habilitado y Ajustar a la cuadrícula deshabilitado.

Seleccione el mosaico secundario de agua en la parte superior izquierda y luego haga clic en Crear nuevo polígono . Usando el botón izquierdo del mouse, dibuje el polígono un punto a la vez hasta que se cierre, como en la siguiente figura:

Dibujar forma de colisión sobre el agua

Si comete un error, puede cancelar el procedimiento haciendo clic con el botón derecho del mouse. Una vez que haya dibujado el polígono, puede editarlo arrastrando sus puntos o eliminarlo con el botón Eliminar forma de la barra de herramientas.

Ahora, repita este procedimiento para todos los sub-mosaicos, hasta que obtenga el resultado en la imagen de abajo.

Finalmente, cambie el nombre del mosaico automático en Agua y guarde el conjunto de mosaicos.

Usando agua autotile

Use este mosaico automático para dibujar algunas áreas de agua, al igual que usó el mosaico automático Arena antes.

Para evitar que el jugador abandone el mapa, lo rodearemos completamente de agua. Active Desactivar mosaico automático y agregue un borde de agua a todo el mapa (tendrá que seleccionar manualmente el borde y los mosaicos de esquina correctos). Agregue un «grosor» de 7 mosaicos de agua alrededor del mapa, de modo que cuando el jugador esté en el borde del mapa, el fondo gris no sea visible.

Mi resultado final es este:

El juego está ambientado en una pequeña isla.

Intente iniciar el juego y asegúrese de que el jugador no pueda atravesar áreas de agua.

Atlas de obstáculos

Moviéndose por el mapa, el jugador encontrará obstáculos que bloquearán su movimiento. Para mayor comodidad, agruparemos todas estas fichas de obstáculos en un atlas.

Vuelva a abrir el archivo del mosaico, seleccione la imagen de la izquierda y haga clic en Nuevo atlas . Luego, seleccione el área de la imagen que contiene los sprites de obstáculos.

Cambie a la pestaña Colisión y, para cada mosaico, dibuje el polígono de colisión como lo hicimos para Agua .

Finalmente, elija el icono del atlas, establezca su nombre en Obstáculos y guarde el TileSet .

Usando el atlas de obstáculos

Haga clic en el nodo TileMap y seleccione el atlas de Obstáculos que acabamos de crear. Aparecerá un nuevo cuadro, donde puedes seleccionar qué obstáculo colocar en el mapa. Coloca obstáculos a tu antojo.

Obtendrás algo como esto:

Azulejo de árbol

Por último, crearemos un mosaico único para colocar árboles en el mapa.

Vuelva a abrir MapTileset.tres y seleccione la imagen de la izquierda. Haga clic en New Single Tile y seleccione los dos sub-tiles que componen el árbol.

Cambie a la pestaña Colisión y dibuje un polígono que encierre solo la parte inferior del árbol, como se muestra en la siguiente imagen:

Finalmente, establezca el nombre del mosaico en Árbol y guarde el conjunto de mosaicos.

Usando el mosaico del árbol

Si colocamos árboles directamente en el TileMap que hemos usado hasta ahora, el suelo de abajo sería reemplazado por el mosaico del árbol. Pero queremos que los árboles se dibujen sobre nuestro mapa, así que tendremos que crear un segundo TileMap solo para ellos. Créalo y llámalo Trees TileMap .

En el Inspector , haga clic en [vacío] junto a Conjunto de mosaicos , elija Cargar y seleccione MapTileset.tres para usar el mismo conjunto de mosaicos que creamos anteriormente.

Cuando el jugador camina detrás de un árbol, debe estar oculto por su sprite. Por lo tanto, debemos establecer el valor del Índice Z de Tree TileMap en 2, de modo que se dibuje sobre el Reproductor (que tiene el Índice Z 1).

Además, aún en el Inspector , establezca el Tamaño de celda en 8 × 8, para que pueda colocar los árboles en grupos más cercanos.

Con Tree TileMap seleccionado, coloque los árboles donde desee. Si coloca los árboles juntos y uno encima del otro, verá que están dibujados en el orden correcto para simular la distancia y la perspectiva.

A continuación puedes ver mi mapa final.

¡El mapa del juego está completo!

Conclusiones

En este tutorial aprendimos a usar el sistema de mosaico de Godot para crear el mapa del juego de nuestro RPG. Además de eso, usamos el nodo Camera2D para hacer que la cámara del juego siga al jugador mientras se mueve por el mapa.

Puedes probar lo que hemos hecho hasta ahora haciendo clic aquí:Juega SmallRPG (Tutorial 7)

Actualmente, el sprite del jugador siempre permanece igual, ya sea que el jugador esté quieto o en movimiento. En el próximo tutorial, aprenderemos cómo animar el sprite del jugador según la dirección en la que se gira y si se está moviendo o no. Además, agregaremos animaciones para dos tipos de ataques de jugadores (espada y bola de fuego).