Environnements isométriques en 2D avec Tilemap

Avec la sortie de Unity 2018.3, nous avons introduit la prise en charge des cartes de tuiles isométriques - suivant de près la prise en charge des cartes de tuiles hexagonales qui a été ajoutée dans la version 2018.2. Les nouvelles fonctionnalités de Tilemap offrent un moyen rapide et performant de créer des environnements 2D basés sur des grilles isométriques et hexagonales, que l'on retrouve dans de nombreux jeux classiques, notamment les premières entrées des franchises Diablo et Fallout, Civilization, Age of Empires, et bien d'autres encore. Ces deux fonctionnalités s'appuient sur le système Tilemap existant, introduit dans Unity 2017.2, et il est tout aussi facile de travailler avec elles aujourd'hui ! Ils sont également intégrés de manière native dans l'éditeur. Dans les versions ultérieures de Unity, ils pourraient être déplacés vers le gestionnaire de paquets. Si vous souhaitez suivre et expérimenter les techniques présentées, nous avons créé un projet de kit de démarrage isométrique préconfiguré avec un personnage animé et plusieurs jeux de tuiles d'environnement, que vous pouvez télécharger gratuitement.

Explorer davantage d'environnements et d'outils 2D qui offrent des possibilités créatives infinies

Avant de commencer à travailler avec Tilemap, il est important de configurer correctement notre projet. Isometric Tilemap fonctionne avec des sprites bidimensionnels et s'appuie sur un tri correct du moteur de rendu afin de créer l'illusion d'une vue isométrique de haut en bas. Nous devons nous assurer que les carreaux les plus éloignés de l'observateur sont peints en premier et que les carreaux les plus proches sont peints par-dessus.

