Créer une porte automatique avec Mecanim

Dans un jeu, avoir une porte qui s’ouvre toute seule quand on s’en approche, c’est quand même classe… Voyons voir comment faire ça dans Unity.

Pour se faire, nous allons mettre les mains dans cette fonctionnalité obscure et un peu effrayante : Mecanim. Pas besoin d’être un modeleur 3D hors pair ou d’avoir bossé 10 ans chez Pixar pour faire des trucs cools. N’ayez pas peur.

Faisons d’abord un petit point sur ce dont nous allons avoir besoin. Tout d’abord un modèle 3D de porte. Il est important d’avoir les parties à animer séparées et ne pas avoir une modèle d’un seul bloc. Sinon, nous ne pourrons rien animer (pas de cette manière en tout cas). Par exemple : le cadre de la porte, et la porte elle même. Notez que Mecanim peut animer tout ce que vous voulez : vous pouvez faire le test avec des cubes si ça vous chante !

Vous n’avez pas de modèle sous la main ? Bon, en voilà un pour tester :

Télécharger la porte d’exemple

Disclaimer

Cet article a été originalement écrit le 19/01/2014 sur mon précédent blog. Certaines informations présentées ici peuvent donc ne plus fonctionner telles quelles.

Le setup

Commençons maintenant. Un petit setup de scène s’impose. Créez une nouvelle scène et ajoutez une lumière directionnelle, un controleur type FPS, un cube aplati en guise de sol et votre porte. Vous devriez avoir un truc qui ressemble à ça :

La scène est prête, vous n’aurez besoin de rien de plus.

Créer l’animation

Notre porte, il faut la faire bouger. On va donc créer une Animation. Dans la fenêtre Project, créez une nouvelle Animation. L’icône de ce type particulier est une petit triangle blanc tourné vers la droite, quelque chose comme ça :

Glissez l’animation depuis la fenêtre Project sur votre porte. Cela doit créer un nouvel objet, un Animator, et l’affecter à la porte.

Passons maintenant à la création. Car pour le moment, nous avons simplement créé le conteneur de l’animation. Ouvrez la fenêtre animation :

Window > Animation

Cette fenêtre se présente sous la forme d’une timeline. Vérifiez que votre animation est bien sélectionnée en dessous du point rouge :

Vous voilà prêts à animer ! Cliquez sur le bouton rouge pour rentrer en mode « enregistrement ». A partir de maintenant, tous les déplacements de l’objet sur la scène seront enregistrés comme « image clé » (Keyframe). Notez que l’enregistrement des modifications se fait à la position du curseur dans la timeline. Voilà pour la théorie, passons maintenant à la pratique.

Dans votre scène, sélectionner le premier élément à animer. Je vais prendre la porte gauche. Attention, sélectionnez bien la partie à animer dans la hiérarchie et non pas l’objet conteneur :

Ensuite, dans la timeline, cliquez quelque part dans la partie haute qui ressemble à une règle. Cela doit faire apparaitre une ligne verticale rouge. Cette ligne représente la frame de l’animation à laquelle vous êtes :

C’est à partir de là que la magie opère. Dans la fenêtre scène, vous allez déplacer la porte sur un axe… Il doit se passer plein de choses !

Dans la timeline, une ligne est apparue : DoorLeft : Position, suivie par deux losanges. Un losange représente une image clé. Cela veut dire qu’à cet instant de l’animation, il y a la transformation définie par ce qui est en début de ligne. Dans notre cas, c’est une transformation de position, appliquée sur l’objet DoorLeft. Voilà pourquoi il est très important d’avoir des objets distincts pour procéder à l’animation de cette manière.

Sceptique ? Cliquez sur le bouton « Play » juste à côté du bouton d’enregistrement. L’animation tout juste enregistrée sera jouée en boucle sur la scène. Alors ? C’est cool ? 🙂

Pour créer une nouvelle image clé, c’est très simple. Cliquez un peu plus loin dans la timeline afin de déplacer la ligne rouge et déplacez de nouveau sur la scène l’élément voulu. Pour modifier une image clé déjà créée, c’est un jeu d’enfant : placez le curseur rouge à la verticale de l’image clé que vous voulez modifier et déplacez votre objet sur la scène.

Bon, je vous laisse créer une animation d’ouverture qui vous plait maintenant. Vous pouvez procéder à toutes les transformations possibles : position, scale, rotation, et bien d’autres encore…

Une fois que votre création est terminée, n’oubliez pas de désactiver le mode d’enregistrement. Si vous avez un doute et que la fenêtre n’est pas visible, jetez un oeil aux boutons Play / Pause / Step. S’ils sont rouges, c’est que le mode d’enregistrement est actif :

Créer l’animator

Assez rigolé, on passe aux choses sérieuses maintenant : l’Animator. Notre animation d’ouverture de porte, elle est sympa, mais il ne faut pas la jouer n’importe quand. C’est là que Mecanim entre en jeu : nous allons créer un contrôleur pour piloter l’animation. Il vous faut ouvrir une nouvelle fenêtre :

Window > Animator

Nous avons vu précédemment qu’en ajoutant l’animation sur la porte, un Animator a été généré automatiquement. Ouvrez le :

