Usar TileMaps

Ver también

Esta página asume que ya has creado o descargado un TileSet. Si no lo has hecho, por favor véase Usar TileSets primero, pues necesitarás un TileSet para crear un TileMap.

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 make it possible to draw the layout by "painting" the tiles onto a grid, which is much faster than placing individual Sprite2D nodes one by one. Second, they allow for much larger levels because they are optimized for drawing large numbers of tiles. Finally, you can add collision, occlusion, and navigation shapes to tiles, adding greater functionality to the TileMap.

Specifying the TileSet in the TileMapLayer

If you've followed the previous page on Usar TileSets, you should have a TileSet resource that is built into the TileMapLayer node. This is good for prototyping, but in a real world project, you will generally have multiple levels reusing the same tileset.

The recommended way to reuse the same TileSet in several TileMapLayer nodes is to save the TileSet to an external resource. To do so, click the dropdown next to the TileSet resource and choose Save:

Guardar el recurso TileSet integrado en un archivo de recursos externo

Guardar el recurso TileSet integrado en un archivo de recursos externo

Multiple TileMapLayers and settings

When working with tilemaps it's generally advised that you use multiple TileMapLayer nodes when appropriate. Using multiple layers can be advantageous, for example, this allows you to distinguish foreground tiles from background tiles for better organization. You can place one tile per layer at a given location, which allows you to overlap several tiles together if you have more than one layer.

Each TileMapLayer node has several properties you can adjust:

  • Enabled: Si es true, la capa es visible en el editor cuando ejecutas el proyecto.

  • TileSet El tileset utilizado por el nodo TileMapLayer.

Renderizado

  • Y Sort Origin: The vertical offset to use for Y-sorting on each tile (in pixels). Only effective if Y Sort Enabled under CanvasItem settings is true.

  • Orden Dibujo X Invertido Invierte el orden en que se dibujan los tiles en el eje X. Requiere que sea true la propiedad Ordenamiento Y Habilitado del CanvasItem.

  • Tamaño del Cuadrante de Renderizado Un cuadrante es un grupo de tiles dibujados juntos en un único CanvasItem para fines de optimización. Este ajuste define la longitud del lado de un cuadrado en el sistema de coordenadas del mapa. El tamaño del cuadrante no se aplica a un TileMapLayer ordenado en Y, ya que en ese caso los tiles se agrupan por posición Y.

Física

  • Collision Enabled Enables or disables collision.

  • Usar Cuerpos Cinemáticos Cuando es verdadero, las formas de colisión de TileMapLayer se instanciarán como cuerpos cinemáticos.

  • Modo de Visibilidad de Colisiones Indica si las formas de colisión de TileMapLayer son visibles. Si se establece como predeterminado, dependerá de la configuración de depuración de colisiones.

Capas de reordenamiento

Puedes reordenar las capas arrastrando y soltando su nodo en la pestaña Escena. También puedes cambiar el nodo de TileMapLayer en el que estás trabajando usando los botones en la esquina superior derecha del editor de TileMap.

Nota

Puedes crear, renombrar o reordenar las capas en el futuro sin afectar las capas existentes. No obstante, ten cuidado, pues eliminar una capa también eliminará todos los tiles colocados en ella.

Abrir el editor de TileMap

Select the TileMapLayer node, then open the TileMap panel at the bottom of the editor:

Opening the TileMap panel at the bottom of the editor. The TileMapLayer node must be selected first.

Opening the TileMap panel at the bottom of the editor. The TileMapLayer node must be selected first.

Seleccionando tiles para usarlos en el dibujado

Primero, si has creado capas adicionales arriba, asegúrate de que has seleccionado la capa en la cual quieres pintar:

Seleccionando una capa para pintar en el editor de TileMap

Seleccionando una capa para pintar en el editor de TileMap

Truco

In the 2D editor, the layers you aren't currently editing from the same TileMapLayer node will appear grayed out while in the TileMap editor. You can disable this behavior by clicking the icon next to the layer selection menu (Highlight Selected TileMap Layer tooltip).

Puedes saltarte el paso de arriba si no has creado capas adicionales, pues la primera capa es seleccionada automáticamente cuando entras al editor de TileMap.

Antes de que puedas poner tiles en el editor 2D, debes seleccionar un tile o más en el panel de TileMap localizado abajo en el editor. Para hacer esto, haz clic en un tile en el panel de TileMap, o sostiene el botón del ratón para seleccionar múltiples tiles:

Seleccionar un tile en el editor de TileMap haciendo clic en él

Seleccionar un tile en el editor de TileMap haciendo clic en él

Truco

Del mismo modo que en los editores 2D y de TileSet, puedes panoramizar el panel de TileMap usando el botón central o derecho del ratón y hacer zoom usando la rueda del ratón o los botones en la esquina superior derecha.

You can also hold down Shift to append to the current selection. When selecting more than one tile, multiple tiles will be placed every time you perform a painting operation. This can be used to paint structures composed of multiple tiles in a single click (such as large platforms or trees).

La selección final no tiene que ser contigua: si hay espacio vacío entre los tiles seleccionados, se dejará vacío en el patrón que será pintado en el editor 2D.

Seleccionar varios tiles en el editor de TileMap sosteniendo el botón izquierdo del ratón

Seleccionar varios tiles en el editor de TileMap sosteniendo el botón izquierdo del ratón

Si has creado tiles alternativos en tu TileSet, puedes seleccionarlos para dibujar a la derecha de los tiles base:

Seleccionando un mosaico alternativo en el editor TileMap

Seleccionando un mosaico alternativo en el editor TileMap

Finalmente, si has creado una colección de escenas en el TileSet, puedes poner tiles de escena en el TileMap:

Poniendo un tile de escena que contenga partículas usando el editor de TileMap

Poniendo un tile de escena que contenga partículas usando el editor de TileMap

Pintando modos y herramientas

Usando la barra de herramientas en lo alto del editor de TileMap, puedes elegir entre varios modos de pintura y de herramientas. Esos modos afectan el funcionamiento al hacer clic en el editor 2D, NO el TileMap en sí mismo.

De izquierda a derecha, los modos de pintura y herramientas que puedes elegir son:

Selección

Selecciona tiles haciendo clic en un solo tile o manteniendo presionado el botón izquierdo del ratón para seleccionar varios con un rectángulo en el editor 2D. Ten en cuenta que no se puede seleccionar un espacio vacío: si crea una selección rectangular, solo se seleccionarán tiles que no estén vacíos.

Para agregar elementos a la selección actual, mantén presionada la tecla Mayús y luego selecciona un tile. Para eliminar elementos de la selección actual, mantén presionada la tecla Ctrl y luego selecciona un tile.

La selección se puede utilizar luego en cualquier otro modo de pintura para crear rápidamente copias de un patrón ya colocado.

Puedes eliminar los tiles seleccionados del TileMap presionando Del.

Puedes alternar este modo temporalmente mientras está en el modo Pintar manteniendo presionada la tecla Ctrl y luego realizando una selección.

Truco

Puedes copiar y pegar tiles que ya se hayan colocado haciendo una selección, presionando Ctrl + C y luego Ctrl + V. La selección se pegará después de hacer clic izquierdo. Puedes presionar Ctrl + V otra vez para realizar más copias de esta manera. Haz clic derecho o presiona Esc para cancelar el pegado.

Pintar

El modo básico de pintura te permite poner tiles haciendo clic o sosteniendo el botón izquierdo del ratón.

Si hace clic con el botón derecho, el tile seleccionado en ese momento se borrará del tilemap. En otras palabras, se reemplazará por un espacio vacío.

Si ha seleccionado varios tiles en el TileMap o ha utilizado la herramienta Selección, se colocarán cada vez que haz clic o arrastre el ratón mientras mantiene presionado el botón izquierdo.

Truco

En el modo Pintar, puedes dibujar una línea manteniendo presionada la tecla Mayús antes de mantener presionado el botón izquierdo del ratón y luego arrastrándolo hasta el punto final de la línea. Es lo mismo a usar la herramienta Línea que se describe a continuación.

También puedes dibujar un rectángulo manteniendo presionadas las teclas Ctrl y Mayús antes de mantener presionado el botón izquierdo del ratón y luego arrastrarlo hasta el punto final del rectángulo. Es lo mismo a usar la herramienta Rectángulo que se describe a continuación.

Lastly, you can pick existing tiles in the 2D editor by holding Ctrl then clicking on a tile (or holding and dragging the mouse). This will switch the currently painted tile(s) to the tile(s) you've just clicked. This is identical to using the Picker tool described below.

Linea