Pour personnaliser l'ordre dans lequel les objets 2D sont peints à l'écran, nous pouvons utiliser la fonction Custom Axis Sort de Unity. Vous pouvez définir ce paramètre soit par caméra (actuellement, c'est la méthode par défaut dans les pipelines de rendu scriptables, y compris LWRP et HDRP), soit globalement au niveau du projet.

Pour définir un tri d'axe personnalisé au niveau du projet, allez dans Édition > Paramètres du projet > Graphiques. Dans la section Paramètres de la caméra, vous verrez une liste déroulante Mode de tri de la transparence, ainsi que les valeurs X, Y et Z de l'axe de tri de la transparence.

Par défaut, l'axe de tri de la transparence dans Unity est réglé sur (0, 0, 1) pour XYZ respectivement. Cependant, toutes nos tuiles 2D sont en fait sur le même plan Z. Au lieu de cela, nous pouvons déterminer quelles tuiles sont derrière ou devant en utilisant leur hauteur à l'écran, plutôt que leur profondeur. Les tuiles qui sont placées plus haut sur l'écran seront triées derrière celles qui sont placées plus bas. Pour trier les tuiles en fonction de leur hauteur, changez le mode de tri de la transparence en mode personnalisé et réglez les valeurs de l'axe de tri de la transparence sur (0, 1, 0).

Vous pouvez consulter la page de documentation Unity relative au tri 2D si vous souhaitez en savoir plus sur son fonctionnement.

Dans certains cas, vous pouvez également ajuster la valeur Z de l'axe de tri de la transparence. Nous reviendrons plus en détail sur ce point dans la suite de ce billet.

La fonction Tilemap se compose de plusieurs éléments qui fonctionnent ensemble. Les deux premiers sont les objets de jeu Grid et Tilemap. Pour créer une grille, il suffit de cliquer avec le bouton droit de la souris n'importe où dans la hiérarchie, d'aller dans Objet 2D et de sélectionner le type de mosaïque 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 cartes de tuiles actuellement disponibles sont les suivants :

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

Hexagonal Point Top Tilemap - crée une grille et une mosaïque hexagonales, où l'un des sommets de chaque hexagone pointe vers le haut.

Hexagonal Flat Top Tilemap - un autre type de grille hexagonale, où le sommet de l'hexagone est un bord parallèle au haut 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 les deux se produit lors de la simulation de différents niveaux d'élévation des tuiles, comme lorsque nous avons une plate-forme surélevée dans notre niveau isométrique.

Il est préférable d'utiliser une mosaïque isométrique classique lorsque vous souhaitez créer des objets de jeu distincts pour chaque niveau d'élévation de la mosaïque. Cela simplifiera le processus de création de formes de collision automatiques, mais vous aurez moins de flexibilité en ce qui concerne les variations de hauteur entre les tuiles, car toutes les tuiles d'une même couche devront être sur le même "plan".

Dans le cas d'une mosaïque isométrique Z comme Y, la valeur de la position Z de chaque tuile est combinée au paramètre personnalisé de tri de l'axe de transparence pour que les tuiles apparaissent comme empilées les unes sur les autres. Lorsque l'on peint sur une mosaïque Z comme Y, on ajuste dynamiquement le paramètre Z du pinceau pour passer d'une hauteur à l'autre. La mosaïque Z comme Y nécessite une valeur Z supplémentaire dans l'axe de tri de la transparence personnalisée pour que le rendu soit correct.

Remarque : Les éléments présentés ici proviennent du jeu de tuiles Temple de notre projet Isometric Starter Kit. N'hésitez pas à vous en emparer - c'est entièrement gratuit - et à vous amuser à créer vos propres environnements !

La grille est le "chevalet" sur lequel sont posés les objets de jeu Tilemap, qui sont en quelque sorte les toiles sur lesquelles vous allez peindre vos tuiles. Pour commencer à peindre sur une mappe de tuiles, vous avez également besoin d'un pinceau et d'une palette. Une palette de carreaux contient vos carreaux, après quoi vous pouvez les sélectionner à l'aide de l'outil pinceau et commencer à peindre.

Pour créer une palette de tuiles, choisissez Fenêtre > 2D > Palette de tuiles. Dans la fenêtre nouvellement ouverte, dans le menu déroulant en haut à gauche, choisissez "Créer une nouvelle palette". Veillez à définir le type de grille correspondant à votre cas d'utilisation. Pour cet exemple, j'utiliserai une mosaïque isométrique normale, ainsi que les éléments de notre projet Isometric Starter Kit. Réglez la taille des cellules de la palette sur Manuel pour pouvoir personnaliser les dimensions de vos carreaux isométriques. Dans ce cas, je sais que les dimensions de mes tuiles correspondent à une grille de 1 en X et de 0,5 en Y ; cependant, pour votre cas d'utilisation, cela dépendra de la résolution, des valeurs de pixels par unité sélectionnées lors de l'importation et des dimensions des actifs - essentiellement, de l'angle isométrique auquel les tuiles sont tournées.

Vous n'êtes peut-être pas sûr des paramètres d'importation corrects et de la taille de la table des matières qui conviendront à vos ressources. Il existe une règle générale que vous pouvez suivre ici en fonction des dimensions initiales de votre actif. Tout d'abord, examinez la résolution de vos tuiles. En règle générale, les tuiles isométriques représentées sous la forme d'un bloc sont plus hautes que larges ; les tuiles "plates" (celles qui se présentent sous la forme d'un plan plutôt que d'un cube) sont plus larges que hautes. Cependant, la largeur sera toujours la même entre les deux. Par conséquent, si vous souhaitez que vos tuiles occupent exactement une unité d'unité, définissez la valeur Pixels par unité dans les paramètres d'importation des tuiles comme étant égale à leur largeur en pixels. Dans certains cas, vous pouvez ajuster cette valeur, généralement en la diminuant (ou en augmentant la résolution réelle de vos ressources). Cela peut être utile si vous essayez de produire un effet dans lequel certaines tuiles semblent occuper plus d'une cellule de la grille et recouvrent les tuiles voisines.

Afin de déterminer la valeur correcte de la grille Y pour les carreaux, prenez la hauteur de la base (ou du chapeau) d'un seul carreau et divisez-la par la largeur. Vous obtiendrez ainsi une valeur Y par rapport à X, à condition que X soit égal à 1. Prenons quelques exemples :

Pour le pixel art que nous utilisons dans ce projet, toutes les tuiles ont une hauteur de base de 32 pixels et une largeur de 64 pixels. Par conséquent, la taille de la grille que nous utiliserons est exactement de 0,5 en Y. Le deuxième bloc de l'image d'exemple provient d'un pack d'actifs de Golden Skull Art. La tuile d'exemple a été réduite pour référence, mais les actifs originaux ont une largeur de 128 pixels. La base de la tuile a une hauteur d'environ 66 pixels, ce qui nous donne une taille de grille Y de 66/128, soit environ 0,515 unité.

Une fois que nous avons déterminé les dimensions correctes de la grille, ajoutons quelques carreaux à notre palette. Il suffit de saisir l'un de vos sprites de tuiles et de le faire glisser dans la fenêtre Palette des tuiles. Cette opération crée une tuile. Elle contient des informations sur la tuile elle-même, comme le(s) sprite(s) qu'elle utilise, une couleur de teinte et le type de collision qu'elle va générer. Si vous souhaitez voir les informations détaillées d'une tuile sur la palette, choisissez l'outil Sélectionner (S) en haut de la fenêtre Palette des tuiles et cliquez sur cette tuile. Maintenant, dans l'inspecteur, vous devriez être en mesure de voir à quel actif de la tuile il est fait référence.

Pour peindre la nouvelle tuile sur notre carte des tuiles, sélectionnez l'outil Pinceau (B) et cliquez sur la tuile dans la palette. Vous pouvez maintenant peindre avec la tuile sélectionnée dans la vue de la scène. Parmi les autres outils de peinture, citons la gomme (D), le remplissage de boîtes (U), le remplissage de l'eau (G) et le sélecteur de carreaux (I).

Il peut arriver que vous souhaitiez modifier la disposition des carreaux dans la palette elle-même. Juste en dessous de la barre d'outils, vous verrez un bouton Modifier. Si vous cliquez dessus, vous passerez en mode d'édition de la palette, au cours duquel les outils affecteront la palette de tuiles elle-même. N'oubliez pas de quitter ce mode une fois que vous avez effectué les modifications souhaitées.

Dans certains cas, il peut arriver que des tuiles de types différents ne soient pas triées correctement, bien qu'elles se trouvent sur la même carte des tuiles, comme dans l'exemple ci-dessous :

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

Le mode Chunk est efficace pour réduire le coût de performance de Tilemap. Au lieu de rendre chaque tuile individuellement, il les rend par lots en une seule fois, sous la forme d'un grand bloc. Toutefois, son utilisation présente deux inconvénients majeurs. La première est qu'il ne permet pas le tri dynamique avec d'autres objets 2D dans la scène. Cela signifie que si votre mosaïque est en mode "Chunk", elle ne pourra pas être triée dynamiquement derrière et devant d'autres objets, tels que des personnages - seul l'un ou l'autre sera possible à la fois, en fonction du paramètre "Order in Layer" (Ordre dans la couche). Cependant, il reste extrêmement efficace lorsque vous souhaitez optimiser votre jeu, et peut être utilisé pour rendre par lots de grandes zones du sol.

Cependant, cela ne résout pas le problème de l'incompatibilité des différentes tuiles entre elles. Afin de rendre par lots des tuiles qui proviennent de deux ou plusieurs sprites différents (c'est-à-dire des textures), les sprites doivent être unifiés sous un seul actif Sprite Atlas.

