Up to date

This page is up to date for Godot 4.3. If you still find outdated information, please open an issue.

Utilisation des jeux de tuiles

Introduction

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.

Pour suivre ce guide, vous aurez besoin d'une image contenant vos tuiles où chaque tuile a la même taille (les grands objets peuvent être divisés en plusieurs tuiles). Cette image s'appelle une feuille de tuiles. Les tuiles ne doivent pas forcément être carrées : elles peuvent être rectangulaires, hexagonales ou isométriques (perspective pseudo-3D).

Créer un nouveau jeu de tuiles

Utiliser une feuille de tuiles

Cette démonstration utilisera les tuiles suivantes tirées du pack « Abstract Platformer » de Kenney <https://kenney.nl/assets/abstract-platformer>`__. Nous utiliserons cette feuille de tuiles particulière de l'ensemble :

Feuille de tuiles avec des tuiles 64×64. Crédit : 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

Après avoir créé la ressource TileSet, cliquez sur la valeur pour la déplier dans l'inspecteur. La forme de tuile par défaut est Carré, mais vous pouvez également choisir Isométrique, Carré décalé de moitié ou Hexagone (selon la forme de vos images de tuiles). Si vous utilisez une forme de tuile autre que Carré, vous pouvez également avoir besoin d'ajuster les propriétés Calque de tuile et Axe de décalage de tuile. Enfin, activer la propriété Rendu > Clipping UV peut être utile si vous souhaitez que les tuiles soient clippée par leurs coordonnées de tuile. Cela garantit que les tuiles ne peuvent pas dessiner à l'extérieur de leur zone allouée sur la feuille de tuiles.

Définissez la taille de tuile à 64×64 dans l'inspecteur pour correspondre à la feuille de tuile d'exemple :

Réglage de la taille de la tuile à 64×64 pour correspondre à la feuille de tuile d'exemple

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

Ouvrez le panneau TileSet en bas de l'éditeur, puis cliquez et faites glisser l'image de la feuille de tuiles sur le panneau. On vous demandera si vous souhaitez créer des tuiles automatiquement. Répondez Oui :

Création automatique de tuiles basé sur le contenu de l'image de la feuille de tuiles

Cela créera automatiquement des tuiles selon la taille de tuile que vous avez spécifiée plus tôt dans la ressource TileSet. Cela accélère grandement la configuration initiale des tuiles.

Note

Lors de l'utilisation de la génération automatique de tuiles basé sur le contenu de l'image, les parties de la feuille de tuiles qui sont complètement transparentes n'auront pas de tuiles générées.

Si vous ne souhaitez pas que certaines tuiles de la feuille de tuiles soient présentes dans l'atlas, sélectionnez l'outil Gomme en haut de l'aperçu de l'ensemble de tuiles, puis cliquez sur les tuiles que vous souhaitez supprimer :

Utiliser l'outil Gomme afin de supprimer les tuiles indésirables de l'atlas du TileSet

Vous pouvez également faire un clic droit sur une tuile et choisir Delete, comme alternative à l'outil Gomme.

Astuce

Comme dans les éditeurs 2D et TileMap, vous pouvez faire défiler le panneau TileSet en utilisant le bouton central ou droit de la souris, et zoomer en utilisant la molette de la souris ou les boutons situés dans le coin supérieur gauche.

Si vous souhaitez obtenir des tuiles à partir de plusieurs images de feuilles de tuiles pour un seul TileSet, créez des atlas supplémentaires et attribuez des textures à chacun d'eux avant de continuer. Il est également possible d'utiliser une image par tuile de cette manière (bien que l'utilisation de feuilles de tuiles soit recommandée pour une meilleure productivité).

Vous pouvez ajuster les propriétés de l'atlas dans la colonne centrale :

Ajuster les propriétés de l'atlas du TileSet dans l'inspecteur dédié (qui fait partie du panneau TileSet)

Les propriétés suivantes peuvent être définies sur l'atlas :

• ID : L'identifiant (unique dans ce TileSet), utilisé pour le tri.

• Nom : Le nom facilement lisible pour l'atlas. Utilisez un nom descriptif ici à des fins organisationnelles (comme "terrain", "décoration", etc.).

• Marges : Les marges sur les bords de l'image qui ne doivent pas être sélectionnables comme tuiles (en pixels). Cela peut être utile si vous téléchargez une image de feuille de tuile qui a des marges sur les bords (par ex. pour l'attribution).

• ** Séparation :** La séparation entre chaque tuile sur l'atlas en pixels. L’augmenter peut être utile si l'image de feuille de tuile que vous utilisez contient des guides (comme des contours entre chaque tuile).