Después de seleccionar el modo Pintar Línea, puedes dibujar una línea que siempre tendrá un espesor de 1 tile (sin importar su orientación).

Si hace clic derecho mientras está en el modo de Pintar Línea, se borrará en línea.

Si ha seleccionado varios tiles en el TileMap o utiliza la herramienta Selección, puedes colocarlos en un patrón repetido a lo largo de la línea.

Puedes alternar este modo temporalmente mientras está en el modo Pintar o Borrador manteniendo presionada la tecla Mayús y luego dibujando.

Usar la herramienta de línea después de seleccionar dos tiles para dibujar plataformas diagonalmente

Usar la herramienta de línea después de seleccionar dos tiles para dibujar plataformas diagonalmente

Rectángulo

Después de seleccionar el modo de Pintar Rectángulo (Rectangle Paint), puedes dibujar en un rectángulo alineado al eje.

Si hace clic derecho mientras está en el modo de Pintar Rectángulo (Rectangle Paint), borrará en un rectángulo alineado al eje.

Si has seleccionado varios tiles en el TileMap, o usando la Herramienta de Selección, puedes ponerlos en un patrón de repetición dentro del rectángulo.

You can toggle this mode temporarily while in Paint or Eraser mode by holding Ctrl and Shift then drawing.

Bote de Relleno

Tras seleccionar el modo Bote de Relleno, puedes elegir si el pintar debería limitarse a las áreas contiguas alternando la checkbox Contiguous que aparece a la derecha de la barra de herramientas.

Si habilitas Contiguous (por defecto), solo los tiles coincidentes que toquen la selección actual serán reemplazados. Este chequeo continuo se realiza horizontal, y verticalmente pero no diagonalmente.

Si deshabilitas Contiguous, todos los tiles con el mismo ID en todo el TileMap serán reemplazados por el tile que esté seleccionado. Si seleccionando un tile vacío está deseleccionado el check de Contiguous, todos los tiles en el rectángulo que contiene el área efectiva del TileMap, serán reemplazados.

Si haces clic derecho estando en el modo Bote de Relleno, reemplazarás los tiles coincidentes con tilea vacíos.

Si has seleccionado múltiples tiles en el TileMap o usando la Herramienta de Selección, puedes ponerlos en un patrón de repetición dentro del área rellenada.

Usar la herramiente Bote de Relleno

Usar la herramiente Bote de Relleno

Selector

Tras seleccionar el modo de selección, puedes seleccionar tiles existentes en el editor 2D sosteniendo Ctrl y luego haciendo clic en un tile. Esto cambiará el tile que se esté pintando por el tile que acabas de seleccionar. También puedes seleccionar varios tiles de golpe sosteniendo el clic izquierdo y realizando una selección rectangular. Los tiles vacíos no se pueden seleccionar.

Puedes alternar este modo temporalmente mientras estés en el modo Pintar sosteniendo Ctrl y haciendo clic o arrastrando el mouse.

Borrador

Este modo se combina con cualquier otro modo de pintura (Pintar, Línea, Rectángulo, Bote de Relleno). Cuando el modo borrar está activado, los tiles serán reemplazados por tiles vacíos en lugar de dibujar nuevas líneas al hacer clic izquierdo.

Puedes alternar este modo temporalmente mientras estés en cualquier otro modo dándole a click derecho en lugar de click izquierdo.

Crear y usar nodos únicos

Mientras pintas, puedes opcionalmente activar la aleatorización (randomization). Cuando está habilitada, se elegirá un tile aleatorio entre todos los seleccionados al pintar. Las herramientas que soportan esta opción son Pintar, Línea, Rectángulo y Bote de relleno. Para que la aleatorización funcione correctamente debes seleccionar varios tiles en el editor de TileMap o usar la dispersión (scattering) (ambos acercamientosnpueden combinarse).

Si Scattering es establecido a un valor superior a 0, hay una posibilidad de que no se ponga ningún tile al pintar. Esto puede usarse para añadir detalles que no se repitan a áreas grandes (como al añadir hierba o elementos decorativos en un TileMap grande con vista cenital).

Ejemplo de uso con 4 núcleos:

Tras seleccionar el modo Bote de Relleno, puedes elegir si la pintura debería ser limitada a áreas contiguas alternando la caja **Contiguous** que aparece a la derecha de la barra de herramientas

Tras seleccionar el modo Bote de Relleno, puedes elegir si la pintura debería ser limitada a áreas contiguas alternando la caja Contiguous que aparece a la derecha de la barra de herramientas

Ejemplo al utilizar el modo Cubo de Relleno:

Usando el Bote de Relleno con un solo tile, pero con la aleatorización y la dispersión habilitados

Usando el Bote de Relleno con un solo tile, pero con la aleatorización y la dispersión habilitados

Nota

El modo borrar no tienen en cuenta la aleatorización y la dispersion. Todos Los tiles dentro de la selección siempre son quitados.

Guardar y cargar los tiles prefabricados usando patrones

Si bien puedes copiar y pegar tiles estando en el modo Select, podrías querer guardar los patrones predeterminados de los tiles que va a poner juntos del tirón. Esto puede hacerse en una base por cada TileMap eligiendo la pestaña Patterns del editor de Tile map.

Para crear un patrón nuevo, cambia al modo de Selección, realiza una selección y pulsa Ctrl+C. Haz clic en un espacio vacío dentro de la pestaña de Patrones (un rectángulo azul debería aparecer alrededor del espacio vacío), luego pulsa Ctrl+V:

Crear un nuevo patrón a partir de la selección en el editor de TileMap

Crear un nuevo patrón a partir de la selección en el editor de TileMap

Para usar un patrón existente, haz clic en su imagen en la pestaña Patrones, cambia a cualquier modo de pintura, y luego haz clic izquierdo en alguna parte en el editor 2D:

Colocar un patrón existente usando el editor de TileMap

Colocar un patrón existente usando el editor de TileMap

Como las selecciones de múltiples tiles, los patrones se repetirán si son utilizados con los modos de pintado de Línea, Rectángulo o Bote de Relleno.

Nota

Despite being edited in the TileMap editor, patterns are stored in the TileSet resource. This allows reusing patterns in different TileMapLayer nodes after loading a TileSet resource saved to an external file.

Manejar automáticamente las conexiones de mosaicos para el terreno

To use terrains, the TileMapLayer node must feature at least one terrain set and a terrain within this terrain set. See Crear sets de terreno (autotilling) if you haven't created a terrain set for the TileSet yet.

Hay 3 tipos de modos de pintura disponible para las conexiones del terreno:

  • Connect, where tiles are connected to surrounding tiles on the same TileMapLayer.

  • Ruta, en el cual los tiles están conectados con el resto de tiles pintados con el mismo trazo (hasta que se suelte el botón del ratón).

  • A los tiles auxiliares específicos para resolver problemas o manejar ciertas situaciones no los cubre el sistema de terrenos.

El modo Conectar es el más fácil de usar, pero Ruta es más flexible, pues permite un mayor control artístico al pintar. Por ejemplo, Ruta permite que los caminos sean adyacentes entre sí directamente, mientras que Conectar los forzará a estar conectados.

Seleccionar el modo Conectar en la pestaña Terrenos del editor de TileMap

Seleccionar el modo Conectar en la pestaña Terrenos del editor de TileMap

Seleccionar el modo seura en la pestaña Terrenos del editor de TileMap

Seleccionar el modo seura en la pestaña Terrenos del editor de TileMap

Finalmente, puedes seleccionar tiles específicos del terreno para resolver problemas en según qué situaciones:

Pintar con tiles específicos en la pestaña Terrenos del editor de TileMap

Pintar con tiles específicos en la pestaña Terrenos del editor de TileMap

Cualquier tile que tenga al menos uno de sus bits establecidos como valor asignado al ID del terreno correspondiente aparecerán en la lista de tiles a elegir.

Manejar los tiles faltantes (missing tiles)

Si quitas tiles del TileSet que estén referenciados en un TileMap, el TileMap mostrará un placeholder para indicar que se ha colocado un tile cuya ID es inválida:

Tiles faltantes en el editor de TileMap debido a que la referencia del TileSet se rompe

Tiles faltantes en el editor de TileMap debido a que la referencia del TileSet se rompe

Esos placeholders no son visibles en tiempo de ejecución, pero los datos del tile se conservan en memoria. Esto te permite cerrar y reabrir escenas de forma segura. Una vez vuelvas a añadir un tile con su ID coincidente, los tiles aparecerán con la apariencia del nuevo tile.

Nota

Missing tile placeholders may not be visible until you select the TileMapLayer node and open the TileMap editor.