Pour créer un atlas de sprites, choisissez Assets > Create > Sprite Atlas. Dans les paramètres de l'Atlas des sprites, vous trouverez la liste des objets à emballer. Il suffit de faire glisser dans cette liste toutes les tuiles que vous souhaitez rendre par lots, et de définir les paramètres d'importation corrects - généralement équivalents à ceux de vos sprites individuels.

Une fois que vous avez fait cela, les tuiles seront triées correctement, mais elles ne seront visibles de cette manière qu'en mode lecture ou au moment de l'exécution.

Il est donc préférable de régler le mode de rendu de la mappe de tuiles sur Individuel lors de l'édition. Il triera chaque tuile séparément, ce qui signifie que vous les verrez correctement rendues même en dehors du mode Play, ce qui est extrêmement utile lorsque vous êtes encore en train d'apporter des modifications à votre niveau. Une fois que vous avez mis en place votre structure de niveau, vous pouvez toujours remettre le mode de rendu Tilemap sur Chunk.

Le mode de rendu individuel est également utile lorsque vous souhaitez ajouter des objets - tels que des arbres, des accessoires et des terrains surélevés - que vous souhaitez trier dynamiquement avec les personnages ou les uns avec les autres. Dans cet article, nous nous en tiendrons à l'utilisation du mode individuel pour tous nos plans de carreaux.