• 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).

• Utilisez le padding de texture : Si cette case est cochée, ajoute un bord transparent de 1 pixel autour de chaque tuile pour éviter le saignement de la texture lorsque le filtrage est activé. Il est recommandé de laisser cette option activée sauf si vous rencontrez des problèmes de rendu dus au padding de texture.

Note that changing texture margin, separation and region size may cause tiles to be lost (as some of them would be located outside the atlas image's coordinates). To regenerate tiles automatically from the tilesheet, use the three vertical dots menu button at the top of the TileSet editor and choose Create Tiles in Non-Transparent Texture Regions:

Recréation automatique des tuiles après un changement des propriétés de l'atlas

Utiliser une collection de scènes

Depuis Godot 4.0, vous pouvez placer des scènes comme des tuiles. Cela vous permet d'utiliser toute collection de nœuds comme tuile. Par exemple, vous pouvez utiliser des tuiles de scène pour placer des éléments de gameplay, tels que des magasins où le joueur peut interagir avec. Vous pouvez également utiliser des tuiles de scène pour placer des AudioStreamPlayer2D (pour les sons ambiants), les effets de particules, et plus encore.

Avertissement

Scene tiles come with a greater performance overhead compared to atlases, as every scene is instanced individually for every placed tile.

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:

Créer une collection de scènes dans l'éditeur TileSet

Après avoir créé une collection de scènes, vous pouvez entrer un nom descriptif pour la collection de scènes dans la colonne du milieu si vous le souhaitez. Sélectionnez cette collection de scènes puis créez un nouvel emplacement de scène :

Création d'une tuile de scène après avoir sélectionné la collection de scènes dans l'éditeur TileSet

Sélectionnez cet emplacement de scène dans la colonne de droite, puis utilisez Chargement rapide (ou Charger) pour charger le fichier de scène contenant les particules :

Création d'un emplacement de scène, puis chargement d'un fichier de scène dans celui-ci depuis l'éditeur TileSet

You now have a scene tile in your TileSet. Once you switch to the TileMap editor, you'll be able to select it from the scenes collection and paint it like any other tile.

Merging several atlases into a single atlas

Using multiple atlases within a single TileSet resource can sometimes be useful, but it can also be cumbersome in certain situations (especially if you're using one image per tile). Godot allows you to merge several atlases into a single atlas for easier organization.

Pour ce faire, vous devez avoir plus d'un atlas créé dans la ressource TileSet. Utilisez le bouton "trois points verticaux" du menu situé au bas de la liste des atlas, puis choisissez Ouvrir l'outil de fusion d'atlas :

Ouvrir l'outil de fusion de l'atlas après avoir créé plusieurs atlas

Cela ouvrira une fenêtre, dans laquelle vous pouvez sélectionner plusieurs atlas en maintenant Shift ou Ctrl puis en cliquant sur plusieurs éléments :

Utilisation de la fenêtre de fusion d'atlas

Choisissez Fusionner pour fusionner les atlas sélectionnés en une seule image d'atlas (qui se traduit par un seul atlas dans le TileSet). Les atlas non fusionnés seront enlevés du TileSet, mais les images originales seront conservées sur le système de fichiers. Si vous ne voulez pas que les atlas non fusionnés soient retirés de la ressource TileSet, choisissez Fusionner (Garder les atlas originaux) à la place.

Astuce

TileSet features a system of tile proxies. Tile proxies are a mapping table that allows notifying the TileMap using a given TileSet that a given set of tile identifiers should be replaced by another one.

Les proxies de tuile sont automatiquement mises en place lors de la fusion de différents atlas, mais elles peuvent également être réglées manuellement grâce à la fenêtre Gérer les proxies de tuiles, que vous pouvez accéder à l'aide du menu "trois points verticaux" mentionné ci-dessus.

Manually creating tile proxies may be useful when you changed an atlas ID or want to replace all tiles from an atlas by the ones from another atlas. Note that when editing a TileMap, you can replace all cells by their corresponding mapped value.

Ajouter la collision, la navigation et l'occlusion au 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.

If you use 2D navigation, you'll also need to define navigation polygons for tiles to generate a navigation mesh that agents can use for pathfinding.

Lastly, if you use Lumières et Ombres 2D or GPUParticles2D, you may also want your TileSet to be able to cast shadows and collide with particles. This requires defining occluder polygons for "solid" tiles on the 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)

If you also need navigation support, now is a good time to create a navigation layer:

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

If you need support for light polygon occluders, now is a good time to create an occlusion layer:

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

Note

Future steps in this tutorial are tailored to creating collision polygons, but the procedure for navigation and occlusion is very similar. Their respective polygon editors behave in the same way, so these steps are not repeated for brevity.

The only caveat is that the tile's occlusion polygon property is part of a Rendering subsection in the atlas inspector. Make sure to unfold this section so you can edit the polygon.

Après avoir créé un calque de physique, vous avez accès à la section Calque de physique dans l'inspecteur d'atlas TileSet :

Opening the collision editor while in Select mode

You can quickly create a rectangle collision shape by pressing F while the TileSet editor is focused. If the keyboard shortcut doesn't work, try clicking in the empty area around the polygon editor to focus it:

Using default rectangle collision shape by pressing F

In this tile collision editor, you have access to all the 2D polygon editing tools:

• Use the toolbar above the polygon to toggle between creating a new polygon, editing an existing polygon and removing points on the polygon. The "three vertical dots" menu button offers additional options, such as rotating and flipping the polygon.

• Create new points by clicking and dragging a line between two points.

• Remove a point by right-clicking it (or using the Remove tool described above and left-clicking).

• Pan in the editor by middle-clicking or right-clicking. (Right-click panning can only be used in areas where there is no point nearby.)

You can use the default rectangle shape to quickly create a triangle-shaped collision shape by removing one of the points:

Creating a triangle collision shape by right-clicking one of the corners to remove it

You can also use the rectangle as a base for more complex shapes by adding more points:

Drawing a custom collision for a complex tile shape

Astuce

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.

Assigning custom metadata to the TileSet's tiles

You can assign custom data on a per-tile basis using custom data layers. This can be useful to store information specific to your game, such as the damage that a tile should deal when the player touches it, or whether a tile can be destroyed using a weapon.

The data is associated with the tile in the TileSet: all instances of the placed tile will use the same custom data. If you need to create a variant of a tile that has different custom data, this can be done by creating an alternative tile and changing the custom data for the alternative tile only.

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

Example of configured custom data layers with game-specific properties

You can reorder custom data without breaking existing metadata: the TileSet editor will update automatically after reordering custom data properties.

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:

Editing custom data in the TileSet editor while in Select mode

Tile property painting can also be used for custom data:

Assigning custom data in the TileSet editor using tile property painting

Creating terrain sets (autotiling)

Note

This functionality was implemented in a different form as autotiling in Godot 3.x. Terrains are essentially a more powerful replacement of autotiles. Unlike autotiles, terrains can support transitions from one terrain to another, as a tile may define several terrains at once.

Unlike before, where autotiles were a specific kind of tiles, terrains are only a set of properties assigned to atlas tiles. These properties are then used by a dedicated TileMap painting mode that selects tiles featuring terrain data in a smart way. This means any terrain tile can be either painted as terrain or as a single tile, like any other.

A "polished" tileset generally features variations that you should use on corners or edges of platforms, floors, etc. While these can be placed manually, this quickly becomes tedious. Handling this situation with procedurally generated levels can also be difficult and require a lot of code.

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

Les terrains sont regroupés en ensembles de terrains. Tous les terrains sont assignés un mode entre ** Faire correspondre les coins et les côtés**, ** Faire correspondre les coins** et ** Faire correspondre les côtés**. Ils définissent comment les terrains sont adaptés les uns aux autres dans un ensemble de terrains.

Note

The above modes correspond to the previous bitmask modes autotiles used in Godot 3.x: 2×2, 3×3 or 3×3 minimal. This is also similar to what the Tiled editor features.

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)

