Usando TileSets

Introducción

A tilemap is a grid of tiles used to create a game's layout. There are several benefits to using TileMapLayer nodes to design your levels. First, they let you draw a layout by "painting" tiles onto a grid, which is much faster than placing individual Sprite2D nodes one by one. Second, they allow for larger levels because they are optimized for drawing large numbers of tiles. Finally, they allow you to add greater functionality to your tiles with collision, occlusion, and navigation shapes.

To use TileMapLayer nodes, you will need to create a TileSet first. A TileSet is a collection of tiles that can be placed in a TileMapLayer node. After creating a TileSet, you will be able to place them using the TileMap editor.

Para seguir esta guía, necesitará una imagen que contenga sus tiles donde cada tile tenga el mismo tamaño (los objetos grandes se pueden dividir en varios tiles). Esta imagen se llama hoja de tiles. Los tiles no tienen por qué ser cuadrados: pueden ser rectangulares, hexagonales o isométricos (perspectiva pseudo-3D).

Crear un nuevo Tileset

Usando un tilesheet

En esta demostración usaremos los siguientes tiles tomados del paquete de arte "Abstract Platformer" de Kenney. Utilizaremos este "tilesheet" del set:

Hola de tiles de 64×64. Crédito: Kenney

Create a new TileMapLayer node, then select it and create a new TileSet resource in the inspector:

Creating a new TileSet resource within the TileMapLayer node

Después de crear el recurso TileSet, haz clic en el valor para desplegarlo en el inspector. La forma predeterminada del tile es Cuadrado, pero también puede elegir Isométrico, Cuadrado Medio Desplazamiento o Hexágono (dependiendo de la forma de las imágenes del tile). Si utilizas una forma de tile que no sea cuadrada, es posible que también necesite ajustar las propiedades Diseño de Tile y Eje de Desplazamiento de Tile. Por último, habilitar la propiedad Renderizado > Recorte UV puede ser útil si desea que los mosaicos se recorten según sus coordenadas. Esto garantiza que los tiles no puedan dibujarse fuera de su área asignada en la hoja de tiles.

Establezca el tamaño del tile en 64×64 en el inspector para que coincida con la hoja de tiles del ejemplo:

Establecer el tamaño del tile en 64×64 para que coincida con la hoja de tile del ejemplo