Il peut arriver que vous souhaitiez utiliser plus d'un tableau de carreaux sur la même grille. Dans le cas des cartes isométriques et hexagonales, cette option sera utile si vous souhaitez ajouter des objets accessoires au niveau qui s'alignent également sur la grille, ou si vous souhaitez ajouter des tuiles qui semblent être plus hautes que la première couche.

Pour attacher une autre mappe de tuiles à la grille, cliquez avec le bouton droit de la souris sur l'objet de jeu Grille et créez une nouvelle mappe de tuiles du type correspondant.

Pour passer à la peinture sur la nouvelle mosaïque, retournez dans la fenêtre Palette des tuiles et modifiez la mosaïque active juste en dessous de la barre d'outils principale.

Il y a généralement deux façons d'ajouter un terrain surélevé à vos niveaux. Celui que vous utiliserez le plus dépend du type de carte de carreaux que vous choisirez. Nous allons passer en revue chacun des cas possibles.

De plus, nous avons préparé une courte vidéo sur le sujet, qui démontre l'une de ces approches avec un Tilemap isométrique ordinaire ; ainsi que l'ajout de zones de collision aux tuiles. Jetez-y un coup d'œil si vous souhaitez disposer d'une vidéo de référence rapide sur ces deux sujets :

Pour les mosaïques isométriques normales, vous pouvez simplement créer une nouvelle mosaïque sous la même grille et lui donner une valeur d'ordre de calque plus élevée. Vous pouvez ensuite modifier le paramètre Ancrage de la tuile pour que le nouveau calque soit ancré à un point plus élevé de la grille.

Ma carte de tuiles au niveau du sol avait un ancrage de tuiles de (0, 0) pour X et Y respectivement. Je veux que mon nouveau calque soit peint une unité plus haut ; je vais donc changer le point d'ancrage du nouveau Tilemap en (1, 1). En outre, je lui attribuerai un ordre en couche de 1, soit une unité de plus que mon niveau de base.

Je peux maintenant changer mon Tilemap actif pour celui avec le deuxième niveau de hauteur et peindre.

Il peut parfois être utile de simuler différentes hauteurs à l'aide de la même mappe de tuiles. Dans ce cas, vous pouvez utiliser une grille isométrique Z comme Y.

Avec une mosaïque Z comme Y, la valeur Z de chaque tuile a une influence supplémentaire sur l'ordre de rendu des tuiles. Nous pouvons ajuster la valeur Z des tuiles pendant que nous les peignons, en utilisant le paramètre Z Position de notre pinceau dans la partie inférieure de la palette des tuiles (qui peut également être modifiée à l'aide des touches de raccourci '+' et '-') :

Cependant, pour que notre valeur Z contribue correctement et que les tuiles soient triées correctement, nous devons revenir à notre valeur de tri d'axe personnalisé et ajouter une influence Z. Le nombre que nous utilisons ici est directement lié à la façon dont Unity convertit les positions des cellules sur une grille isométrique en valeurs de l'espace mondial.