After creating a terrain set, you must create one or more terrains within the terrain set:

Créer un terrain dans l'ensemble de terrains

In the TileSet editor, switch to Select mode and click a tile. In the middle column, unfold the Terrains section then assign a terrain set ID and a terrain ID for the tile. -1 means "no terrain set" or "no terrain", which means you must set Terrain Set to 0 or greater before you can set Terrain to 0 or greater.

Note

Les IDs d'ensembles de terrain et les IDs de terrain sont indépendants les uns des autres. Aussi, ils commencent à 0, pas 1.

Configuring terrain on a single tile in the TileSet editor's Select mode

After doing so, you can now configure the Terrain Peering Bits section which becomes visible in the middle column. The peering bits determine which tile will be placed depending on neighboring tiles. -1 is a special value which refers to empty space.

For example, if a tile has all its bits set to 0 or greater, it will only appear if all 8 neighboring tiles are using a tile with the same terrain ID. If a tile has its bits set to 0 or greater, but the top-left, top and top-right bits are set to -1, it will only appear if there is empty space on top of it (including diagonally).

Configuring terrain peering bits on a single tile in the TileSet editor's Select mode

An example configuration for a full tilesheet may look as follows:

Example full tilesheet for a sidescrolling game

Example full tilesheet for a sidescrolling game with terrain peering bits visible

