Flux de travail pour les cartes 2D : De l'image au niveau

Dans Unity 2017.2, nous avons introduit un nouvel ajout au jeu de fonctionnalités 2D : Cartes en mosaïque ! En utilisant les Tilemaps, vous pouvez rapidement mettre en page et créer des niveaux 2D en utilisant une combinaison de Sprites et de GameObjects, et contrôler des propriétés telles que l'ordre des couches, les colliders des tilemaps, les tuiles animées et bien plus encore ! Dans ce billet, j'expliquerai le flux de travail complet en commençant par l'importation de votre fichier image dans Unity jusqu'à l'élaboration d'un niveau pour un jeu de plateforme en 2D !

Pour résumer, le flux de travail peut être résumé comme suit, chaque élément étant lié à un actif ou à un composant dans l'éditeur Unity :

Sprite -> Carreau -> Palette -> Pinceau -> Carte de carreau

Du point de vue d'une Unity, ces termes peuvent sembler un peu abstraits. Imaginez le processus d'une peinture réelle sur une toile réelle :

Couleur -> Peinture -> Palette de tuiles -> Pinceau -> Toile

Chaque étape du processus obéit à une logique similaire et porte même un nom similaire !

Pour ce billet, j'utiliserai l'image "GrassPlatform_TileSet" comme exemple principal :

Le résultat final est un niveau construit à partir de ces pièces qu'un personnage 2D peut parcourir en tant que "niveau" :

L'importation d'une image dans Unity peut se faire de différentes manières :
- Enregistrer le fichier image souhaité dans le dossier "Assets" du projet.
- Dans le menu supérieur, sélectionnez "Assets -> Import New Asset", puis sélectionnez le fichier souhaité.
- Faites glisser le fichier image depuis votre navigateur de fichiers vers la "fenêtre de projet" de l'éditeur Unity (c'est probablement la méthode la plus simple !).

Une fois l'image importée dans votre projet, les paramètres d'importation par défaut du type de texture sont définis par le mode de comportement actuellement utilisé dans votre projet : 2D ou 3D.

Ce mode est défini à l'origine lors de la création d'un nouveau projet :

Ou peut être modifié dans les paramètres de l'éditeur :

Comme mon projet est déjà configuré pour le mode de comportement 2D, 'GrassPlatform_TileSet' sera automatiquement importé avec le type de texture 'Sprite (2D et UI)', qui est le paramètre dont la ressource 'Tile' aura besoin pour référencer le Sprite.

Comme le "GrassPlatform_TileSet" est une série de sprites dans une seule image, nous devons le découper en sprites individuels ; cela peut être fait en réglant le mode de sprite de "Simple" à "Multiple" et en ouvrant l'éditeur de sprites :

La fenêtre de l'éditeur de sprites vous permet de "découper" une image en plusieurs sprites ; vous pouvez ainsi travailler sur une feuille de sprites dans le logiciel d'édition d'images de votre choix et définir les zones de l'image qui seront traitées comme des sprites "individuels" directement dans Unity. Plus besoin de jongler et de gérer des centaines de fichiers images individuels !

Comme "GrassPlatform_TileSet" est une image composée d'une série de tuiles, nous pouvons utiliser les paramètres de découpage de la grille de l'éditeur de sprites pour diviser automatiquement l'image en plusieurs sprites. Les dimensions de chaque "tuile cellulaire" dans ce jeu de tuiles sont de 64 pixels par 64 pixels, nous pouvons donc entrer ces paramètres et laisser l'éditeur de sprites générer automatiquement les tranches de sprites nécessaires :

Après avoir cliqué sur le bouton "Slice", nous disposons maintenant d'un ensemble de sprites découpés en tranches !

Dans la fenêtre de l'éditeur de sprites, chaque sprite découpé peut être sélectionné et modifié. Par exemple, vous pouvez donner un nom à chaque sprite et même modifier manuellement des valeurs telles que la position et les pivots.

