Tema 12. Godot Engine. Tiles y TileMap

Un punto muy importante a la hora de desarrollar un videojuego es el mapa de nuestro juego. Para diseñar el mapa de nuestro juego, decorados y escenario, usaremos un archivo de imagen denominado Tileset. Aunque también es posible usar imágenes únicas por separado.

Antes de empezar con este tema, debemos buscar un tileset de plataformas para poder diseñar nuestro proyecto. Crearemos una carpeta en nuestra zona de recursos y añadiremos nuestras imágenes en formato png.

Los tileset están formados por muchos Tiles, donde cada Tile representa una porción de una imagen. Una imagen completa puede estar formada por un Tile o varios Tiles y están representadas por cuadros. Esos cuadros tienen un tamaño proporcional que han sido creados por diseñadores.

Para configurar el tamaño de los cuadros en nuestro proyecto iremos a los tres puntos verticales que hay en el centro superior del menú y seleccionaremos: Configurar Ajuste

Según el tamaño de cada SpriteSheet o configuración de la resolución se deberá cambiar el tamaño de ajuste. En este ejemplo seleccionaremos un Ajuste de 70px X 70px

Para poder ver el ajuste de cuadrícula en nuestra ventana de proyecto activaremos la opción: Ajustar Opciones de cuadrícula Activar/Desactivar en nuestro menú: las cuadrículas se muestran en el proyecto:

Si activamos el ajuste inteligente (recomendado en cierto tipo de diseños o proyectos ya que no existe precisión) , entonces el editor sitúa los objetos en función de los ajustes que hemos seleccionado en los Tileset de nuestro proyecto. Es decir, si arrastramos a nuestro personaje con esta opción activada, lo moveremos de cuadro a cuadro.

Un Tilemap es una cuadrícula de mosaicos que se usa para crear el mapa de un juego. Hay muchas ventajas al usar los nodos TileMap para diseñar los niveles. Primero, hacen posible dibujar el mapa «pintando» los tiles en una cuadrícula, lo que es mucho más rápido que colocar nodos Sprite individuales uno por uno.

Para empezar a construir con TileMap, añadiremos un Nodo hijo a nuestro proyecto. El nodo es un TileMap.

Al crear el Nodo TileMap, observaremos que se crea un nuevo Grid (naranja) en nuestra pantalla. Eso es porque dicho TileMap tiene su configuración por defecto y por lo tanto deberemos ajustarlo a las medidas de nuestro proyecto:

Este tamaño lo podemos cambiar en las propiedades del TileMap, Cell propiedades X e Y: (Por defecto es de 64px X 64px)

Por lo tanto, en el tema anterior habíamos configurado las rejilla de 70px X 70px , ahora tendremos que cambiar la propiedad Cell del TileMap por el mismo tamaño y observamos como las rejillas naranja se ajustan a nuestra rejillas del proyecto:

OJO: En realidad el tamaño que configuremos debe ser proporcional al Tileset del diseñador. Por lo tanto, previamente debemos saber sus medidas. En este ejemplo usaremos 70px x 70p

Una vez hecho esto, ya podemos añadir nuestra imagen tileset a nuestro Nodo TileMap. Vamos a las propiedades del Nodo TileMap -> Nuevo TileSet y hacemos Click sobre Nuevo TileSet.

Observaremos que en la parte inferior de nuestro editor aparece una nueva ventana y se muestra un botón + en la parte inferior izquierda:

Hacemos Click en ese botón + y seleccionamos el tileset que queramos. Ahora observemos que se muestra el Tileset completo en la ventana inferior:

Los botones redondos – y + son para hacer zoom

Ahora, a partir de la imagen podemos insertar un único Tile (+individual), un grupo de Tiles (+ Nuevo AutoTile) o todos los Tiles que se muestran en la imagen (+NuevoAtlas)

Vamos a seleccionar TODOS los Tiles de nuestra imagen para poder trabajar con ellos. Para ello hacemos Click en +NuevoAtlas

Hacemos Click en el botón Region y seleccionamos con el ratón todos los Tiles (Imágenes). Intentamos ser bastante precisos a la hora de seleccionar los todos tiles.

Una vez seleccionados vemos que la propiedad de los Tiles set seleccionados por defecto es de 32px x32px. Los cambiamos al tamaño de nuestro proyecto: 70px x 70px

