Utiliser les palettes de tuiles

Introduction

Une tilemap (littéralement une "carte de tuile") est une grille utilisé pour créer la disposition/le fond graphique d'un jeu. Il y a plusieurs avantages à utiliser le nœud TileMap pour concevoir vos niveaux. Premièrement, cela rend possible de dessiner le layout(disposition) en "peignant" les tuiles sur la grille, ce qui est beaucoup plus rapide que de placer individuellement chacune des tuiles sous formes de nœuds Sprite un par un. Deuxièmement, les tuiles permettent d'avoir des niveaux bien plus larges car elles sont optimisées pour être dessinés en grand nombre. Finalement, vous pouvez ajouter des collisions, des occlusions, et des formes de navigations aux tuiles, ajoutant des fonctionnalités supplémentaires à la TileMap.

../../_images/tileset_draw_atlas.png

Configuration du projet

Pour cette démo, nous allons utiliser ces tuiles prises du pack d'art "Abstract Platformer" de Kenney. Vous pouvez trouver le pack complet ici mais pour cette démo nous garderons ce petit pack.

../../_images/tilesheet.png

Créez un nouveau projet et placez l'image ci dessus dans le dossier du projet.

Quand vous utilisez un tileset (littéralement, un ensemble de tuiles), il est important que les tuiles côtes à côtes s'accordent ensemble. Le comportement par défaut de Godot est d'importer les images 2D en utilisant un mode "filtre interpolé" ce qui a pour résultats de très laides bordures entre les tuiles. Sélectionne l'image et clique sur l'onglet import. Désactive Filter et clique "Reimporter". Pour plus de détail, va voir Importer des images.

Nœud TileMap

Ajoute un nouveau nœud TileMap à la scène. Par défaut, un catalogue de tuiles utilise une grille carrée de tuiles. Vous pouvez aussi utilisé le mode "isométrique" basé sur la perspective ou définir vos propres forme de tuiles.

../../_images/tilemap_mode.png

Dans la section "Cell" (pour cellule) de l'inspecteur, il y a de nombreuses propriétés que vous pouvez ajuster pour customisez le comportement de votre catalogue de tuiles :

../../_images/tilemap_size.png
  • Taille de cellule
    Ceci détermine la taille de la grille, ce qui devrai correspondre à la taille en pixel de chaque tuiles. La valeur par défaut est (64, 64).
  • YSort
    Ceci provoque le dessin des tuiles à être dans l'ordre de leurs position selon l'axe Y, ce qui provoquent les tuiles qui sont plus bas à être dessinées par dessus les tuiles les plus hautes.
  • Demi décalage et Origine des Tuiles
    Ces propriétés affectent la position des tuiles par rapport à la position de la grille.
  • Quadrant
    Définit la taille des morceaux utilisés pour le dessin par lots. Cela peut avoir une incidence négative sur les performances. Ne le changez pas si vous ne savez pas ce que vous faites.
  • Transformation Personnalisée
    Utilisé pour changer la forme de la tuile, à utiliser si vous avez des tuiles non carrés .

Chacune de ces options peut être laissée à son paramètre par défaut pour cette démo.

Créer un jeu de tuiles

Une fois votre catalogue de tuiles configuré, il est temps d'ajouter un TileSet. Un jeu de tuile est une Resource qui contient les données à propos de vos tuiles, leurs textures, formes de collisions et autres propriétés. Lorsque le jeu tourne, le catalogue de tuile combine chaque tuile dans un unique objet.

Pour créer un nouveau jeu de tuile, cliquez sur la propriété "Tile Set" et sélectionnez "New TileSet".

../../_images/tilemap_add_tileset.png

Cliquez sur la propriété TileSet, et le panneau "TileSet" s'ouvrira au bas de la fenêtre de l'éditeur :

../../_images/tilemap_tool.png

Commencez par ajouter la/les textures que vous utiliserez pour vos tuiles : cliquez sur le bouton "Ajouter des textures au tileset" et sélectionner l'image tilesheet.png.

Ensuite, cliquez sur "New Single Tile" et glissez-y l'image pour sélectionner la tuiles que vous voulez. Cliquez sur "activez l'aimantation et afficher la grille" pour qu'il soit plus facile de sélectionner la tuile en entier. Un rectangle jaune apparaît autour de la tuile sélectionnée.

../../_images/tilemap_add_tile.png