Assigning properties to multiple tiles at once

There are two ways to assign properties to multiple tiles at once. Depending on your use cases, one method may be faster than the other:

Utiliser la sélection de tuiles multiples

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

After doing this, you can select multiple tiles on the right column by holding Shift then clicking on tiles. You can also perform rectangle selection by holding down the left mouse button then dragging the mouse. Lastly, you can deselect tiles that were already selected (without affecting the rest of the selection) by holding Shift then clicking on a selected tile.

You can then assign properties using the inspector in the middle column of the TileSet editor. Only properties that you change here will be applied to all selected tiles. Like in the editor's inspector, properties that differ on selected tiles will remain different until you edit them.

With numerical and color properties, you will also see a preview of the property's value on all tiles in the atlas after editing a property:

Selecting multiple tiles using the Select mode, then applying properties

Utiliser la peinture de propriété de tuile

If you wish to apply a single property to several tiles at once, you can use the property painting mode for this purpose.

Configure a property to be painted in the middle column, then click on tiles (or hold down the left mouse button) in the right column to "paint" properties onto tiles.

Peindre les propriétés des tuiles en utilisant l'éditeur de TileSet

Tile property painting is especially useful with properties that are time-consuming to set manually, such as collision shapes:

Painting a collision polygon, then left-clicking tiles to apply it

Creating alternative tiles

Parfois, vous pourriez vouloir utiliser une seule image de tuile (trouvé une unique fois dans l'atlas), mais configurée de différentes manières. Par exemple, vous pourriez vouloir utiliser la même image de tuile, mais tournée, inversée ou modulée avec une couleur différente. Cela peut être fait en utilisant des tuiles alternatives.

Astuce

Depuis Godot 4.2, vous n'avez plus à créer des tuiles alternatives pour tourner ou inverser des tuiles. Vous pouvez tourner n'importe quelle tuile tout en la plaçant dans l'éditeur TileMap en utilisant les boutons de rotation/inversion dans la barre d'outils de l'éditeur TileMap.

Pour créer une tuile alternative, faites un clic droit sur une tuile de base dans l'atlas affiché par l'éditeur TileSet, puis choisissez Créer une tuile alternative :

Creating an alternative tile by right-clicking a base tile in the TileSet editor

If currently in Select mode, the alternative tile will already be selected for editing. If not currently in Select mode, you can still create alternative tiles, but you will need to switch to Select mode and select the alternative tile to edit it.

If you don't see the alternative tile, pan over to the right of the atlas image, as alternative tiles always appear on the right of base tiles of a given atlas in the TileSet editor:

Configuring an alternative tile after clicking it in the TileSet editor

After selecting an alternative tile, you can change any properties using the middle column like you would on a base tile. However, the list of exposed properties is different compared to base tiles:

• Alternative ID: The unique numerical identifier for this alternative tile. Changing it will break existing TileMaps, so be careful! This ID also controls the sorting in the list of alternative tiles displayed in the editor.

• Rendering > Flip H: If true, the tile is horizontally flipped.

• Rendering > Flip V: If true, the tile is vertically flipped.

• Rendering > Transpose: If true, the tile is rotated 90 degrees counter-clockwise and then flipped vertically. In practice, this means that to rotate a tile by 90 degrees clockwise without flipping it, you should enable Flip H and Transpose. To rotate a tile by 180 degrees clockwise, enable Flip H and Flip V. To rotate a tile by 270 degrees clockwise, enable Flip V and Transpose.

• Rendering > Texture Origin: The origin to use for drawing the tile. This can be used to visually offset the tile compared to the base tile.

• Rendering > Modulate: The color multiplier to use when rendering the tile.

• Rendering > Material: The material to use for this tile. This can be used to apply a different blend mode or custom shaders to a single tile.

• Z Index: The sorting order for this tile. Higher values will make the tile render in front of others on the same layer.

• Y Sort Origin: The vertical offset to use for tile sorting based on its Y coordinate (in pixels). This allows using layers as if they were on different height for top-down games. Adjusting this can help alleviate issues with sorting certain tiles. Only effective if Y Sort Enabled is true on the TileMapLayer node under CanvasItem > Ordering

You can create an additional alternative tile variant by clicking the large "+" icon next to the alternative tile. This is equivalent to selecting the base tile and right-clicking it to choose Create an Alternative Tile again.

Note

When creating an alternative tile, none of the properties from the base tile are inherited. You must set properties again on the alternative tile if you wish those to be identical on the base tile and the alternative tile.