If relying on automatic tiles creation (like we're about to do here), you must set the tile size before creating the atlas. The atlas will determine which tiles from the tilesheet can be added to a TileMapLayer node (as not every part of the image may be a valid tile).

Abre el panel TileSet en la parte inferior del editor, luego haz clic y arrastre la imagen del tilesheet en el panel. Te preguntará si quieres crear tiles automáticamente. Responde Sí:

Creación automática de tiles basados en el contenido de la imagen de la hoja de tiles

Esto creará tiles automáticamente de acuerdo con el tamaño del tile que especificó anteriormente en el recurso TileSet. Esto acelera enormemente la configuración inicial de los tiles.

Nota

Cuando se utiliza la generación automática de tiles basada en el contenido de la imagen, las partes de la hoja de tiles que son totalmente transparentes no generarán tiles.

Si hay tiles de la hoja de tiles que no desea que estén presentes en el atlas, elige la herramienta Borrador en la parte superior de la vista previa del tileset y luego haz clic en los tiles que desea eliminar:

Uso de la herramienta Borrador para eliminar tiles no deseados del atlas TileSet

También puedes hacer clic derecho en un tile y elegir Eliminar, como alternativa a la herramienta Borrador.

Truco

Al igual que en los editores 2D y TileMap, puedes desplazarte por el panel TileSet usando los botones del medio o derecho del ratón, y hacer zoom con la rueda del ratón o los botones de la esquina superior izquierda.

Si deseas obtener tiles de varias imágenes de hojas de tiles para un único TileSet, cree atlas adicionales y asigne texturas a cada uno de ellos antes de continuar. También es posible usar una imagen por tile de esta manera (aunque se recomienda usar hojas de tiles para una mejor usabilidad).

Puedes ajustar las propiedades del atlas en la columna del medio:

Ajustar las propiedades del atlas de TileSet en el inspector dedicado (parte del panel TileSet)

Las siguientes propiedades pueden ajustarse en el atlas:

• ID: El identificador (único dentro de este TileSet), utilizado para ordenar.

• Nombre: El nombre humanamente legible del atlas. Utiliza aquí un nombre descriptivo con fines organizativos (como "terreno", "decoración", etc.).

• Márgenes: Los márgenes en los bordes de la imagen que no deben poder seleccionarse como tiles (en píxeles). Aumentar esto puede resultar útil si descarga una imagen de hoja de mosaico que tiene márgenes en los bordes (por ejemplo, para atribución).

• Separación: La separación entre cada tile en el atlas en píxeles. Aumentar esto puede ser útil si la imagen de la hoja de tiles que estás usando contiene guías (como contornos entre cada tile).

• Texture Region Size: The size of each tile on the atlas in pixels. In most cases, this should match the tile size defined in the TileMapLayer property (although this is not strictly necessary).

• Usar Padding de Textura: Si está marcado, agrega un borde transparente de 1 píxel alrededor de cada tile para evitar que la textura se desvanezca cuando está habilitado un filtro. Se recomienda dejar esto habilitado a menos que tenga problemas de renderizado debido al padding de textura.

Ten en cuenta que cambiar el margen de la textura, la separación y el tamaño de la región puede provocar la pérdida de tiles (ya que algunos de ellos estarían ubicados fuera de las coordenadas de la imagen del atlas). Para regenerar tiles automáticamente desde la hoja de tiles, usa el botón de menú de tres puntos verticales en la parte superior del editor TileSet y elige Crear tiles en regiones de textura no transparentes:

Recrear tiles automáticamente después de cambiar las propiedades del atlas

Usando una colección de escenas

Desde Godot 4.0, puedes colocar verdaderas escenas como tiles. Esto le permite utilizar cualquier colección de nodos como tile. Por ejemplo, puedes usar tiles de escena para colocar elementos del juego, como tiendas con las que el jugador pueda interactuar. También puedes usar tiles de escena para colocar AudioStreamPlayer2D (para sonidos ambientales), efectos de partículas y más.

Advertencia

Los tiles de escena tienen una mayor sobrecarga de rendimiento en comparación con los atlas, ya que cada escena se crea individualmente para cada tile colocado.

It's recommended to only use scene tiles when necessary. To draw sprites in a tile without any kind of advanced manipulation, use atlases instead.

For this example, we'll create a scene containing a CPUParticles2D root node. Save this scene to a scene file (separate from the scene containing the TileMapLayer), then switch to the scene containing the TileMapLayer node. Open the TileSet editor, and create a new Scenes Collection in the left column:

Crear colecciones de escenas en el editor de TileSet

Después de crear una colección de escenas, puedes ingresar un nombre descriptivo en la columna del medio si lo desea. Selecciona esta colección de escenas y luego crea un nuevo espacio de escena:

Crear un tile de escena después de seleccionar la colección de escenas en el editor TileSet

Selecciona esta ranura de escena en la columna de la derecha, luego use Carga rápida (o Cargar) para cargar el archivo de escena que contiene las partículas:

Crear una ranura de escena y luego cargar un archivo de escena en ella en el editor TileSet

Ahora tienes un tile de escena en tu TileSet. Una vez que cambie al editor TileMap, podrá seleccionarlo de la colección de escenas y pintarlo como cualquier otro tile.

Fusionar varios atlas en un solo atlas

El uso de varios atlas dentro de un único recurso TileSet a veces puede resultar útil, pero también puede resultar engorroso en determinadas situaciones (especialmente si utilizas una imagen por tile). Godot te permite fusionar varios atlas en un solo atlas para facilitar la organización.

Para hacerlo, debe tener más de un atlas creado en el recurso TileSet. Utiliza el botón de menú "tres puntos verticales" ubicado en la parte inferior de la lista de atlas, luego elige Abrir Herramienta de Combinación de Atlas:

Abrir la herramienta de fusión de atlas después de crear varios atlas

Esto abrirá un cuadro de diálogo, en el que puede seleccionar varios atlas manteniendo presionado Shift o Ctrl y luego haciendo clic en varios elementos:

Uso del cuadro de diálogo de la herramienta de fusión de atlas

Selecciona Unir para fusionar los atlas seleccionados en una única imagen de atlas (lo que se traduce en un único atlas dentro del TileSet). Los atlas no unidos se eliminarán dentro del TileSet, pero las imágenes de las hojas de tiles originales se conservarán en el sistema de archivos. Si desea que los atlas no unidos no se eliminen del recurso TileSet, selecciona Unir (Conservar Atlas Originales) en su lugar.

Truco

TileSet incorpora un sistema de proxies de tiles. Los proxies de tiles son una tabla de mapeo que permite notificar al TileMap, utilizando un TileSet dado, que un conjunto determinado de identificadores de tiles debe ser reemplazado por otro.

Los proxies de tiles se configuran automáticamente al unir diferentes atlas, pero también se pueden configurar manualmente gracias al cuadro de diálogo Administrar Proxy de Tiles (Manage Tile Proxies) al que puede acceder usando el menú de «tres puntos verticales» mencionado anteriormente.

La creación manual de proxies de tiles puede resultar útil cuando se cambia el ID de un atlas o se quieren reemplazar todos los tiles de un atlas por los de otro atlas. Ten en cuenta que al editar un TileMap, puedes reemplazar todas las celdas por su valor asignado correspondiente.

Añadiendo colisión, navegación y oclusión al TileSet

We've now successfully created a basic TileSet. We could start using it in the TileMapLayer node now, but it currently lacks any form of collision detection. This means the player and other objects could walk straight through the floor or walls.

Si usa Navegación 2D, también necesitará definir polígonos de navegación para los tiles para generar una malla de navegación que los agentes puedan usar para encontrar el camino.

Por último, si utiliza Luces 2D y sombras o GPUParticles2D, es posible que también desees que tu TileSet pueda proyectar sombras y colisionar con partículas. Esto requiere definir polígonos oclusores para los tiles "sólidos" en el TileSet.

To be able to define collision, navigation and occlusion shapes for each tile, you will need to create a physics, navigation or occlusion layer for the TileSet resource first. To do so, select the TileMapLayer node, click the TileSet property value in the inspector to edit it then unfold Physics Layers and choose Add Element:

Creating a physics layer in the TileSet resource inspector (within the TileMapLayer node)

Si también necesitas soporte de navegación, ahora es un buen momento para crear una capa de navegación:

Creating a navigation layer in the TileSet resource inspector (within the TileMapLayer node)

Si necesitas soporte para oclusión de polígonos de luz, ahora es un buen momento para crear una capa de oclusión:

Creating an occlusion layer in the TileSet resource inspector (within the TileMapLayer node)

Nota

Los pasos siguientes de este tutorial están pensados para crear polígonos de colisión, pero el procedimiento de navegación y oclusión es muy similar. Sus respectivos editores de polígonos se comportan de la misma manera, por lo que no se repiten estos pasos para abreviar.

La única salvedad es que la propiedad del polígono de oclusión del tile está parte de la subsección Renderizado en el inspector del atlas. Asegúrate de desplegar esta sección para poder editar el polígono.

Después de crear una capa de física, tendrá acceso a la sección Capa Física en el inspector del atlas de TileSet:

Apertura del editor de colisiones mientras está en el modo Seleccionar

Puedes crear rápidamente una forma de colisión rectangular presionando F mientras el editor TileSet está enfocado. Si el atajo de teclado no funciona, intente hacer clic en el área vacía alrededor del editor de polígonos para enfocarlo:

Usando la forma de colisión de rectángulo predeterminada presionando F

En este editor de colisión de tiles, tienes acceso a todas las herramientas de edición de polígonos 2D:

• Utiliza la barra de herramientas situada encima del polígono para alternar entre crear un nuevo polígono, editar un polígono existente y eliminar puntos del polígono. El botón de menú de los "tres puntos verticales" ofrece opciones adicionales, como rotar y voltear el polígono.

• Cree nuevos puntos haciendo clic y arrastrando una línea entre dos puntos.

• Elimine un punto haciendo clic derecho sobre él (o utilizando la herramienta Eliminar descrita anteriormente y haciendo clic izquierdo).

• Desplazarse dentro del editor haciendo clic con el botón central o derecho (El desplazamiento con el botón derecho solo se puede utilizar en áreas donde no hay ningún punto cercano.)

Puedes utilizar la forma de rectángulo predeterminada para crear rápidamente una forma de colisión con forma de triángulo eliminando uno de los puntos:

Crear una forma de colisión triangular haciendo clic derecho en una de las esquinas para eliminarla

También puedes utilizar el rectángulo como base para formas más complejas añadiendo más puntos:

Dibujar una colisión personalizada para una forma de tile compleja

Truco

If you have a large tileset, specifying the collision for each tile individually could take a lot of time. This is especially true as TileMaps tend to have many tiles with common collision patterns (such as solid blocks or 45-degree slopes). To apply a similar collision shape to several tiles quickly, use functionality to assign properties to multiple tiles at once.

Asignación de metadatos personalizados a los tiles del TileSet

Puedes asignar datos personalizados a cada tile mediante capas de datos personalizados. Esto puede resultar útil para almacenar información específica de tu juego, como el daño que debe causar un tile cuando el jugador lo toca o si un tile se puede destruir con un arma.

Los datos se asocian con el tile en el TileSet: cada lugar donde se ha colocado el tile son instancias que utilizarán los mismos datos personalizados. Si necesitas crear una variante de un tile que tenga diferentes datos personalizados, puedes hacerlo mediante la creación de un tile alternativo y cambiando los datos personalizados solo para el tile alternativo.

Creating a custom data layer in the TileSet resource inspector (within the TileMapLayer node)

Ejemplo de capas de datos personalizadas configuradas con propiedades específicas del juego

Puedes reordenar datos personalizados sin romper los metadatos existentes: el editor TileSet se actualizará automáticamente después de reordenar las propiedades de datos personalizados.

With the custom data layers example shown above, we're assigning a tile to have the damage_per_second metadata set to 25 and the destructible metadata to false:

Edición de datos personalizados en el editor TileSet mientras está en modo Seleccionar

La propiedad de pintura de tile también se puede utilizar para datos personalizados:

Asignación de datos personalizados en el editor TileSet mediante la pintura de propiedades de tile

Crear sets de terreno (autotilling)

Nota

Esta funcionalidad se implementó de forma diferente al autotiling de Godot 3.x. Los terrenos son, en esencia, un reemplazo más potente de los autotiles. A diferencia de los autotiles, los terrenos pueden admitir transiciones de un terreno a otro, ya que un tile puede definir varios terrenos a la vez.

Antes, los autotiles eran un tipo específico de tile, ahora los terrenos son solo un conjunto de propiedades asignadas a los tiles del atlas. Estas propiedades son luego utilizadas por un modo de pintura dedicado en el TileMap que selecciona tiles que presentan datos de terreno de una manera inteligente. Esto significa que cualquier tile de terreno puede pintarse como terreno o como un tile único (como cualquier tile normal).

Un tileset "pulido" generalmente presenta variaciones que debes usar en las esquinas o bordes de plataformas, pisos, etc. Si bien se pueden colocar manualmente, rápidamente esto se vuelve tedioso. Manejar esta situación con niveles generados por procedimientos también puede ser difícil y requerir una gran cantidad de código.

Godot offers terrains to perform this kind of tile connection automatically. This allows you to have the "correct" tile variants automatically used.

Los terrenos se agrupan en conjuntos de terrenos. A cada conjunto de terrenos se le asigna un modo, que puede ser Coincidir Esquinas y Lados, Coincidir Esquinas y Coincidir Lados (Match Corners and Sides, Match Corners y Match Sides). Estos modos definen cómo se combinan los terrenos entre sí en un conjunto de terrenos.

Nota

Los modos anteriores corresponden a los modos de máscara de bits utilizados anteriormente en los autotiles de Godot 3.x: 2×2, 3×3 o 3×3 mínimo. Esto también es similar a lo que ofrece el editor Tiled.

Select the TileMapLayer node, go to the inspector and create a new terrain set within the TileSet resource:

Creating a terrain set in the TileSet resource inspector (within the TileMapLayer node)

Después de crear un conjunto de terrenos, debes crear uno o más terrenos dentro del conjunto de terrenos:

Crear un terreno dentro del set de terreno

En el editor TileSet, cambie al modo Seleccionar y haz clic en un tile. En la columna del medio, despliegue la sección Terrenos y luego asigne un ID de Conjunto de Terreno y un ID de Terreno para el tile. -1 significa "no es conjunto de terreno" y "no es terreno" respectivamente. Entonces debes establecer el Conjunto de Terreno en 0 o más antes de poder establecer el Terreno en 0 o mayor.

Nota

Los ID de conjunto de terreno y los ID de terreno son independientes entre sí. También comienzan desde 0, no desde 1.

Configurar el terreno en un solo tile en el modo Seleccionar del editor TileSet

Después de hacerlo, ahora puede configurar la sección Terrain Peering Bits (que sería Bits de Emparejamiento de Terreno) que se vuelve visible en la columna del medio. Los bits de emparejamiento determinan qué tile se colocará dependiendo de los tiles vecinos. -1 es un valor especial que se refiere al espacio vacío.

Por ejemplo, si un tile tiene todos sus bits configurados en 0 o más, solo aparecerá si todos los 8 tiles vecinos están usando un mosaico con el mismo ID de terreno. Si un mosaico tiene sus bits configurados en 0 o más, pero los bits superior izquierdo, superior y superior derecho están configurados en -1, solo aparecerá si hay espacios vacíos encima de él (incluyendo en diagonal).

Configuración de bits de emparejamiento de terreno en un solo tile en el modo Seleccionar del editor TileSet

Un ejemplo de configuración de todo un tilesheet podría verse tal que así:

Ejemplo de conjunto de tiles completo para un juego de desplazamiento lateral

Ejemplo de hoja de tiles completa para un juego de desplazamiento lateral con partes de emparejamiento del terreno visibles

Asignar propiedades a varios tiles a la vez

Hay dos formas de asignar propiedades a varios tiles a la vez. Dependiendo de sus casos de uso, un método puede ser más rápido que el otro:

Usando la selección de múltiples tiles

If you wish to configure various properties on several tiles at once, choose the Select mode at the top of the TileSet editor:

Después de hacer esto, puedes seleccionar varios tiles en la columna derecha manteniendo presionada la tecla Mayús y haciendo clic en los tiles. También puedes realizar una selección rectangular manteniendo presionado el botón izquierdo del ratón y luego arrastrándolo. Por último, puedes anular la selección de tiles que ya estaban seleccionados (sin afectar el resto de la selección) manteniendo presionada la tecla Mayús y haciendo clic en un tile seleccionado.

Luego, puedes asignar propiedades mediante el inspector en la columna central del editor TileSet. Solo las propiedades que cambie aquí se aplicarán a todos los tiles seleccionados. Al igual que en el inspector del editor, las propiedades que difieren en los tiles seleccionados seguirán siendo diferentes hasta que las edite.

Al editar propiedades numéricas o de color, se mostrará una vista previa del valor de la propiedad en todos los tiles del atlas:

Selección varios tiles usando el modo Seleccionar y aplicación de propiedades

Usando la pintura de propiedades de tiles

Si deseas aplicar una sola propiedad a varios tiles a la vez, puedes utilizar el modo pintura de propiedades.

Configure una propiedad para que se pinte en la columna del medio, luego haz clic en los tiles (o mantén presionado el botón izquierdo del ratón) en la columna derecha para "pintar" propiedades en los tiles.

Pintando las propiedades de un tile utilizando el editor de TileSet

El pintado de propiedades de tile es especialmente útil con propiedades que requieren mucho tiempo para configurarse manualmente, como las formas de colisión:

Pintar un polígono de colisión y luego hacer clic izquierdo en los tiles para aplicarlo

Crear tiles alternativos

A veces, quieres utilizar una sola imagen de baldosa (que se encuentra solo una vez dentro del atlas), pero configurada de diferentes maneras. Por ejemplo, puedes querer usar la misma imagen de baldosa pero girada, volteada o modulada con un color diferente. Esto se puede lograr usando baldosas alternativos.

Truco

Desde Godot 4.2, no tienes que crear tiles alternativos o rotar o voltear tiles. Puedes rotar cualquier tile al colocarlo en el editor de TileMap usando los botones de rotar/volter en la barra de herramientas del editor de TileMap.

Para crear un tile alternativo, haz clic derecho en un tile base en el atlas mostrado por el editor de TileSets. Luego escoge Crear un Tile Alternativo:

Crear un tile alternativo al hacer clic derecho en un tile base en el editor de TileSet

Si se encuentra en el modo Seleccionar, el tile alternativo ya estará seleccionado para su edición. Si no se encuentra en el modo Seleccionar, podrá crear tiles alternativos, pero tendrá que cambiar al modo Seleccionar y seleccionar el tile alternativo para editarlo.

Si no ves el tile alternativo, desplázate a la derecha de la imagen del atlas, ya que los tiles alternativos siempre aparecen a la derecha de los tiles base de un atlas determinado en el editor TileSet:

Configurando un tile alternativo después de hacer clic en él en el editor de TileSet

Después de seleccionar un tile alternativo, puedes cambiar cualquier propiedad usando la columna central como lo harías en un tile base. No obstante, la lista de propiedades mostradas es diferente en comparación a los tiles base:

• Alternative ID: El identificador numérico único para este tile alternativo. Cambiarlo romperá los TileMaps existentes, ¡así que ten cuidado! Este ID también controla el orden en la lista de tiles alternativos mostrados en el editor.

• Rendering > Flip H: If true, el tile se voltea horizontalmente.

• Rendering > Flip V: If true, el tile se voltea verticalmente.

• Rendering > Transpose: Si es true, el tile es rotado 90 grados en sentido antihorario y después volteado verticalmente. En la práctica esto supone rotar un tile 90 grados en sentido horario sin voltearlo, deberías habilitar Flip H y Transpose. Para rotar un tile 180 grados en sentido horario, habilita Flip H y Flip V. Para rotar un tile 270 grados en sentido horario, habilita Flip V y Transpose.

• Rendering > Texture Origin: El origen a usar para dibujar el tile. Esto puede ser usado para poner el offset del tile visualmente comparándolo con el tile base.

• Rendering > Modulate: El multiplicador de color a usar cuando se renderiza el tile.

• Rendering > Material: El material a usar para este tile. Esto puede ser usarse para aplicar un modo de fusión distinto, o shaders custom a un solo tile.

• Z Index: El orden de clasificación de este tile. Valores más altos harán que el tile se renderice en frente de otros en la misma capa.

• Y Sort Origin: El offset vertical a usar para ordenar tiles basándonos en la coordenada Y (en píxeles). Esto nos permite usar capas como si estuvieran en diferentes alturas para juegos de vista cenital. Ajustar este valor puede ayudar a aliviar problemas respecto a la clasificación de ciertos tiles. Solo es efectivo si Y Sort Enabled es true en la capa en el cual el TileMap está situado

Puedes crear otro tile alternativo haciendo clic en el icono "+" que está situado al lado del tile alternativo. Esto es equivalente a seleccionar el tile base y darle clic derecho, Crear un Tile Alternativo de nuevo.

Nota

Al crear un tile alternativo, ninguna de las propiedades del tile base son heredadas. Debes establecer las propiedades nuevamente en el tile alternativo si deseas que sean idénticas en el tile base y en el tile alternativo.