Cómo usar el AutoTile en Godot

Con Godot ahora podemos hacer los mapas de nuestros niveles de una forma rápida y eficiente, configurando un Autotile podemos ahorrarnos hasta horas de trabajo. Hoy les enseñaré a usar el Autorile, una de las grandes funcionalidades que incluye Godot 3.

Puedes descargar el proyecto Aquí.

Creando los nodos

En la escena del nivel, vamos a necesitar lo siguiente:

• Tilemap: es el nodo que recibe el recurso de TileSet y permite dibujar un mapa de tiles en la escena.
• StaticBody2D (Cuerpos-tierras-piedras): es el contenedor de un cuerpo físico que no se mueve (estático), lo uso para marcar todos los lugares con tiles, ya que en un AutoTile no puedo configurar su colisión.
• CollisionShape2D (colX): son las máscaras que pongo en los lugares que tengan un tile.

También necesitamos crear un TileSet. Para eso podemos usar una escena:

• Sprite2D: ambos nodos son sprites y tienen la misma imagen. En ellos vamos a guardar la sección de tiles que queremos automatizar, lo veremos ahora.

Guardando el TileSet

En los sprites que creamos arriba, guardaremos la hoja de tiles y usaremos la herramienta de «región» para seleccionar lo que necesitemos. Mi hoja de tiles es la siguiente:

Para seleccionar el espacio de las tierras, tienen que buscar en las propiedades del sprite, la «región».

Ahora que la activamos, debe salir en la parte inferior del motor una nueva pestaña: «Región de Textura».

Hacemos que el tipo de fijado sea en pixeles (me parece el más fácil) y seleccionamos los tiles de tierra verde:

Ahora que tenemos nuestros tiles para la tierra, vamos a convertir esta escena en un TileSet. En la parte superior del editor, hacemos clic en «Escena», seguido de «Convertir a»:

Guardamos con extensión «.res».

Configurar el AutoTile

Vamos a entrar en nuestro archivo de «tiles.res», cuando le hagamos doble clic nos va a salir un editor con los nodos que tiene dentro.

Cuando abrimos el «0», veremos el nombre de nuestro Sprite y su imagen. Hay que activar la propiedad «Is AutoTile» para poder desbloquear el configurador.

En la izquierda del motor, tenemos lo siguiente:

En sus propiedades tenemos que poner el tamaño de cada tile (es importante que sepan eso), en la hoja que estoy usando, los tiles miden 32×32 pixeles. También hay que especificar el modo de máscara, ya explicare eso, por ahora lo ponemos en 3×3.

En la parte inferior del motor, vamos a ver una pestaña llamada «Autotiles»:

Vamos a tener que configurar dos secciones: Icono y BitMask. La primera la dejamos así:

En la segunda tenemos que rellenar cada espacio interior de los tiles, dejando sus extremos:

En las imágenes podemos ver que los tiles se dividen en cuadrados con un rojo más claro que los cuadrados de máscara. Cuando ponemos el MaskMode (el de arriba) en 2×2, las máscaras rojas que colocamos para rellenar los tiles van a ser más grandes y no vamos a poder rellenar esa hoja que tengo como ejemplo, el MaskMode 3×3 se ajusta bien a mi hoja. Pero es importante que sepan que el MaskMode define la cantidad de cuadros «Máscara roja» que caben en un tile, con 2×2 caben 4, y con 3×3 caben 9. Ustedes tienen que probar el modo que sea mejor, siempre recordando que tienen que pintar toda la parte interior y dejar unos extremos…

Por ahora no necesitamos más. Ya hemos configurado nuestro AutoTile.

Usar el Tilemap y añadir colisiones

Dentro del nodo Tilemap vamos a colocar nuestro «tiles.res»  y ya podemos crear nuestro mapa. Ahora sólo tenemos un problema si necesitamos colisiones, la solución que he encontrado es poner un StaticBody2D como hijo del Tilemap y tener un CollisionShape en los lugares donde estén los tiles.

Para trabajar con los shapes se les hará más fácil activando la herramienta de fijado, está encima de la pantalla de escena:

La configuramos para que se fije según los pixeles:

Ahora ponemos el shape sobre los tiles que necesitan colisión:

Terminamos. Si tienen una duda pueden dejarla en los comentarios y trataré de responderla.

Los sprites que he usado se encuentran en OpenGameArt.

NOTA: Si quieren tener otra imagen dentro del mismo «tiles.res» sólo tienen que sobrescribir el archivo en el paso de «Convertir a», para añadir el nuevo sprite. De resto lo configuran igual que con las tierras, tienen todo en el ejemplo que descargaron arriba. No hice la demostración de la Piedra por ahorrar espacio en imágenes…

También hay una versión en vídeo: