Usando tilemaps

Introducción

A tilemap is a grid of tiles used to create a game’s layout. There are several benefits to using TileMap 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 Sprite 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 additional functionality to the TileMap.

../../_images/tileset_draw_atlas.png

Configuración del proyecto

This demo we’ll use the following tiles taken from Kenney’s «Abstract Platformer» art pack. You can find the complete set here but for this demo we’ll stick to this small set.

../../_images/tilesheet.png

Create a new project and place the above image in the project folder.

When using a tileset, it’s important that adjacent tiles match up. Godot’s default is to import 2D images using an interpolated «filter» mode, which will result in ugly borders between the tiles. Select the image and click the Import tab. Turn off Filter and click «Reimport». See Importando imágenes for details.

TileMap node

Añade un nuevo nodo TileMap a la escena. Por defecto, un TileMap utiliza una cuadrícula cuadrada de azulejos. También puede utilizar un modo «Isométrico» basado en la perspectiva o definir su propia forma de tiles personalizada.

../../_images/tilemap_mode.png

En la sección «Cell» del Inspector hay muchas propiedades que puedes ajustar para personalizar el comportamiento de tu mapa de tiles:

../../_images/tilemap_size.png
  • Cell Size
    Esto define el tamaño de la grilla. Esto debería coincidir con el tamaño de los píxeles de tus tiles. El valor por defecto es (64, 64).
  • YSort
    Esto hace que los tiles se dibujen en orden de su posición Y, de modo que los tiles «inferiores» se dibujan encima de otros «»superiores»«.
  • Half Offset and Tile Origin
    Estas propiedades afectan a la posición de los tiles en relación con la posición de la grilla.
  • Quadrant
    Defines the chunk size used for batched drawing. This can negatively affect performance. Don’t change it unless you know what you’re doing.
  • Custom Transform
    Se usa para alterar la forma del tile. Usa esto si tienes tiles no cuadrados.

Todas estas opciones pueden dejarse por defecto para esta demostración.

Creando un Tileset

Una vez que hayas configurado tu tilemap, es hora de añadir un TileSet. Un TileSet es un Resource que contiene los datos de tus tiles sus texturas, formas de colisión, y otras propiedades. Cuando el juego se ejecuta, el TileMap combina los tiles individuales en un solo objeto.

Para añadir un nuevo TileSet, haga clic en la propiedad «Tile Set» y seleccione «New TileSet».

../../_images/tilemap_add_tileset.png

When you do this, the «TileSet» panel will open at the bottom of the editor window:

../../_images/tilemap_tool.png

First, you need to add the texture(s) that you’ll use for the tiles. Click the «Add Texture(s) to TileSet» button and select the tilesheet.png image.

Next, click «New Single Tile» and drag in the image to select the tile you want. Click the «Enable Snap» button to make it easier to select the entire tile. A yellow rectangle appears around the selected tile.

../../_images/tilemap_add_tile.png

Click on the TileMap in the scene tree, and you’ll see that the newly created tile now appears on the right side. Click in the viewport and you can place tiles. Right-click to remove them.

../../_images/tilemap_draw.png

It’s easy to accidentally select and move the tilemap node. To avoid this, use the node’s lock button:

../../_images/tile_lock.png

Formas de Colisión

If you’re making a map that needs collisions - walls, floor, or other obstacles, for example - then you’ll need to add collision shapes to any tiles that you want to be considered «solid».

Click «TileSet» at the bottom of the editor window to return to the tileset tool. Click the tile you previously defined (outlined in yellow). Select the «Collision» tab and click the «Create a new rectangle» button. Make sure you still have grid snap enabled, then click and drag in the tile. A square collision shape appears in light blue:

../../_images/tileset_add_collision.png

You can add occlusion and navigation shapes to the tile in the same way.

Atlas tiles

Rather than adding individual tiles one at a time, you can define a group of tiles all at once using an atlas. Click «New Atlas» and drag to select the entire tile sheet.

../../_images/tileset_atlas.png

If you haven’t already, make sure to change the «Step» in the snap settings to (64, 64), or your tiles may be chopped into smaller pieces. You can find this in the Inspector:

../../_images/tileset_snap.png

Once you’ve defined the atlas you can add collision shapes to the individual tiles as before. You can also click «Icon» to select one of the tiles to represent the atlas.

Back in the TileMap, you can select the atlas tile and you’ll see all of the tiles it contains:

../../_images/tileset_draw_atlas.png

In addition to saving time when defining the tiles, this can help by grouping similar tiles together when you’re working with a large number of tiles.

Tips and tricks

  • If you’re using a Camera2D to scroll your level, you may notice lines appearing between your tiles. To fix this, open Project Settings and enable «Use Pixel Snap» in the «Rendering/Quality» section.
  • You can flip and rotate tiles using the icons at the top right of the editor.
  • To draw straight lines, hold Shift while clicking and dragging a tile.
  • Tools such as copy, paste, and bucket fill, can be found in the «TileMap» menu in the upper-right.
../../_images/tilemap_menu.png