Créez des niveaux 2D isométriques avec le système Tilemap

Unity 2018.3 a introduit la prise en charge des cartes de tuiles isométriques, très similaires aux cartes de tuiles hexagonales, qui a été ajoutée dans la version 2018.2. Les nouvelles fonctionnalités de Tilemap vous permettent de créer rapidement et efficacement des environnements 2D basés sur les grilles isométriques et hexagonales qui ont été utilisées dans de nombreux jeux classiques, y compris les premières parties de Diablo et Fallout, Civilization, Age of Empires et bien d'autres.

Les deux systèmes sont basés sur le système Tilemap déjà existant, qui est apparu dans Unity 2017.2, et aujourd'hui, il est tout aussi facile de travailler avec eux! De plus, ils ont une intégration native avec Editor. Dans les futures versions d'Unity, ils peuvent être portés vers le gestionnaire de packages.

Si vous êtes intéressé à expérimenter ces systèmes, nous avons créé un projet de kit de démarrage isométrique pré-préparé avec un personnage animé et plusieurs ensembles de tuiles d'environnement. Vous pouvez le télécharger ici .

Paramètres du projet pour le plan de carte isométrique

Avant de commencer avec Tilemap, il est important de configurer correctement le projet. Le plan isométrique Tilmap fonctionne avec les sprites bidimensionnels et utilise le bon tri du rendu pour créer l'illusion d'une carte isométrique avec une vue de dessus. Nous devons d'abord éloigner les carreaux du spectateur et les rapprocher d'eux.

Vous pouvez utiliser la fonction Unity appelée Tri personnalisé des axes pour ajuster l'ordre de rendu des objets 2D à l'écran. Ce paramètre peut être défini pour la caméra (actuellement, cette méthode est standard pour les pipelines de rendu scriptables, y compris LWRP et HDRP), ou globalement, au niveau du projet.

Pour définir un tri d'axe personnalisé au niveau du projet, accédez à Edition> Paramètres du projet> Graphiques . Dans la section Paramètres de la caméra, vous verrez le menu déroulant Mode de tri par transparence, ainsi que les options de valeur X, YZ pour l'axe de tri par transparence.

Par défaut, Transparency Sort Axis définit les axes XYZ sur (0, 0, 1). Cependant, toutes nos tuiles 2D sont en fait sur le même plan Z. Par conséquent, pour déterminer quelles tuiles sont devant ou derrière, vous devez utiliser non pas la profondeur, mais la hauteur. Les tuiles situées plus haut sur l'écran seront triées par les plus basses. Pour trier les tuiles par hauteur, modifiez la valeur du mode de tri par transparence sur Personnalisé et définissez Axe de tri par transparence sur (0, 1, 0).


Pour en savoir plus sur son fonctionnement, vous pouvez lire la page correspondante sur le tri 2D dans la documentation Unity.

Dans certains cas, vous devrez peut-être également modifier la valeur de l'axe de tri de la transparence sur Z. Nous en parlerons plus loin ci-dessous.

Types de carte de tuile

Le système Tilemap se compose de plusieurs composants en interaction. Les deux premiers sont les objets de jeu Grid et Tilemap. Pour créer une grille, cliquez avec le bouton droit n'importe où dans la hiérarchie, accédez à l'objet 2D et sélectionnez le type de tilmap que vous souhaitez utiliser. Par défaut, chaque nouvelle grille est créée avec un objet de jeu Tilemap enfant du type correspondant. Les types de Tilemap suivants existent actuellement:

Tilemap - crée une grille rectangulaire et un Tilemap. Un exemple de l'utilisation de ce Tilemap peut être vu dans le kit de jeu 2D du moteur Unity.

Tilemap Hexagonal Point Top Tilemap - crée une grille et un tilemap à partir d'hexagones, dans lesquels l'un des sommets de chaque hexagone est dirigé vers le haut.

Le Tilemap Hexagonal Flat Top est un autre type de grille d'hexagones, dans laquelle au sommet de l'hexagone il y a une face parallèle au bord supérieur de l'écran.

Les deux derniers types, Isométrique et Isométrique Z comme Y , créent deux implémentations différentes de la grille isométrique. La différence entre eux apparaît lors de la simulation de différents niveaux de hauteurs de carreaux, par exemple, lorsqu'il existe une plate-forme haute au niveau isométrique.

Si vous souhaitez créer des objets de jeu Tilemap séparés pour chaque niveau de hauteur de tuile, il est préférable d'utiliser le type de carte Tilemap isométrique habituel. Il simplifie le processus de création de formes de collision automatique, mais offre moins de flexibilité lors du travail avec des élévations entre les tuiles, car toutes les tuiles sur la même couche doivent être sur le même «plan».

Dans le cas de Z isométrique en tant que mappage Y, la valeur de la position Z de chaque tuile fonctionne en conjonction avec le paramètre Tri de l'axe de transparence, ce qui donne l'impression que les tuiles sont empilées les unes sur les autres. Lorsque vous dessinez sur un Z comme Y Tilemap, nous modifions dynamiquement le paramètre de pinceau Z pour basculer entre différentes hauteurs. Pour rendre Z comme Y Tilemap correctement , une valeur Z supplémentaire est requise dans l'axe de tri de la transparence avec le mode personnalisé.


Remarque: les éléments illustrés dans les captures d'écran ont été extraits de la tuile Temple du projet Kit de démarrage isométrique . Ils sont entièrement gratuits, vous pouvez donc les utiliser pour créer vos propres environnements!

Considérez la grille comme un «chevalet» sur lequel résident tous les objets du jeu Tilemap. Et ceux-ci, à leur tour, sont essentiellement une toile sur laquelle nous allons dessiner des tuiles. Pour commencer à dessiner sur Tilemap, nous avons également besoin d'un pinceau et d'une palette. Toutes les ressources de tuile se trouvent sur la palette de tuiles, à partir de laquelle elles peuvent être sélectionnées à l'aide de l'outil pinceau et commencer à dessiner.

Pour créer une palette de tuiles, choisissez Fenêtre> 2D> Palette de tuiles. Dans le menu déroulant supérieur gauche, sélectionnez «Créer une nouvelle palette». Assurez-vous que le type de maillage approprié est sélectionné. Dans l'exemple, j'utiliserai le Tilmap isométrique habituel, ainsi que les ressources du projet Kit de démarrage isométrique . Nous spécifierons Manuel comme taille de cellule de la palette (taille de cellule) afin de pouvoir redimensionner les tuiles isométriques. Dans ce cas, je sais que les tailles de mes carreaux correspondent à une grille avec une taille de cellule de 1 par X et 0,5 par Y; cependant, ils dépendent de la résolution sélectionnée lors de l'importation des valeurs de pixels par unité et de la taille des actifs - en fait, de l'angle isométrique de rotation des carreaux.

Remarque sur l'importation d'actifs

