Creación de Videojuegos. Godot Engine. Tiles y TileMap

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.

SpriteSheet en la ventana derecha. Godot.
SpriteSheet en la ventana derecha. Godot.

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

Configurar Ajuste desde el Menú de Godot
Configurar Ajuste desde el Menú de Godot

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

Configuración del ajuste de cuadrícula en un proyecto de Godot.
Configuración del ajuste de cuadrícula en un proyecto de Godot.

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:

Cuadrícula ajustada en la escena. Godot
Cuadrícula ajustada en la escena. Godot

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.

TILEMAP

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.

Creamos un Nodo TileMap en Godot
Creamos un Nodo TileMap en Godot

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:

Grid en color naranja de un TileMap. Godot
Grid en color naranja de un TileMap. Godot

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

Cambio de propiedades del TileMap en Godot
Cambio de propiedades del TileMap en Godot

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

Cambio de tamaño de un TileMap. Godot
Cambio de tamaño de un TileMap. Godot
Ajuste del Grid en nuestra escena. Godot
Ajuste del Grid en nuestra escena. Godot

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.

Añadimos el TileSet a nuestro TileMap. Godot
Añadimos el TileSet a nuestro TileMap. Godot

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

Ventana inferior para añadir el Tile. Godot
Ventana inferior para añadir el Tile. Godot

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

El SpriteSheet añadido aparece en la ventana Tileset. Godot
El SpriteSheet añadido aparece en la ventana Tileset. Godot

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)

Propiedades Snap options. Godot
Propiedades Snap options. Godot

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.

Paleta de TileMap en Godot
Paleta de TileMap en Godot
Dibujamos los Tiles en nuestra escena. Godot
Dibujamos los Tiles en nuestra escena. Godot

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.

Seleccionamos los Tiles de nuestra escena. Godot
Seleccionamos los Tiles de nuestra escena. Godot

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

Creación de Tiles en nuestra escena. Godot.
Creación de Tiles en nuestra escena. Godot.

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

OPCIÓN AUTOTILES

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 +.

Imagen tilesheet en la ventana de TileSet. Godot
Imagen tilesheet en la ventana de TileSet. Godot

Hacemos Click en Nuevo Tile Individual 

Creamos un Tile Individual en Godot
Creamos un Tile Individual en Godot

Activamos el ajuste de cuadrícula.

Ajuste de cuadrícula de un TileMap. Godot
Ajuste de cuadrícula de un TileMap. Godot

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)

Ajustamos el tamaño de las imágenes desde Snap Options. Godot
Ajustamos el tamaño de las imágenes desde Snap Options. Godot

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.

OPCIÓN TILE INDIVIDUAL

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

Tile individual en Godot
Tile individual en Godot

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.

Asignamos un nombre a un tile individual. Godot
Asignamos un nombre a un tile individual. Godot

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.

Paleta de Tiles en la ventana de proyectos de Godot
Paleta de Tiles en la ventana de proyectos de Godot

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

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

ASIGNAR UNA IMAGEN A UN SPRITE A PARTIR DE UN SPRITESHEET

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.

Activamos la propiedad Enabled Region. Godot
Activamos la propiedad Enabled Region. Godot

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

Seleccionamos una imagen de nuestro SpriteSheet. Godot
Seleccionamos una imagen de nuestro SpriteSheet. Godot

Y con el ratón marcamos la imagen deseada.

Imagen en un sprite a partir de un SpriteSheet. Godot
Imagen en un sprite a partir de un SpriteSheet. Godot

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.

SOLUCIÓN A LAS RAYAS ENTRE TILES CUANDO USAMOS LA CÁMARA

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:

Solución a las rayas intermitentes entre Tiles. Información obtenida de foros de Godot.
Solución a las rayas intermitentes entre Tiles. Información obtenida de foros de Godot.

ÍNDICE


0 0 votes
Calificación del artículo
Suscribirse
Notify of
guest
0 Comentarios
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x