Créer des niveaux qui décoiffent avec le Sprite Shape - Esprit Unity

Comment créer des niveaux 2D qui décoiffent dans Unity avec le Sprite Shape

Vous le savez sans doute, Unity permet de créer des jeux 3D, mais aussi en 2D. Le moteur dispose de tout un set d’outils spécialisés pour la 2D afin de vous faciliter la vie comme les tilemaps par exemple. Mais cette approche est assez limitée du fait que tout se passe sur une grille. Le SpriteShape a une approche totalement différente basée sur des courbes de Bézier. Non seulement l’effet grille disparait complètement, mais en plus, il ne faut pas tant de sprites que ça.

Disclaimer

La fonctionnalité du SpriteShape est, au moment de publier cet article, encore en preview. Cela signifie qu’elle n’est pas totalement terminée mais suffisamment stable pour l’essayer. Il est possible qu’il y ait des bugs et Unity Technologies déconseille de l’utiliser dans un projet de production pour l’instant. Mais rien ne vous empêche de commencer à creuser le sujet pas vrai ?

Fondamentaux du Sprite Shape

Pas envie de lire ? La version vidéo de cet article est disponible sur Youtube :

Comme expliqué plus haut, le SpriteShape se base sur des courbes. Il va placer vos sprites sur cette courbe, en appliquant une distorsion automatiquement. Avec ce système on peut très vite obtenir un résultat saisissant de détail très rapidement. L’autre avantage est qu’il ne faut pas beaucoup de sprites pour obtenir des visuels intéressants.

Utiliser cet outil demande un peu de paramétrage mais rien de bien méchant. De ce côté là, c’est assez intuitif. Par contre, cela implique de modifier légèrement la façon dont vous produisez vos assets graphiques afin d’en tirer le meilleur. Je vous explique tout ça plus bas.

Installer le Sprite Shape

Avant toute chose, il vous faudra une version 2018.1 ou supérieure du moteur pour pouvoir utiliser le Sprite Shape.

Pour installer le Sprite Shape, vous devrez passer par le gestionnaire de packages via le menu Window > Package Manager :

Utilisation du Package Manager pour installer le Sprite Shape

Note : Si vous utilisez la version 2018.3 ou plus et que le Sprite Shape est encore en preview à ce moment là, il faudra activer l’affichage des packages en preview dans le gestionnaire de packages :

Paramétrage du Package Manager

Les principes du Sprite Shape

Pour profiter de cet outil, vous allez devoir utiliser 3 nouveaux composants :

  • SpriteShapeRenderer
  • SpriteShapeController
  • SpriteShapeProfile

Le SpriteShapeRenderer va se charger de dessiner le rendu de vos sprites assemblés via le Sprite Shape. C’est comme un SpriteRenderer, mais pour le Sprite Shape !

Ensuite, vous allez avoir besoin d’un SpriteShapeController. Lui, il va vous permettre de manipuler la courbe de Bézier à partir de laquelle vos sprites seront assemblés.

Enfin, le moteur n’est pas magique. Il vous faudra définir quoi dessiner sur la courbe selon l’angle de celle ci. Vous pourrez donc utiliser différents sprites selon si la courbe est plutôt horizontale ou plutôt verticale. Ces informations, vous allez les stocker dans un SpriteShapeProfile.

Les 3 étapes de l’utilisation du Sprite Shape

1. Créer le profil du Sprite Shape

Pour commencer, la toute première chose que vous devez créer, c’est un nouvel Asset de type SpriteShapeProfile. Depuis le menu de création d’Assets, vous avez plusieurs choix :

Création d'un nouveau Sprite Shape sur la scène

Ce sont en gros des préréglages du profil :

  • Empty va vous créer un profil vide, sans rien
  • Strip va vous créer un profil avec 1 seul sprite
  • Shape va vous créer un profil avec 8 sprites répartis par angles de 45°

L’inspecteur se présente de cette manière :

Inspecteur du Sprite Shape Profile

Le grand cercle indique, pour chaque plage d’angles, quel sprite utiliser sur la courbe. Avec le choix « Strip », vous n’aurez qu’un seul sprite d’utilisé donc quel que soit l’angle de la courbe, le sprite utiliser sera le même.

Mais dans le cas d’un profil créé avec le préréglage « Shape » par exemple, vous aurez un découpage différent :

