C'est l'heure de pratiquer !

Dans cette première série d'exercices, nous allons simuler un combat au tour par tour en 2D, dans un style très classique.

Préparation de la scène

Pour créer notre scène, nous aurons besoin de :

• Un arrière-plan
• Deux personnages
• Une musique de combat

Vous pouvez bien sûr choisir les ressources qui vous conviennent. Si vous préférez utiliser les mêmes ressources que moi, vous les trouverez dans la section "Fichiers téléchargeables" de cette page.

Créer le décor

Pour créer l'arrière-plan, nous allons utiliser une petite astuce. Comme nous n'avons pas encore abordé la gestion d'une interface ou d'une skybox, nous allons simplement appliquer un matériau sur un Plane. Ce Plane sera ensuite placé verticalement devant la caméra, comme l'image ci-dessous.

J'ai ensuite agrandi le Plane pour qu'il couvre toute la vue de la caméra. 

Fun fact : Le jeu Animal Crossing utilise cette technique pour certains de ses décors 2D dans son environnement 3D.

Notez que j'ai déplacé ma fenêtre "Game" pour pouvoir observer en temps réel ce que voit la caméra. N'ayez pas peur de reconfigurer votre espace de travail. Si vous avez deux écrans, n'hésitez pas à en profiter ! 

Créer les personnages

Pour les personnages, nous allons appliquer la même technique : un Plane avec un matériau. Cependant, nos personnages contiennent des zones transparentes, donc il va falloir modifier quelques réglages pour que cela fonctionne correctement dans Unity.

 1- Sélectionnez l'image de votre personnage et activez l'option Alpha is Transparent, puis cliquez sur Apply. 

Cela permettra à Unity de ne pas remplacer les zones transparentes par un fond noir.

 2- Ensuite, créez un matériau et utilisez l'image comme Base Color. Vous remarquerez probablement un problème : les zones transparentes apparaissent tout de même en noir et ont un aspect un peu étrange. C'est normal. Il faut indiquer à Unity que le matériau contient de la transparence.

Pour cela, activez l'option Alpha Clipping. Vous verrez alors l'option Threshold, qui détermine à partir de quel niveau d'alpha les pixels doivent devenir invisibles. Jouez avec la valeur pour obtenir un résultat qui vous plaît.

Remarque : l'option Alpha Clipping rend les pixels transparents complètement invisibles, ce qui signifie que vous perdez l'effet de semi-transparence (si votre image en possédait).

J'ai également réduit les valeurs de Metallic et Smoothness pour éliminer l'effet brillant causé par la lumière.

Le deuxième personnage

Pour le deuxième personnage, c'est très simple, refaite la même chose: Commencer donc par créer un nouveau plane. Et ensuite, afin de gagner un peu de temps, vous pouvez dupliquez  le matériau du premier personnage avec CTRL+D, puis changez uniquement l'image utilisée pour la Base Map de ce nouveau matériau.

Supprimer les ombres

Si vous n'aimez pas l'ombre projetée par vos personnages, vous pouvez la désactiver. Sélectionnez l'objet, puis dans le menu Mesh Renderer > Lighting, réglez l'option Cast Shadows sur Off. Cela a pour effet de supprimer les ombres que pourrait projeter un objet. 

Astuce : le "Blob Shadow"

Une alternative à l'ombre générée par la lumière consiste à créer un objet qui servira d'ombre. Vous avez sûrement vu dans de nombreux jeux vidéos des personnages avec une simple ombre noire circulaire sous eux. Cela s'appelle un "Blob Shadow". Pour créer un tel effet dans un environnement 2D, rien de plus simple !

 1- Créez un Plane et appliquez-lui un matériau avec une image représentant un dégradé circulaire. 

Unity fournit des images pour les formes géométriques de base, comme l'image Default-Particle .

2- Dans les réglages du matériau, sélectionnez un type de surface Transparent, ce qui permettra à l'image de rester partiellement transparente. Contrairement à l'option Alpha Clipping, qui rend tout pixel en dessous du seuil complètement invisible.  Dans le cas d'une surface transparente, vous pourrez l'ajuster à partir du paramètre alpha disponible dans la selection de couleurs de Base Color. 

3- Ajustez la couleur de la Base Map et son alpha. Choisissez une couleur foncée, comme le noir, pour assombrir notre image et réduisez légèrement l'alpha pour obtenir un effet translucide. 

Ensuite, vous pouvez déplacer votre objet "ombre" entre le décor et les personnages pour donner l'illusion qu'il s'agit bien de l'ombre du personnage. Ajustez la taille de l'ombre avec l'outil Scale.

Répétez cette opération pour le deuxième personnage.

Dernière retouche facultative : 

Si vous avez quelques compétences en retouche photo, vous pourriez découper certaines parties du décor pour les placer devant les personnages, comme les petits buissons et les rochers. Cela permettrait de dissimuler les ombres qui se trouvent devant certains éléments du décor, ce qui révèle la technique utilisée avec nos plans. Évidemment, cela reste entièrement facultatif ; je ne le ferai pas moi-même afin de simplifier cet exercice.

C'est terminé !

La composition générale de notre scène est maintenant prête. Vous devriez obtenir quelque chose ressemblant à cela :

L'objectif principal de cet exercice est d'avoir au moins deux personnages dans la scène : l'un jouera le rôle du joueur, l'autre celui de l'ennemi. Le reste des étapes visait surtout à embellir la scène et à vous apprendre quelques astuces. 

Si vous avez eu des difficultés à suivre cette première partie, je vous recommande de relire le chapitre 1 de la formation, qui couvre les manipulations de base. Vous pouvez également demander de l'aide sur le Discord ; nous serons heureux de vous assister.

Sur ce, je vous invite à poursuivre cet exercice à la prochaine page, où nous ajouterons de la musique à notre scène.