Nous devons ensuite "appliquer" les modifications à la ressource sprite (en cliquant sur le bien nommé bouton "Appliquer" situé dans le coin supérieur droit de l'éditeur de sprites), ce qui nous permettra de référencer chaque sprite découpé individuellement dans la fenêtre du projet :

Maintenant que notre feuille de sprites a été découpée en sprites individuels, nous devons les "convertir" en tuiles.

La tuile est un tout nouvel actif ajouté dans Unity 2017.2. Son but est de contenir les données que la carte des tuiles doit utiliser dans une cellule spécifique de la grille.

L'asset de base par défaut (qui peut être généré à partir de "Create -> Tile" dans la fenêtre de projet) permet d'assigner un Sprite et d'autres personnalisations telles que la teinte du Sprite et le type de collisionneur qu'il utilisera sur la Tilemap (ce qui sera expliqué plus tard).

Unity 2017.2 introduit une nouvelle fenêtre : la palette de tuiles ! Cette fenêtre fait partie intégrante de l'utilisation du nouveau système de mappemonde, car elle sert d'interface pour sélectionner les tuiles à utiliser et la manière dont la mappemonde doit être éditée avec ces tuiles.

Avant d'ajouter la tuile "TopGrassTile" à la fenêtre de la palette de tuiles, nous devons d'abord créer une nouvelle palette. Les palettes peuvent être utilisées pour organiser vos ensembles de tuiles au lieu de les "stocker" tous (il peut y en avoir des centaines ou plus !) sur un espace de travail dans la fenêtre.

Dans le menu déroulant Palette, il est possible de créer une toute nouvelle palette :

Il suffit d'un simple glisser-déposer pour ajouter "TopGrassTile" à cette palette nouvellement créée !

Cependant, dans certaines situations, nous pouvons être amenés à travailler avec des centaines et des centaines de 2D Sprites qui constituent notre scène en 2D. Il serait très fastidieux de créer manuellement une tuile pour chacun de ces sprites, puis de glisser-déposer chacun d'entre eux individuellement sur la palette.

Heureusement, il existe un flux de travail qui permet de générer automatiquement un ensemble de tuiles (une pour chaque sprite) et de les affecter toutes à la palette souhaitée. Et c'est aussi simple et facile que de glisser-déposer ! Au lieu de faire glisser une tuile sur la palette, faites glisser la feuille de Sprites source qui contient les Sprites découpés. Dans ce cas, il s'agit de "GrassPlatform_TileSet" :

Maintenant que notre feuille de sprites "GrassPlatform_TileSet" est configurée avec succès dans la fenêtre Tile Palette, il est temps de commencer à construire un niveau 2D !

Pour commencer, nous devons créer un nouveau "Tilemap" dans notre scène actuelle ; cela peut être fait à partir du menu déroulant "GameObject -> 2D Objects -> Tilemap". Cependant, cela ne crée pas seulement un GameObject "Tilemap" (avec les composants associés) mais aussi un GameObject "Grid" dont le GameObject "Tilemap" est automatiquement un enfant.

La structure de GameObjects la plus similaire à la configuration "Grid <-> Tilemap" est le système UI d'Unity ; où le GameObject parent Canvas agit comme un conteneur de mise en page pour tous ses GameObjects UI enfants (tels que le texte et les images). Le GameObjects "Grid" utilise le composant "Grid" pour définir les dimensions de tous ses GameObjects "Tilemap" enfants. Des options permettent de personnaliser la mise en page :

Le GameObjects Tilemap enfant est ensuite construit par le composant Tilemap et le composant Tilemap Renderer ; le premier contient les données des tuiles peintes et le second définit les paramètres visuels du rendu.

Le système Tilemap a été conçu de manière à ce que plusieurs GameObjects Tilemap puissent être des enfants de la même grille, ce qui signifie que le résultat final de votre niveau peut être facilement composé par de multiples couches de différentes tuiles :

Chaque Tilemap Renderer vous permet de contrôler le matériau utilisé pour le rendu de ses tuiles, le calque de tri qu'il utilise (qui est le même système de calque que celui utilisé par les Sprite Renderers, les UI Canvases et les Particle Systems !

Avant de pouvoir peindre des tuiles sur la carte des tuiles, deux choses doivent être sélectionnées : la carte des tuiles qui est actuellement focalisée et le pinceau qui est actuellement utilisé.

La première peut être choisie dans la liste déroulante "Carte de tuiles active" de la fenêtre Palette de tuiles située sous les Options d'édition :

Cette liste déroulante affiche toutes les instances du composant "Tilemap" dans la scène et vous permet d'en sélectionner une pour la peindre et la modifier. La capture d'écran ci-dessus ne montre qu'une seule option "Tilemap", nommée d'après la GameObjects Tilemap par défaut, alors qu'une scène plus complexe avec plusieurs Tilemaps pourrait afficher une liste de Tilemaps actifs possibles comme celle-ci :

Pour l'exemple "GrassPlatform_TileSet", le fait de renommer le GameObject "Tilemap" pour qu'il soit plus précis mettra également à jour le(s) nom(s) de la liste "Active Tilemap" :

La prochaine chose à sélectionner est le pinceau actuel. Alors que la ressource "tuile" détermine les données contenues dans une cellule (visuels, type de collision, etc.), la ressource "brosse" définit la manière dont une ou plusieurs tuiles sont placées sur une carte de tuiles. Actuellement, Unity n'a qu'un seul pinceau (appelé "pinceau par défaut") intégré à sélectionner ; et il a les fonctionnalités attendues de son nom telles que le placement, l'effacement, le déplacement et le remplissage de tuiles sur la carte des tuiles. Cependant, sur le GitHub de l'équipe Unity Technologies, il y a un dépôt d'extras 2D qui contient une variété d'exemples sur la façon dont vous pouvez écrire vos propres brosses et tuiles personnalisées ! Une fois qu'ils sont importés dans votre projet, le menu Pinceau actuel (en bas de la fenêtre Palette des tuiles) vous permet de choisir le pinceau à utiliser :

Bien que cet article ne traite pas de l'utilisation des brosses et des tuiles scriptables, il s'agit d'un domaine très puissant à étudier et à intégrer dans votre ensemble d'outils de conception de niveaux basés sur les cartes de tuiles.

Avec la carte des tuiles active et la brosse actuelle, nous pouvons alors sélectionner une tuile spécifique dans la fenêtre Palette des tuiles et la peindre sur la carte des tuiles de la scène ! Vous devez également vous assurer que l'icône "Pinceau" des outils d'édition est également sélectionnée :

Succès ! Des carreaux sont peints sur la carte des carreaux ! Cependant, vous pouvez remarquer que les tuiles sont légèrement plus petites que la taille des cellules de la grille. Il ne s'agit pas d'un bogue, mais nous devons prendre un peu de recul pour expliquer pourquoi - et comment vous pouvez modifier la valeur par défaut.

La taille des cellules du composant Grid utilise les unités de distance de l'espace mondial d'Unity (par exemple, un cube Unity primitif avec une échelle par défaut de 1 pour chaque axe aura la même taille qu'une cellule sur la grille par défaut). Chaque ressource Sprite possède une valeur de pixels par unité dans ses paramètres d'importation, la valeur par défaut étant 100 :