Par exemple, une grille dont les dimensions XYZ sont (1, 0,5, 1) - la valeur par défaut de l'isométrique - aura une valeur de tri de l'axe Z de -0,26. Si vous êtes curieux de savoir comment ce nombre est calculé, ou si vous utilisez une grille dont la taille des cellules est différente, lisez ce qui suit pour apprendre à trouver la bonne valeur Z pour votre cas.

Une fois que vous avez défini la bonne valeur de tri de l'axe personnalisé, vous pouvez commencer à peindre les carreaux qui ont des valeurs Z différentes. Vous pouvez également ajuster les incréments dans lesquels la valeur Z déplace les tuiles surélevées vers le haut ou vers le bas en modifiant la dimension Z de la grille - fixée à 1 par défaut.

Il existe une formule générale que vous pouvez utiliser pour calculer la valeur Z de votre tri d'axe. Tout d'abord, prenez la dimension Y de votre grille. Si vous n'avez pas encore défini votre dimension Y, consultez la note sur l'importation d'actifs en haut de cet article de blog. Multiplier cette valeur par 0,5 négatif et en soustraire 0,01 supplémentaire.

En suivant cette formule, une grille ayant les dimensions (1, 0,5, 1) nous donnera une valeur de tri Z de -0,26 (point négatif vingt-six). Avec cette valeur de tri des axes, n'importe quelle grille (1, 0,5, 1) verra ses carreaux triés correctement.

Si vous souhaitez en savoir plus sur l'origine de cette valeur et de ce calcul, consultez la documentation ici. Il explique en détail le fonctionnement des moteurs de rendu 2D et la méthode utilisée pour convertir les cellules isométriques en valeurs de l'espace mondial.

Maintenant que certaines tuiles sont placées plus haut que d'autres, nous pouvons contrôler les zones où le joueur peut se rendre et passer de l'une à l'autre en utilisant la collision.

Il existe de nombreuses approches pour ajouter des collisions ; mais dans notre cas, nous voulons que le joueur monte et descende le long du niveau à l'aide d'une rampe, et en tant que tel, il n'est pas évident de savoir quels objets doivent ou ne doivent pas avoir de collisions sur eux. Au lieu de cela, nous pouvons définir la collision à la main en utilisant une carte de tuiles supplémentaire.

Dans ce projet, nous avons créé des sprites correspondant aux différentes formes que nous utiliserons pour définir nos zones de collision. Nous pouvons peindre ces formes sur notre troisième Tilemap, dans les zones sur lesquelles nous ne voulons pas que le joueur passe. Par exemple, nous voulons que le joueur puisse monter sur la falaise uniquement en utilisant la rampe, plutôt qu'en marchant directement sur la falaise.

Nous pouvons également ajouter un matériau personnalisé dans notre composant Tilemap Renderer afin de teinter les tuiles d'une couleur différente du reste de notre niveau.

Une fois que nous avons placé nos tuiles de collision, nous pouvons ajouter un composant Tilemap Collider à la Tilemap de collision. Cela générera automatiquement des collisions pour chaque tuile individuelle en fonction de la forme du sprite.

Pour de meilleures performances, nous pouvons également ajouter un composant Composite Collider 2D, et nous assurer de cocher Used by Composite sur notre Tilemap Collider. Cela permet d'unifier tous nos collisionneurs individuels en une seule forme.

L'ajout d'accessoires au niveau est assez simple. Vous pouvez placer manuellement les sprites d'accessoires à l'endroit de votre choix dans la scène, ou vous pouvez attacher les accessoires à la grille de la carte des tuiles en les transformant en tuiles individuelles. C'est à vous de décider quelle approche convient le mieux à votre cas.

Dans ce projet, nous avons placé manuellement quelques arbres autour du niveau. Les arbres et le personnage ont le même ordre dans la couche, ce qui permet à notre personnage de se placer derrière et devant eux de manière dynamique.