Vous ne savez peut-être pas quelles options d'importation et quelle taille de carte de tuile conviennent le mieux à vos actifs. Il y a une règle générale que vous pouvez suivre: vous devez d'abord regarder la résolution des tuiles. En règle générale, les blocs de tuiles isométriques sont plus grands en hauteur qu'en largeur; Les tuiles «plates» (qui ressemblent plus à un avion qu'à un cube) sont plus larges que hautes. Cependant, la largeur entre eux sera toujours la même. Par conséquent, si vous souhaitez que les tuiles occupent exactement une unité de mesure Unity, définissez les pixels par unité dans les paramètres d'importation de tuiles sur une valeur égale à leur largeur en pixels. Dans certains cas, cette valeur devra être modifiée, généralement dans le sens d'une diminution (ou d'une augmentation de la résolution des actifs); cela peut être utile si vous souhaitez recréer un effet dans lequel certaines tuiles semblent occuper plus d'une cellule de grille et chevaucher des tuiles adjacentes.


Pour déterminer la valeur de grille correcte par Y pour les tuiles, prenez la hauteur de la base (ou sommet) d'une tuile et divisez-la par la largeur. Cela vous donnera une valeur de Y par rapport à X, étant donné que X est 1. Voyons quelques exemples:


Dans les actifs de pixel art que nous utilisons pour ce projet, toutes les tuiles de base ont une hauteur de 32 pixels et une largeur de 64 pixels. Par conséquent, la taille de la grille en Y sera égale à 0,5. Le deuxième bloc de l'image provient du package d'actifs Golden Skull Studios; Vous pouvez le voir ici . L'exemple de vignette a été réduit, mais les éléments d'origine ont une largeur de 128 pixels. La base de la tuile est d'environ 66 pixels, ce qui donne une taille de grille Y de 66/128, soit environ 0,515 unités.

Le processus de base de travailler avec Tilemap

Après avoir décidé de la bonne taille de la grille, ajoutez quelques tuiles à notre palette. Saisissez simplement l'un des sprites de tuiles et faites-le glisser dans la fenêtre Palette de tuiles. Cela créera le Tile Asset. Il contient des informations sur la tuile elle-même, par exemple, les sprites qu'elle utilise, la teinte et le type du collisionneur généré. Si vous avez besoin de voir des informations détaillées sur la tuile de palette, sélectionnez l'outil Sélectionner (S) en haut de la fenêtre de la palette de tuiles et cliquez sur cette tuile. Notez que l'inspecteur peut voir à quel élément Tile il fait référence.

Pour dessiner une nouvelle tuile par Tilemap, sélectionnez l'outil Pinceau (B) et cliquez sur la tuile dans la palette. Après cela, vous pouvez dessiner avec la tuile sélectionnée dans la fenêtre de la scène. Il existe d'autres outils de dessin tels que Gomme (D), Remplissage de boîte (U), Remplissage d'inondation (G) et Sélecteur de carreaux (I).

Parfois, vous devez changer l'emplacement des tuiles sur la palette elle-même. Juste en dessous de la barre d'outils, il y a un bouton Modifier. Si vous cliquez dessus, le mode d'édition de palette s'active, dans lequel les outils affectent la palette de tuiles elle-même. N'oubliez pas de quitter ce mode après avoir effectué les modifications nécessaires.

Modes de rendu Tilemap

Dans certains cas, les tuiles de différents types peuvent ne pas être triées correctement, bien qu'elles soient sur le même Tilmap, comme dans cet exemple:


Ceci est déterminé par le paramètre Mode du composant Tilemap Renderer. Par défaut, le mode est Chunk.

Le mode bloc est efficace pour réduire la consommation des actifs Tilemap. Au lieu de rendre chaque tuile individuellement, il les rend en un seul passage comme un grand bloc. Cependant, ce mode présente deux inconvénients principaux. Tout d'abord, il ne prend pas en charge le tri dynamique avec d'autres objets 2D dans la scène. Cela signifie que si le Tilemap est en mode Chunk, il ne pourra pas trier dynamiquement devant ou derrière d'autres objets, par exemple, des caractères - seul l'un ou l'autre sera visible à la fois, et cela dépend du paramètre Order in Layer. Cependant, il est toujours extrêmement efficace pour optimiser le jeu et peut être utilisé pour rendre par lots de grandes zones de terrain.

Cependant, cela ne nous évite pas le problème du tri incorrect des différentes tuiles. Pour le rendu par lots de carreaux provenant de deux ou plusieurs sprites différents (par exemple, des textures), les sprites doivent être combinés en un seul atout Sprite Atlas.

Pour créer Sprite Atlas, sélectionnez Actifs> Créer> Sprite Atlas . Sprite Atlas a une liste d' objets à emballer . Faites simplement glisser et déposez toutes les tuiles qui doivent être rendues par lots et spécifiez les paramètres d'importation appropriés, correspondant généralement aux paramètres des sprites individuels.

Après cela, les tuiles seront triées correctement; mais ils ne seront visibles qu'en mode Play ou pendant l'exécution du jeu.

Par conséquent, pendant le processus d'édition, il est préférable de sélectionner le mode individuel pour Tilemap Renderer. Dans ce mode, chaque sprite sera trié séparément; cela signifie qu'ils s'afficheront correctement même en dehors du mode de lecture, ce qui est très utile lors de l'édition d'un niveau. Une fois la création de la structure de niveaux terminée, vous pouvez à tout moment basculer de nouveau le mode Tilemap Renderer sur Chunk.


Le mode de rendu individuel est également utile lorsque vous devez ajouter des objets tels que des arbres, des objets et des parcelles de terrain plus élevées qui doivent être triés dynamiquement avec des caractères ou entre eux. Dans cet article, nous activerons le mode individuel pour tous les Tilemap.

Utilisation de Tilemap multiple

Parfois, il est nécessaire d'utiliser plusieurs Tilemap sur une même grille. Dans le cas de Tilemap isométrique et hexagonal, il est utile de pouvoir ajouter au niveau de l'élément aligné sur la grille ou des tuiles qui semblent plus élevées que la première couche.

Pour connecter un autre Tilemap à la grille, cliquez avec le bouton droit sur l'objet de jeu Grille et créez un nouveau Tilemap du type approprié.

Pour commencer à dessiner sur le nouveau Tilemap, revenez à la fenêtre Palette de tuiles et modifiez le Tilemap actif sous la barre d'outils principale.

Ajout de zones surélevées

Il existe deux façons principales d'ajouter des zones surélevées aux niveaux. Le choix du bon dépend généralement du type de Tilmap que vous sélectionnez. Nous examinerons chacun des cas.

De plus, nous avons préparé une courte vidéo sur ce sujet, qui montre ces approches en utilisant l'isométrique Tilmap habituel ainsi qu'en ajoutant des zones de collision aux tuiles. Regardez la vidéo si vous voulez comprendre brièvement ces deux façons:

Utilisation d'un Tilemap isométrique régulier

Pour un Tilmap isométrique normal, vous pouvez simplement créer un nouveau Tilemap avec la même grille et attribuer une valeur plus élevée à Order in Layer. Vous pouvez ensuite modifier le paramètre Tile Anchor afin que le nouveau calque soit ancré à un point supérieur de la même grille.

Mon Tilemap de niveau inférieur pour X et Y a Ancrage de tuile réglé sur (0, 0). Je veux que la nouvelle couche soit dessinée une unité plus haut, donc je changerai le point d'ancrage du nouveau Tilemap en (1, 1). Je vais également définir l'ordre dans la couche sur 1 - un de plus que le niveau de base.

Vous pouvez maintenant changer le Tilemap actif à un deuxième niveau de hauteur et commencer à dessiner.

Utilisation de Z comme tilmap isométrique Y

Il peut parfois être utile de simuler différentes hauteurs avec un seul Tilemap. Dans ce cas, vous pouvez utiliser Z as Y Tilometric Tilemap and Grid.

Dans le cas de Z comme Y Tilemap, la valeur Z de chaque tuile a un effet supplémentaire sur l'ordre dans lequel les tuiles sont rendues. Nous pouvons changer la valeur des tuiles Z lors de leur dessin en utilisant le paramètre Position Z du pinceau en bas de la palette de tuiles (ainsi qu'en utilisant les touches de raccourci "+" et "-"):


Cependant, pour que la valeur Z influence correctement et que les tuiles soient triées correctement, vous devez revenir à la valeur Tri personnalisé de l'axe et ajouter l'influence Z. Le nombre utilisé ici est directement lié à la façon dont Unity convertit les positions des cellules de la grille isométrique en valeurs dans l'espace universel.

Par exemple, une grille avec des dimensions selon XYZ de (1, 0,5, 1) - standard pour l'isométrie - aura une valeur de tri le long de l'axe Z égale à -0,26. Si vous êtes intéressé par la façon dont ce nombre est calculé, ou si vous utilisez une grille avec une taille de cellule différente, continuez à lire pour savoir comment trouver la valeur Z correcte pour votre cas.

En définissant la valeur correcte pour le tri d'axe personnalisé, vous pouvez commencer à dessiner des tuiles avec différentes valeurs Z. Vous pouvez également configurer les incréments avec lesquels la valeur Z déplace les tuiles surélevées vers le haut ou vers le bas, en modifiant la taille Z de la grille, qui est 1 par défaut.

Calcul de la valeur Z

Il existe une formule générale qui peut être utilisée pour déterminer la valeur Z du tri des axes. Tout d'abord, prenez la taille Y de la grille. Si vous n'avez pas encore décidé de la taille de Y, consultez la note sur l'importation d'actifs ci-dessus. Multipliez cette valeur par -0,5 et soustrayez 0,01.