Explication du fonctionnement de la roue du Sprite Shape Profile

En cliquant sur le cercle, vous pouvez sélectionner la plage associée et définir le sprite à utiliser dans ce cas là. Le paramétrage des sprites se fait via la liste juste en dessous du cercle. Dès que vous avez paramétré des sprites, un aperçu du rendu apparaitra dans le cercle. En déplaçant le curseur bleu sur le bord du cercle, vous verrez quel sprite est affiché selon l’angle choisi.

C’est tout pour le profil. Vous pourrez le modifier à tout moment et le réutiliser un peu partout dans votre jeu. Il va de soi que vous pouvez créer plusieurs profils pour gérer les différents cas de figure.

2. Créer un Sprite Shape sur la scène

Maintenant que vous avez un profil, vous pouvez ajouter un Sprite Shape sur la scène. Ajoutez-en un via le menu GameObject > 2D Object > Sprite Shape. Une forme par défaut apparait sur la scène.

Exemple de Sprite Shape sur la scène

C’est pas plus compliqué que ça. Vous avez votre forme sur la scène. Maintenant, l’idée c’est de modifier la courbe de Bézier pour qu’elle adopte la forme qu’on veut.

3. Modifier la courbe de Bézier du Sprite Shape

Sélectionnez le Sprite Shape sur la scène et jetez un oeil à l’inspecteur. Vous avez un bouton « Edit Spline » tout en haut de l’éditeur:

Bouton d'édition de la courbe de Bézier d'un Sprite Shape

En cliquant dessus, vous devriez vous apparaitre des lignes ainsi que des bulles blanches sur votre Sprite Shape, comme ceci :

Affichage des Gizmos d'édition dela courbe de Bézier d'un Sprite Shape

Si ce n’est pas le cas et que vous ne voyez ni les lignes ni les bulles blanches, pas de panique. La fonctionnalité est encore en preview et parfois, l’affichage merde un peu…

Pour régler ce problème, il suffit de réinitialiser le layout de fenêtres (ne me demandez pas pourquoi…) via le menu tout en haut à droite :

Réinitialisation du layout de fenêtres pour régler un bug d'affichage du Sprite Shape

Une fois en mode édition, vous pouvez déplacer les points de la courbe, en rajouter, en supprimer, etc.

Jouer avec les courbes de Bézier pour modeler son Sprite Shape

Vous allez me dire que vous n’obtenez pas vraiment une courbe vu que les segments sont droits entre les points… mais c’est normal, on y arrive.

Par défaut, tous les points de la courbe sont paramétrés pour ne pas utiliser de tangentes mais vous pouvez changer ça.

Note : si vous ne voyez pas de quoi je parle ou ce que c’est qu’une courbe de Bézier, jetez un oeil à la page Wikipédia. Regardez surtout les animations, vous n’aurez pas besoin de toutes les formules que ça implique (Unity le gère pour vous !)

En sélectionnant un point de la courbe, vous pouvez changer son mode. Ils sont au nombre de 3 :

  • Straight Line : par défaut, cassure nette entre les segments
  • Tangent mirror : permet d’avoir une tangente qui pilote les deux segments de chaque côté du point
  • Tangent : permet d’avoir deux tangentes différentes pour les deux segments de chaque côté du point.

Regardez la vidéo pour avoir le détail visuel de ce que ça représente.

Le Sprite Shape : futur des jeux 2D ?

Cette fonctionnalité n’est pas « nouvelle » en soi. Le principe existe depuis des années. Certains plugins permettaient de déjà faire des choses similaires jusqu’à présent (comme Ferr2D).

Voir ce genre de fonctionnalités s’intégrer au moteur est vraiment génial. L’approche est entièrement différente et demande de s’adapter un peu, surtout concernant la façon de créer ses Assets, mais le gain est assez conséquent. En effet, il faut penser au tuilage de ses images pour qu’elles puissent être mises bout à bout correctement et sans artefact visuel.

Ces courbes peuvent servir pour du décors, mais vous pouvez aussi générer des colliders directement à partir de ces courbes et gérer entièrement votre level design avec cet outil.

En poussant un peu le paramétrage avec plusieurs profils différents, un équilibrage des sprites selon les angles, vous pourrez avoir des rendus assez fous.

A vous de jouer maintenant !

 

>