L’un des deux blocs devrait vous rappeler quelque chose… Mecanim, c’est une machine à états. Chaque état peut être lié à une animation et le moteur va se débrouiller pour les faire coïncider : il effectue des interpolations entre les différentes animations. Il nous faut créer les états qui nous conviennent, le tout de manière très visuelle sous forme de diagrammes. Je ne vais pas rentrer plus dans le détail du fonctionnement de Mecanim par la suite. C’est un sujet qui mériterait un dossier entier.

Notre porte aura 2 états : ouverte et fermée. Ces états fixes auront une animation chacun : de fermée à ouverte, et d’ouverte à fermée. Il nous faut donc 3 états dans le diagramme. Supprimez l’état créé automatiquement pour ne garder que le bloc vert (on ne peut pas le supprimer). Ensuite, créez les 3 états. Pour créer un état, faites :

Clic droit > Create State > Empty

Vous devez maintenant avoir ces blocs :

Closed est l’état par défaut, Opening et Closing vont contenir les animations. Le bloc orange est l’état par défaut. Il est attribué au premier bloc créé. Si ce n’est pas l’état Closed qui est défini par défaut, changez le en faisant :

Clic Droit sur le bloc > Set as default

Il faut maintenant créer les transitions entre les états. Vous devez vous douter de l’enchainement. Pour créer une transition, faites :

Clic Droit sur le bloc > Make Transition

Une flèche blanche suit maintenant votre curseur. Cliquer sur un autre bloc et la transition sera créée :

Faites toutes les liaisons suivantes de la même manière pour créer un beau cycle :

Les transitions sont définies, il faut maintenant les conditionner. Pour cela, nous allons avoir besoin de variables. Ces variables sont définies directement à l’intérieur de Mecanim et seront accessibles depuis l’extérieur (nous en reparlerons plus bas). Dans notre exemple, la seule information qui nous intéresse, c’est de savoir si le joueur est proche de la porte ou non. Créons donc un booléen pour stocker cette information. En bas de la fenêtre Animator se trouve un menu Parameters suivi d’un plus. Cliquez sur le plus et ajoutez un paramètre de type bool :

Selectionnez la transition de Closed à Opening. Dans l’inspecteur, en bas, il y a une liste de conditions. Par défaut, la condition est « Exit Time ». Modifiez la pour se baser sur le paramètre PlayerDetected créé plus haut. Maintenant, si l’état courant est Closed, il faudra que le paramètre PlayerDetected soit vrai pour passer à l’état Opening.

Sélectionnez l’état Opening et associez lui l’animation créée dans le premier point :

Pour la transition de Opening à Closing, c’est l’inverse. On ne veut lancer l’animation de fermeture de la porte que si le joueur n’est pas détecté. Il suffit de demander l’utilisation du paramètre à faux comme ceci :

Enfin, dernière étape, l’animation de fermeture. Nous n’avons créé qu’une animation d’ouverture pour le moment. Vous avez là deux possibilités : créer une nouvelle animation de fermeture, ou réutiliser l’animation d’ouverture… à l’envers! Dans des cas comme celui de notre porte, jouer l’animation dans le sens inverse est suffisant. Sélectionnez donc l’état Closing et affectez-lui l’animation d’ouverture. Pour lire l’animation en sens inverse, donnez lui une vitesse négative (astuce de ninja !) :

L’Animator, notre boite noire, est terminé et est prêt à animer notre porte… à condition de mettre à jour la variable PlayerDetected. Voyons cela dans le point suivant.

Piloter l’Animator

C’est maintenant à nous de notifier l’Animator des changements de valeurs de ses paramètres. Là, en l’occurrence, nous n’en avons qu’un seul : PlayerDetected. Pour détecter le joueur, nous allons utiliser un collider simple. Ajoutez un SphereCollider à la porte et cochez la case « Trigger » :

Si le joueur entre dans cette sphère, nous pourrons récupérer cette information dans un script. Faites attention de bien cocher la case trigger, sinon la sphère sera infranchissable.

Le script va collecter les informations de détection et les faire suivre à l’Animator. Rien de complexe ici : lorsque quelque chose entre dans la sphère, le joueur est détecté, quand il sort de la sphère, il n’est plus détecté. Notez que la valeur des paramètres à l’intérieur de Mecanim est conservée entre chaque boucle. Dans le cas de notre exemple, il n’y a donc même pas besoin de la méthode Update !

public class AutomaticDoor : MonoBehaviour {

  private Animator _animator;
 
  void Start()
  {
    _animator = GetComponent();
  }
 
  void OnTriggerEnter(Collider collider)
  {
    _animator.SetBool("PlayerDetected", true);
  }
 
  void OnTriggerExit(Collider collider)
  {
    _animator.SetBool("PlayerDetected", false);
  }
}

Affectez le script à la porte… et c’est fini, tout est prêt. Lancez le jeu et constatez. La porte s’anime à votre approche !

L’ensemble de manipulations peut paraitre un peu long, mais avec de la pratique, l’enchainement des choses à faire devient évident. De plus, ce genre d’animations peut tout à fait être packagé dans un Prefab. Votre niveau pourra avoir 250 portes… toutes automatiques !

Crédits image : Casey Bisson

Publicité