Selon cette formule, une grille de taille (1, 0,5, 1) nous donnera une valeur de tri par Z de -0,26. Avec cette valeur de tri, les tuiles de n'importe quelle grille (1, 0,5, 1) seront triées correctement.

Si vous souhaitez en savoir plus sur cette valeur et sur les calculs, étudiez la documentation . Il explique en détail le travail des rendus 2D et ce qui se passe lorsque les cellules isométriques sont converties en valeurs spatiales universelles.

Ajout de collisions

Maintenant que nous avons placé certaines tuiles sur les autres, à l'aide de collisions, nous pouvons contrôler les zones que le joueur peut atteindre et les transitions entre elles.

Il existe de nombreuses façons d'ajouter des collisions, mais dans notre cas, il est nécessaire que le joueur monte et descende le long de la pente, il n'est donc pas si évident quels objets devraient avoir des collisionneurs. Nous pouvons définir les conflits manuellement à l'aide du Tilemap facultatif.

Dans ce projet, nous avons créé plusieurs sprites correspondant à différentes formes qui définiront les zones de collisions. Nous pouvons dessiner ces formes sur le troisième Tilemap dans des endroits où le joueur ne peut pas passer. Par exemple, nous voulons qu'un joueur ne puisse grimper sur un rocher que le long d'une pente, et non pas grimper directement dessus.

Nous pouvons également ajouter un matériau unique à Tilemap Renderer pour donner aux carreaux une nuance différente et les distinguer du reste du niveau.

En plaçant des tuiles de collision, vous pouvez ajouter le composant Tilemap Collider aux collisions de Tilemap. Dans ce cas, pour chaque tuile individuelle, des collisionneurs sont automatiquement créés, déterminés par la forme du sprite.

Pour optimiser les performances, vous pouvez également ajouter le composant Composite Collider 2D et cocher la case Utilisé par composite pour Tilemap Collider. Cela combinera tous les collisionneurs individuels en une seule grande forme.

Ajout d'éléments

Ajouter des éléments à un niveau est assez simple. Vous pouvez soit placer manuellement des images-objets à n'importe quel point de la scène, soit attacher des éléments à la grille Tilemap, en les transformant en tuiles distinctes. Choisissez la solution qui vous convient le mieux.

Dans ce projet, nous avons placé manuellement plusieurs arbres au niveau. Les arbres et le personnage ont le même ordre dans la couche, ce qui vous permet de trier dynamiquement le personnage devant et derrière les arbres.

À l'aide du collisionneur, vous pouvez spécifier le point auquel le joueur peut s'approcher de l'arbre. Cela peut également se faire de plusieurs manières.

Le premier est montré dans la vidéo - il suffit d'attacher un collisionneur enfant à l'objet et de changer sa forme selon les besoins.

La deuxième façon consiste à définir la forme physique personnalisée de l'objet dans l'éditeur de sprites. Pour ouvrir l'éditeur de sprites, sélectionnez l'objet sprite et recherchez le bouton Editeur de sprites dans l'inspecteur. Dans le menu déroulant supérieur gauche, basculez vers l'éditeur de forme physique personnalisé. Ici, vous pouvez créer des formes polygonales qui définissent les bordures du collisionneur. Après avoir défini la forme physique, vous pouvez attacher le composant Polygon Collider à l'objet, et il correspondra à cette forme.

Si vous utilisez des objets comme tuiles dans Tilemap, vous pouvez également utiliser le collisionneur Grille. Choisissez l'élément de mosaïque qui correspond à l'élément de l'élément (si vous ne vous souvenez pas où le trouver, consultez la section «Processus de base de Tilmap»). Vous verrez le menu Type de collisionneur. Par défaut, une image-objet est définie comme type, c'est-à-dire que le collisionneur généré automatiquement utilisera la forme physique, dont nous avons parlé ci-dessus. Si le type est défini sur grille. alors il correspondra toujours exactement à la forme de la cellule de maillage à laquelle l'élément est attaché. Ce n'est peut-être pas le moyen le plus précis d'implémenter des collisionneurs, mais pour certains types de jeux, cela peut être utile.

Pour utiliser des collisionneurs pour ces tuiles, sélectionnez le Tilemap avec des objets et ajoutez le composant Tilemap Collider.

Utilisation des vignettes de règles

Les tuiles de règle sont extrêmement utiles pour automatiser le processus de dessin avec des tuiles. La tuile de règle fonctionne comme une tuile ordinaire, mais dispose d'une liste supplémentaire d'options de tuile.En utilisant ces paramètres (règles), une tuile peut choisir automatiquement l'image-objet à dessiner en fonction des tuiles voisines.

Les tuiles de règle sont utiles lorsque vous ne souhaitez pas sélectionner manuellement des tuiles avec des tours différents, par exemple, lors de la création d'un rocher ou d'une plate-forme. Ils peuvent également être utilisés pour randomiser entre différentes variations d'une même tuile, pour éviter de répéter des motifs, et même pour créer des tuiles animées.

Les tuiles de règles isométriques et hexagonales sont disponibles à partir du référentiel 2D Extras Unity sur GitHub. Il possède également de nombreux autres actifs Tilemap utiles qui méritent d'être explorés.

Nous avons ajouté le kit de démarrage isométrique au projet.Tuiles de règle pour chaque jeu de tuiles. Voici quelques exemples de tuiles de projet que vous pouvez expérimenter:

Travaux ultérieurs

Maintenant que vous avez découvert le périphérique des cartes de tuiles isométriques dans Unity, téléchargez le projet de kit de démarrage isométrique et essayez de travailler avec vous-même! Si vous êtes programmeur, vous avez la possibilité d'interagir avec Tilemap via des scripts, vous pouvez l'utiliser.

Par exemple, en regardant cette vidéo, vous pouvez apprendre à implémenter un contrôleur de caractères simple compatible avec Isometric Tilemap:


Les graphiques de ce projet ont été créés pour Unity par @castpixel ; ses autres œuvres peuvent être vues ici . Si vous souhaitez en savoir plus sur la création de jeux 2D sur Unity, vous devriez apprendre quelques excellents cours sur le site Web Learn . Si vous recherchez des ressources supplémentaires pour expérimenter avec des cartes de tuiles, consultez le magasin d'actifs Unity .

La première fois que vous créez des niveaux avec Tilemap? Apprenez à créer des mondes bidimensionnels dans ce didacticiel pour débutant Unity Learn.