Cliquez sur le catalogue de tuile (TileMap) dans l'arbre de scène et vous verrez la tuile nouvellement crée apparaître sur le coté droit. Cliquez dans la fenêtre d'affichage et vous pouvez placer des tuiles. Clique-droit pour les enlever.

../../_images/tilemap_draw.png

Il est facile de sélectionner et de déplacer accidentellement le nœud TileMap. Pour éviter cela, utilisez le bouton de verrouillage du nœud :

../../_images/tile_lock.png

Formes de collisions

Si vous créer un terrain qui a besoin de collisions -murs, sol, obstacles, par exemples- vous aurez besoin d'ajouter des formes de collisions à chaque tuile que vous voulez considérer "solide".

Cliquez sur "TileSet" en bas de la fenêtre de l'éditeur pour retourner sur l'outil tileset. Cliquez sur la tuile que vous avez précédemment définie (souligné en jaune). Sélectionnez l'onglet "Collision" et cliquez sur le bouton "Créer un nouveau rectangle". Assurez vous d'avoir la grille toujours activée puis cliquez-glissez sur la tuile : Une forme de collision carré apparaît en bleu clair :

../../_images/tileset_add_collision.png

Vous pouvez ajouter de l'occlusion et des formes de navigation à la tuiles de la même manière.

Atlas de Tuile

Plutôt que d'ajouter une tuile à la fois, vous pouvez définir un groupe de tuiles en utilisant un atlas. Cela vous permet également de générer aléatoirement des tuiles à partir du groupe.

Cliquez sur "Nouvel atlas" et faites glisser pour sélectionner la feuille de tuile entière.

../../_images/tileset_atlas.png

Si vous ne l'avez pas déjà fait, assurez-vous de changer les paramètres de "Step" dans les réglages de snap à (64, 64), ou vos tuiles peuvent être coupées en plus petits morceaux. Vous pouvez trouver ceci dans l'inspecteur :

../../_images/tileset_snap.png

Une fois que vous avez défini l'atlas, vous pouvez ajouter des formes de collision aux tuiles individuelles comme auparavant. Vous pouvez également cliquer sur "Icon" pour sélectionner une des tuiles pour représenter l'atlas.

De retour au catalogue de tuile, vous pouvez sélectionner l'atlas et vous verrez toutes les tuiles qu'il contient :

../../_images/tileset_draw_atlas.png

En plus d'économiser du temps au moment de définir les tuiles, ça peut permettre de grouper les tuiles similaires ensemble quand vous travailler avec un large nombre de tuile.

Priorités des tuiles aléatoires

Lorsque vous dessinez avec des tuiles de l'atlas, l'activation de l'option "Use priority" fait que les tuiles sont choisies au hasard. Par défaut, chaque tuile de l'ensemble a une probabilité égale d'être choisit. Vous pouvez modifier cette probabilité en définissant des priorités différentes pour chaque tuile. Par exemple, une tuile de priorité 2 a deux fois plus de chances d'être sélectionnée qu'une tuile de priorité 1, et une tuile de priorité 3 a 50 % plus de chances d'être sélectionnée qu'une tuile de priorité 2.

Autotiles

Les Autotiles vous permettent de définir un groupe de tuiles, puis d'ajouter des règles pour contrôler quelle tuile est utilisée pour le dessin en fonction du contenu des cellules adjacentes.

Cliquez sur "Nouvelle Auto-tuile" et faites glisser pour sélectionner les tuiles que vous souhaitez utiliser. Vous pouvez ajouter des collisions, des occlusions, des formes de navigation, des priorités de tuiles et sélectionner une icône de tuile de la même manière que pour les tuiles de l'atlas.

Le choix des tuiles est contrôlé par des bitmasks. Les bitmasques peuvent être ajoutés en cliquant sur "Bitmask", puis en cliquant sur des parties des tuiles pour ajouter ou supprimer des bits dans le masque. Un clic gauche sur une zone de la tuile ajoute un bit, un clic droit enlève "off", et un shift + clic gauche met un bit "ignore".

Chaque fois que Godot met à jour une cellule en utilisant une autotile, il crée d'abord un modèle basé sur les cellules adjacentes qui sont déjà définies. Ensuite, il recherche dans l'autotile une seule tuile avec un bitmask correspondant au modèle créé. Si aucun masque binaire correspondant n'est trouvé, la tuile "icon" sera utilisée à la place. Si plus d'un masque binaire correspondant est trouvé, l'un d'entre eux sera sélectionné au hasard, en utilisant les priorités de la tuile.