Nous pouvons définir le point où le joueur peut passer l'arbre en utilisant un collisionneur. Il y a plusieurs façons d'y parvenir.

La première, comme le montrent les vidéos, consiste à attacher un collider enfant à l'objet et à modifier sa forme en fonction des besoins.

L'autre méthode consiste à définir une forme physique personnalisée pour l'objet dans l'éditeur de sprites.

Pour ouvrir l'éditeur de sprites, sélectionnez le sprite de l'objet et trouvez le bouton Éditeur de sprites dans l'inspecteur. Dans le menu déroulant en haut à gauche, passez à l'éditeur de formes physiques personnalisées. Ici, vous pouvez créer une forme polygonale pour définir les limites de votre collisionneur personnalisé.

Une fois que vous avez défini une forme physique, vous pouvez attacher un composant Collisionneur de polygone à votre objet, qui correspondra à cette forme.

Si vous utilisez vos accessoires comme des tuiles sur une Tilemap, vous pouvez également utiliser un collider Grid. Sélectionnez la ressource correspondant à une tuile d'accessoire (si vous avez besoin d'un rafraîchissement pour savoir où la trouver, jetez un coup d'œil à la section Flux de travail de base de la mosaïque). Vous verrez une liste déroulante pour le type de collision. Par défaut, il est défini sur sprite - ce qui signifie que le collisionneur auto-généré utilisera la forme physique dont nous avons parlé précédemment. Cependant, si vous le définissez comme une grille, il correspondra toujours exactement à la forme de la cellule de la grille à laquelle l'accessoire est attaché. Ce n'est peut-être pas la façon la plus précise d'implémenter les collisionneurs, mais elle peut être utile pour un type de jeu spécifique.

Pour utiliser les collisionneurs de grille pour ces tuiles, sélectionnez la Tilemap avec vos accessoires et ajoutez un composant Tilemap Collider.

Les carreaux de règles sont extrêmement utiles lorsqu'il s'agit d'automatiser le flux de travail de la peinture sur carreaux. Une tuile de règle se comporte comme une tuile normale, avec une liste supplémentaire de paramètres de tuilage. Grâce à ces paramètres - ou règles - la tuile peut choisir automatiquement le sprite à peindre en fonction des tuiles voisines.

Les tuiles de règles sont utiles lorsque vous souhaitez éviter de sélectionner à la main des tuiles ayant des rotations différentes, par exemple lors de la création d'une falaise ou d'une plate-forme. Ils peuvent également être utilisés pour randomiser les différentes variations d'une même tuile afin d'éviter les motifs évidents, et même pour créer des tuiles animées.

Les tuiles isométriques et hexagonales sont disponibles dans le dépôt 2D Extras de Unity sur GitHub. Ils contiennent également de nombreuses autres ressources pratiques pour la fonction Tilemap que vous pouvez explorer.

Nous avons également inclus des tuiles de règles préconfigurées pour chacun des différents jeux de tuiles de notre projet Isometric Starter Kit. Voici quelques exemples de carreaux inclus dans le projet pour vous permettre d'expérimenter :

Maintenant que vous avez appris les tenants et les aboutissants des Tilemaps isométriques dans Unity, téléchargez le projet Isometric Starter kit ici et essayez-le vous-même ! Il est également possible d'interagir avec les Tilemaps par le biais de scripts si vous êtes un programmeur, c'est donc quelque chose que vous pouvez essayer également.

Par exemple, vous pouvez découvrir comment implémenter un simple contrôleur de personnage qui fonctionne avec Isometric Tilemap en regardant cette vidéo :

L'œuvre d'art de ce projet a été créée pour Unity par @castpixel et vous pouvez voir plus de son travail ici. Si vous êtes à la recherche de ressources 2D supplémentaires pour expérimenter l'utilisation de Tilemaps, vous pouvez également consulter l'Unity Asset Store.

---

Apprenez les meilleures pratiques en utilisant Tilemap avec des contenus pour débutants et avancés sur la plateforme Unity Learn Premium.