Un code qui explose !
Bonjour à toutes et à tous, et bienvenue dans cette nouvelle série d’articles qui traitera – en long, large et autres travers – de la programmation, et puisque nous sommes sur Cleek, nous parlerons bien entendu ici de l’art geek dans toute sa splendeur : le jeu vidéo et les étapes nécessaires pour créer le vôtre de A à Z !
Non, non, ne fuyez pas tout de suite, rassurez-vous, le développement de logiciels n’est en aucun cas, contrairement à certaines idées reçues, une affaire d’intellos reclus et monomaniaques ! En effet, quelques cuillères à soupe de logique, une ou deux onces de patience ainsi que quelques grammes de curiosité sont les seuls ingrédients requis pour développer la base d’un jeu vidéo.
Attaquons nous aujourd’hui à un morceau de choix : les explosions. Et oui, quoi de plus frustrant que de balayer des ennemis par vagues entières pour que ces derniers ne disparaissent de l’écran que timidement, sans perte ni fracas ? Qui parmi vous désactive le gore dans les options de ses jeux – violents bien entendu – favoris ?
[divider]Une image qui divise[/divider]
Commencez par vous saisir du nouveau sprite que voici, qui représente une animation d’explosion légèrement pixellisée :
Glissez l’image dans votre dossier sprite, et sélectionnez-là afin d’afficher ses informations dans l’Inspector. La nouveauté ici réside dans le fait que nous n’allons plus utiliser un sprite de manière statique mais comme une suite de plusieurs images. Dans l’Inspector, optez pour l’option « Multiple » du « Sprite Mode » et cliquez ensuite sur le bouton « Sprite Editor ».
Une fois l’éditeur de sprite ouvert, nous allons découper l’image automatiquement : paramétrez l’outil « Slice » en haut à gauche comme sur l’image suivante, et validez en cliquant sur le bouton du même nom.
Cette opération va détecter chacune des parties isolées de l’image et leur appliquer un cadre de rognage pour générer autant de « sous-sprites » qu’il y aura de cadres. Si tous les cadres ne vous semblent pas idéalement positionnés, vous pouvez les déplacer et / ou modifier en cliquant simplement dessus.
Terminez la manipulation en cliquant sur « Apply » tout en haut de la fenêtre.
[divider]Si ça bouge, c’est mieux[/divider]
Dans votre dossier Sprites, vous pouvez cliquer sur la petite flèche à droite de l’aperçu de votre image d’explosion : le détail de toutes les étapes de votre future animation est bien là ! Sélectionnez l’ensemble des « sous-sprites » (cela n’a rien de discriminant, je vous l’assure) et glissez les tous ensemble sur la Hierarchy ou sur la Scene. Cela va ouvrir une fenêtre vous proposant d’enregistrer une nouvelle animation. Déplacez vous dans le dossier « Animations » de votre projet et nommez cette animation « explosionAnim » comme sur l’image ci-dessous :
Dans votre dossier Animations, vous avez désormais deux nouveaux objets : « explosionAnim » et « Explosion_0 ». Double-cliquez sur le second pour ouvrir la fenêtre « Animator ».
Cet Animator nous permettra de gérer les différents états d’une animation, ainsi que les transitions entre chacune d’elles. Dans le cas présent, nous avons une simplement animation d’explosion qui tourne en boucle par défaut, nous voulons juste lui ajouter une fin.
D’un clic droit en plein milieu de l’Animator, créez un nouvel état (Create State -> Empty) et renommez ce dernier en « explosionEnd ».
Ensuite, faites un clic droit sur l’état « explosionAnim » pour créer une transition (Make transition) et tirez la flèche qui s’est attachée à votre pointeur de souris jusqu’à l’état « explosionEnd » pour l’y déposer.
Cette transition permettra à l’animation de tourner une fois, puis de se positionner sur l’état « explosionEnd » en attendant que nous supprimions l’objet de l’écran.
Nota Bene : l’animator de Unity peut paraître assez complexe au premier abord, mais le maîtriser s’avère rapidement nécessaire si vous souhaitez donner vie à vos jeux via des animations de qualité. Si le sujet vous intéresse, le tutoriel officiel de Unity sur ce sujet est trouvable sur Youtube en cliquant ici (en anglais, mais assez accessible pour peu que vous disposiez des bases de la langue).
[divider]Du code et des larmes[/divider]
Nous avons donc une animation qui tourne une fois puis se fige juste après. Le problème est que nous voulons que l’image de l’explosion disparaissent une fois l’animation finie. La solution : un petit script ! Créez donc un nouveau script dans le dossier correspondant, nommez le « EndOfExplosion », ouvrez-le dans Monodevelop puis copiez le code suivant à l’intérieur.
La chose à comprendre dans ce morceau de code est que nous allons surveiller si l’état de notre animation est différent de « explosionAnim », et si c’est le cas, détruire notre animation.
Associez donc ce nouveau script à notre objet « Explosion_0 » dans notre Hierarchy. Renommez maintenant cet objet « Explosion_0 » en « ExplosionPrefab » et glissez le dans le dossier adapté. Nous avons sauvegardé notre prefab d’explosion, supprimez-le donc de notre Hierarchy, nous n’en avons plus besoin.
Maintenant que notre animation est fonctionnelle, nous allons adapter notre code afin qu’il affiche une explosion à chaque fois que notre gameplay le justifie :
- lorsqu’un ennemi meurt, il explose (Ô joie!)
- lorsque Nyan-Cat meurt, il explose (…)
Le script qui gère la mort des personnages (le Nyan-Cat comme les vaisseaux ennemis) est celui qui gère en fait la santé, ouvrez donc « GestionSante » et modifions le en nous basant sur le modèle suivant :
Pour faire simple, si le GameObject auquel est attaché le script de santé meurt, nous créons un objet basé sur le prefab d’explosion à l’endroit où se trouve le GameObject mourrant.
La dernière chose à faire est d’associer le prefab « ExplosionPrefab » au script GestionSante de notre Nyan-Cat et du prefab « EnnemiPrefab ».
Sauvegardez, testez, le tour est joué !
Pour le prochain numéro de votre tutoriel Unity favori, nous continuerons dans le contenu visuel et créerons ensemble un spawner d’éléments d’arrière-plan : astéroïdes, comètes, effet de vitesse… Seule l’imagination limitera nos possibilités !