Les règles de correspondance entre un bitmask et un motif dépendent du mode de bitmask autotile du tileset. Ce mode peut être défini dans l'onglet "Inspecteur", sous la rubrique "Selected Tile". Les valeurs autorisées sont "2x2", "3x3 (minimal)" et "3x3".

Tous les bits "on" et "off" doivent être satisfaits pour qu'un masque binaire corresponde, mais les bits "ignore" sont ignorés.

2x2

En mode 2x2, chaque bitmask contient quatre bits, un pour chaque coin.

Lorsqu'un bit est "on", toutes les cellules connectées à ce coin doivent être remplies en utilisant la même autotile, afin que le bitmask corresponde. Par exemple, si le bit en haut à gauche est activé, la cellule directement au-dessus, directement à gauche et en diagonale au-dessus de la gauche doit être remplie.

Lorsqu'un bit est "off", au moins une cellule connectée à ce coin ne doit pas être mise en place en utilisant la même autotile.

Il faut au moins un bit pour que la tuile soit utilisée, ce qui fait qu'il faudrait un total de 15 tuiles pour fournir exactement une tuile pour chaque arrangement que ce mode peut tester.

Le mode 2x2 ne peut correspondre qu'à des cellules faisant partie d'un bloc de 2 par 2 - les cellules sans voisins et les lignes d'une seule largeur de cellule ne sont supportées.

3x3 (minimal)

En mode 3x3 (minimal), chaque bitmask contient 9 bits (4 coins, 4 bords, 1 centre).

Les 4 coins fonctionnent de la même manière qu'en mode 2x2.

Lorsqu'un bit de bord est "on", la cellule qui partage ce bord doit être remplie. Lorsqu'un bit de bordure est "off", la cellule qui partage cette bordure doit être vide.

Le bit central doit être "on" pour toute tuile que vous souhaitez utiliser.

Notez que dans ce mode, il n'est pas logique qu'un bit de coin soit "on" alors qu'un bit de bord adjacent n'est pas "on".

Au total, 47 tuiles seraient nécessaires pour fournir exactement un bitmask pour chaque arrangement que ce mode peut tester.

3x3

En mode 3x3, chaque bitmak contient 9 bits (4 coins, 4 bords, 1 centre)

Chaque bit vérifie une seule cellule adjacente. Les bits de coin ne vérifient que les cellules diagonalement adjacentes. Le bit du centre doit être "on" pour toute tuile que vous souhaitez utiliser.

Un total de 256 tuiles serait nécessaire pour fournir exactement un bitmask pour chaque arrangement que ce mode peut tester.

Désactivation de l'autotile

Lors de l'utilisation d'une autotile, il est possible de désactiver le comportement de l'autotile et de sélectionner les tuiles manuellement, en cliquant sur "Désactiver l'autotile" en haut de la fenêtre de sélection des tuiles.

Liaison d'autotile

Par défaut, l'autotile ne vérifie que les cellules adjacentes remplies à l'aide de la même autotile. Il est possible de passer outre à ce comportement afin que les autotiles se lient entre elles, ou même se lient aux cellules vides. À l'heure actuelle, cela ne peut se faire que par le biais d'un script. Vous devrez ajouter un script à votre tileset, et définir une fonction appelée "_is_tile_bound(drawn_id, neighbor_id)". Cette fonction sera appelée pour chaque cellule adjacente qui ne contient pas la même autotile, et devrait retourner vrai si vous voulez que la cellule dessinée se "lie" à la cellule voisine. Vous pouvez trouver l'identifiant d'une autotile en utilisant "find_tile_by_name(name)", les cellules vides ont un identifiant de -1.

Notez que pour l'utiliser dans l'éditeur, le script doit commencer par une déclaration "tool", et vous devrez peut-être fermer et recharger la scène pour que ces changements prennent effet.

Trucs et Astuces

  • Si vous utilisez une Camera2D pour faire défiler votre niveau, vous risquez de remarquer que des lignes apparaissent entre vos tuiles. Pour empêcher ça, ouvrez "Projet -> Paramètres de Projet" et dans la section "Rendering -> Quality" activez "Use Pixel Snap".
  • Vous pouvez basculer et tourner vos tuiles en utilisant les icônes en haut à droite de l'éditeur.
  • Pour tracer des lignes droites, maintenez Shift tout en cliquant et en faisant glisser une tuile.
  • Des outils comme copier, coller et remplir peuvent être trouvés dans le menu "TileMap" en haut à droite.
../../_images/tilemap_menu.png