Modificamos Step x=70 y y=70 y Subsize x=70 y y=70 (siempre los debemos modificar según la resolución que tengamos de nuestros spritesheet)

Una vez ajustada la selección, recordad que hay que ser muy precisos, en caso contrario podemos borrar y volver a seleccionarlos hasta ser precisos, ya podemos empezar a situar Tiles para crear nuestro escenario. Para ellos hacemos Click sobre el Nodo TileMap

Recordad que esa precisión vendrá determinada por el tamaño que el diseñador ha dado al tilemap, por lo tanto tendremos que saber el tamaño de la cuadrícula del TileMap y ver qué tamaño tiene cada cuadro.

Si vamos al Nodo TileMap observamos que en la parte derecha aparecen en una ventana cada uno de los Tiles:

Ahora solo tenemos que seleccionarlos y arrastrarlos sobre la cuadrícula de nuestro proyecto.

Para borrar un Tile del escenario seleccionamos la opción Seleccionar (tecla M) de la parte superior del menú, marcamos el Tile a borrar y pulsamos tecla Supr (Suprimir) o CMD+Retroceso en Mac.

Una vez diseñada nuestra pantalla, podemos observar el resultado ejecutando con el Play nuestro proyecto.

De momento, al no estar definidas las colisiones de los TileMaps, nuestro personaje todavía no colisiona con las plataformas de los Tiles.

Las opciones de usar TileMap varían según el tipo de imagen que tenemos. No es lo mismo trabajar con imágenes individuales que con el conjunto de imágenes agrupadas en un Spritesheet. En el caso de tener un SpriteSheet haremos lo siguiente:

Creamos el Nodo TileMap. En las propiedades del TileMap creamos el TileSet y arrastramos el SpriteSheet dentro de la ventana de TileSet. También podemos hacerlo pulsando el botón +.

Hacemos Click en Nuevo Tile Individual 

Activamos el ajuste de cuadrícula.

Seleccionamos la imagen que queramos de la parte inferior según la cuadrícula. Recordar que en la parte derecha deberemos ajustar el tamaño de cada imagen para recortarla perfectamente. (Propiedades de Snap Options)

Luego marcaremos la colisión y el Bitmask que nos permitirá pintar los Tiles de forma automática según hayamos marcado en el bitmask de cada tile. 

Usar AutoTiles requiere práctica.

La forma más sencilla para diseñar es usar Nuevo Tile Individual (Así creamos un tile del tamaño que queramos por cada imagen) Lo iremos haciendo de uno en uno, pero será mucho más sencillo cuando vayamos a diseñar nuestra escena.

Creamos el TileMap igual que lo hemos hecho anteriormente. Pero esta vez hacemos click en  la opción +Nuevo Tile Individual

Seleccionamos con el ratón el área de nuestra imagen (tile) que deseamos.

También podemos marcar (seleccionamos el área con el ratón) la colisión desde el botón Colisión. Esta opción la explicaremos con más detalle en los siguientes apartados.

En la propiedad Name del TileSet podemos escribir el nombre de dicha imagen. En este ejemplo le ponemos Tile1.

Y al hacer click sobre el Nodo TileMap que hemos creado observamos que el Tile1 está en la ventana (paleta de Tiles)  para poder ser arrastrado y añadirlo a la escena.

Si queremos añadir otro Tile a nuestra escena repetimos el proceso.

Vamos al editor de Tiles (haciendo click en +Nuevo Tile Individual)

A veces es posible que tengamos una colección de objetos (imágenes) agrupadas en un único SpriteSheet y queremos extraer una imagen sobre un Nodo Sprite.

Para hacer esto primero creamos el Nodo Sprite. Sobre la propiedad Texture arrastramos todo el SpriteSheet. Activamos la propiedad Enabled de Region.

Vamos a la región de Texturas inferior y seleccionamos el Modo de ajuste Ajuste de Píxeles:

Y con el ratón marcamos la imagen deseada.

Esto lo podemos repetir por cada objeto que deseamos añadir a nuestra escena, creando nuevos Sprites usando el mismo SpriteSheet y seleccionando distintas imágenes.

Cuando ejecutamos el proyecto es posible que veamos unas rayas molestas intermitentes que aparecen entre los Tiles dibujados si estamos usando la cámara.

Para solucionar el problema de las rayas entre Tiles cuando nos movemos con la cámara:

ÍNDICE