Présentation de Timeline chez Unity

[Le didacticiel contient environ 50 Mo d'images, y compris des GIF animés]

Les développeurs utilisent souvent des cinématiques pour raconter une partie de l'intrigue du jeu ou pour captiver le joueur. Certains jeux créent des scènes animées spécialement rendues avec des modèles très détaillés, tandis que d'autres utilisent de vrais modèles en jeu. Grâce à l'utilisation de modèles en jeu, vous pouvez économiser beaucoup d'argent et de temps, car vous n'avez pas à créer de nouveaux modèles, plates-formes et animations exclusivement pour les cinématiques. Mais même si vous utilisez des modèles prêts à l'emploi, cela ne signifie pas que vous devez sacrifier les effets spéciaux ou le drame! Unity a un outil puissant pour créer des cinématiques passionnantes - Unity Timeline!

Dans ce didacticiel, vous découvrirez la chronologie et apprendrez à créer des cinématiques avec des animations et des changements de caméra.

Se rendre au travail

Téléchargez le projet de projet et le projet terminé à partir d'ici .

Ouvrez le fichier du projet de démarrage et chargez la scène principale. Elle sera notre fondation. Il y a un héros en elle, debout sur une tour et regardant le monde:


Avec votre aide, il pourra sauter de la tour, se retourner, aller au coffre au trésor et l'ouvrir d'un coup de pied. Avec ces animations, la caméra changera également sa position. Voici à quoi ressemble la scène terminée:

Qu'est-ce que la chronologie?

Dans ce didacticiel, nous travaillerons avec Unity Timeline - mais qu'est-ce que la chronologie? La timeline est un GameObject avec un composant de timeline qui peut être édité dans la fenêtre Unity Timeline, qui contrôle les images clés de l'animation et les cycles de vie des objets. Lors de la création d'une cinématique à l'aide de la chronologie Unity, nous définissons les clés d'animation et déterminons quand elles doivent fonctionner. Dans ce didacticiel, nous utiliserons également AnimationController, qui peut être considéré comme un sur-ensemble d'images clés de l'animation.

Lorsqu'un personnage exécute une animation, telle que la marche, chaque sommet en mouvement individuel d'un objet doit indiquer son chemin. Dans ce tutoriel nous ne serons pas engagés dans la création d'un modèle et des animations de gréage - tout a déjà été fait pour nous. Mais il est utile de savoir que lorsque vous définissez manuellement une image clé pour une animation ou utilisez un AnimationController, ils sont essentiellement la même chose: la position des objets à un moment donné. La chronologie contrôle tous ces mouvements pour créer la scène. Vous comprendrez tout cela lorsque vous commencerez à comprendre Unity Timeline.

Mais avant de vous plonger dans l'étude, il est utile de donner un bref aperçu de la fenêtre Chronologie. Regardez l'image et lisez les descriptions sous les chiffres:

1. Actif de la chronologie: il s'agit d'une piste qui est mappée à un GameObject dans la hiérarchie. Il stocke les images clés associées à ce GameObject, utilisées pour effectuer des animations ou pour déterminer si GameObject est actif.
2. GameObject associé: c'est le GameObject auquel la piste est associée.
3. Image: il s'agit de l'image de la timeline actuellement définie. Lorsque nous devons modifier les animations, nous définissons les images clés dans les images de début et de fin.
4. Groupe de pistes: l' augmentation de l'échelle de la scène augmente également le nombre de pistes. Vous pouvez organiser les pistes en les regroupant.
5. Bouton d'enregistrement: lorsque ce bouton est actif, nous pouvons changer l'image actuelle et définir la position et / ou la rotation du GameObject dans la scène. Les modifications seront enregistrées.
6. Icône Courbes: cliquez sur cette icône pour ouvrir la fenêtre Courbes, dans laquelle vous pouvez affiner les détails des images clés associées de l'animation pour les modifier de la manière souhaitée.

Ne vous inquiétez pas si ces informations vous semblent trop compliquées jusqu'à présent - dans le processus de réalisation du didacticiel, nous y reviendrons. À ce stade, il est très important de se rappeler où se trouve la fenêtre Chronologie et que lorsque vous sélectionnez la chronologie GameObject, vous pouvez accéder à la fenêtre Chronologie.

Lumière, caméra, MOTEUR!

Après avoir chargé la scène principale, cliquez sur Lecture. Vous devriez voir un héros debout au sommet d'une tour:


Il s'agit de l'animation par défaut spécifiée dans le contrôleur d'animation. Dans ce tutoriel, nous utiliserons des animations pré-créées, vous n'avez donc pas à vous soucier de la structure interne des modèles, des animations ou des contrôleurs. Mais si vous voulez comprendre ce processus, vous pouvez étudier notre tutoriel Introduction à Unity Animation .

Création d'un GameObject de type Chronologie

La première étape consiste à créer une chronologie GameObject. Créez un GameObject vide en cliquant avec le bouton droit (sur un Mac avec la commande maintenue enfoncée) dans la fenêtre Hiérarchie et en sélectionnant Créer vide . Nous ajoutons donc un GameObject à la scène et le sélectionnons:


Sans supprimer la sélection de GameObject, ouvrez le menu Fenêtre et sélectionnez Chronologie . La fenêtre Chronologie s'ouvre. Cliquez sur le bouton Créer , la boîte de dialogue Enregistrer s'ouvre. Changez le nom du fichier en Chronologie et cliquez sur Enregistrer:


Renommez GameObject en Timeline en cliquant dessus, en appuyant sur la touche F2 et en entrant dans Timeline :


Nous avons créé une chronologie GameObject qui coordonnera toutes les animations et les changements de caméra dans la cinématique. À l'intérieur du moteur, Unity a enregistré un fichier d'actif appelé Timeline.playable sur le disque. Dans GameObject Timeline, Unity a ajouté des composants Playable Director et Animator .

Le composant Playable Director contient un champ jouable attaché à l'élément de chronologie que nous venons d'enregistrer. Le composant Animator ajouté par Unity en théorie devrait nous permettre d'animer la chronologie GameObject, mais nous ne le ferons pas, vous pouvez donc simplement l'ignorer.

Avant de continuer, je veux faire glisser l' onglet Chronologie vers le bas de l'écran. Cela nous permettra d'ouvrir simultanément les fenêtres Scène et Chronologie:


Sélectionnez GameObject Timeline et revenez à la fenêtre Timeline. À l'heure actuelle, nous avons une piste d'animation pour la chronologie GameObject. Nous n'en avons pas besoin, vous pouvez donc le sélectionner et appuyer sur Supprimer pour supprimer:

Animer le saut!

Nous sommes maintenant prêts à démarrer des animations. Développez GameObject Hero pour voir le modèle GameObject. Sélectionnez Chronologie GameObject. Faites glisser le modèle GameObject dans la fenêtre Chronologie; cela ouvrira le menu de piste, donc sélectionnez Piste d'animation . Répétez cette étape pour GameObject Hero :

Remarque: nous avons ajouté à la fois Hero et Model afin d'utiliser correctement l'espace local zéro. GameObject Hero est un conteneur pour le modèle GameObject, qui vous permet de jouer des animations sans affecter la position à partir de laquelle elles sont jouées. Lorsque nous devons déplacer le héros, nous animons le héros GameObject. Lorsqu'un personnage doit être animé - ce qui peut être fait pendant le déplacement - nous utiliserons le modèle GameObject. Sans cette relation parent-enfant, les animations jouées par l'objet Modèle remplaceront incorrectement les paramètres de mouvement de l'objet Héros si vous ne le configurez pas en tant qu'enfant.

Enregistrer des images clés

Étant donné que la piste GameObject Hero représente la position du héros, nous devons définir sa position comme image clé initiale.

Sélectionnez la piste Hero dans la fenêtre Chronologie et cliquez sur le bouton Enregistrer (cercle rouge) pour démarrer l'enregistrement. Sélectionnez GameObject Hero dans la fenêtre Hiérarchie et définissez sa position X sur -1 , puis définissez immédiatement sa position X sur 0 .

Revenez à la fenêtre Chronologie et appuyez sur le bouton Enregistrer de la piste Héros pour terminer l'enregistrement . Nous avons donc ajouté une image clé pour la position initiale du héros:


Dans notre projet, le héros est déjà dans la position à partir de laquelle il devrait commencer. Cependant, tant que nous ne changerons pas la position, elle ne sera pas enregistrée lors de l'enregistrement en tant qu'image clé. Par conséquent, si vous avez besoin de définir une image clé lors de l'enregistrement pour une position qui possède déjà une image clé, déplacez-la simplement et renvoyez-la pour l'enregistrer.

La façon la plus simple de procéder consiste à définir la position X de l'objet sur -1 par rapport à sa position actuelle, puis à remettre la valeur à sa place. Dans ce tutoriel, nous utiliserons cette astuce plusieurs fois.

Ensuite, nous avons besoin du héros pour attendre 100 images avant de sauter de la tour. Pour le moment, nous n'avons défini que la position initiale du héros, mais nous devons lui donner la même position (c'est-à-dire au sommet de la tour) après 100 images. Sinon, Unity commencera immédiatement à interpoler le mouvement.

Comme précédemment, sélectionnez GameObject Timeline , mais cette fois, vous devez cliquer sur le champ d'image en haut de la fenêtre et entrer «100» . Nous déplaçons donc l'image clé à l'image 100.

Appuyez sur le bouton Enregistrer pour la piste Hero. Sélectionnez GameObject Hero et dans le champ Transformer de la fenêtre Inspecteur, définissez sa position X sur -1, puis revenez immédiatement à 0 . Appuyez à nouveau sur le bouton Enregistrer pour arrêter l'enregistrement.


Nous avons donc configuré l'image clé initiale de Hero et sommes prêts à continuer à travailler avec les animations.

Ajouter des clips animés

Définition des données de position

Nous devons d'abord définir les données de position.

Cliquez sur Chronologie GameObject pour le sélectionner. Dans la fenêtre Montage, ajoutez une animation à la piste modèle en cliquant avec le bouton droit (sur un Mac - en cliquant sur Commande) sur la piste modèle et en sélectionnant Ajouter à partir du clip d'animation . Sélectionnez maintenant l'animation inactive :


Ensuite, nous animons le saut du héros de la tour, mais nous devons d'abord le déplacer de haut en bas sur la rambarde, puis vers le sol.

Pour ce faire, sélectionnez d'abord la fenêtre Chronologie, puis passez à l'image 138 . Appuyez sur le bouton Enregistrer sur la piste Hero. Sélectionnez maintenant GameObject Hero . Dans le champ Transformer de la fenêtre Inspecteur, définissez Position Y sur 3,934 et Position Z sur 1,97 .

Retournez à la fenêtre Chronologie et passez à l'image 176 . Sélectionnez à nouveau GameObject Hero et réglez Position Y sur 0 et Position Z sur 5.159 . Terminez l'enregistrement en appuyant sur le bouton Enregistrer :


Enregistrez la scène et cliquez sur Lecture pour voir le résultat de votre travail!


Ajouter des animations

Nous définissons ces positions, mais pas les animations réalisées avec elles. Maintenant, nous allons le faire.

La fenêtre Montage étant sélectionnée, cliquez avec le bouton droit (sur un Mac, maintenez la commande) sur la piste Modèle et cliquez sur Ajouter à partir du clip d'animation , puis sélectionnez Sauter . Vous ajoutez donc l'animation Jump immédiatement après l'animation Inactif.

Faites glisser le côté droit de l' animation Jump pour qu'elle se trouve dans l'image 176 . Nous allons maintenant ajouter un autre clip d'animation , mais cette fois, nous allons ajouter l'animation Land (vous n'avez pas besoin de changer sa durée, il suffit de l'ajouter):


Enregistrez la scène, cliquez sur Lecture et regardez le résultat!

Ajouter des caméras

Il est un peu difficile de suivre l'action après le saut du héros de la tour, donc c'est le bon moment pour travailler avec des caméras.

Dans la fenêtre Hiérarchie, renommez MainCamera en Camera1 . Sélectionnez Chronologie GameObject. Faites glisser Camera1 vers la fenêtre Chronologie, cela ouvrira le menu de sélection de piste; sélectionnez Activation Track . Faites glisser la piste Active de Camera1 pour qu'elle se termine à l'image 157 :

Astuce: le marqueur d'image actuel peut être défini à l'aide du champ compteur d'images dans l'inspecteur de la timeline. Si vous placez le marqueur sur l'image dans laquelle vous souhaitez faire glisser la piste, la piste sera attachée au marqueur d'image.

L'activité ou l'inactivité du GameObject pendant une scène est contrôlée par la piste d'activation . Notre caméra principale s'éteindra désormais après l'image 157. Cliquez sur Lecture et regardez le résultat:


Maintenant, nous allons ajouter une autre caméra, seulement elle baissera les yeux pour montrer le héros après avoir sauté par-dessus la balustrade de la tour.

Dans la fenêtre Hiérarchie, sélectionnez Camera1 et dupliquez-la en appuyant sur Control-D (Command-D sur Mac). Renommez le doublon en Camera2 et désactivez- le.

Dans ce didacticiel, nous utilisons deux autres caméras, alors créons-les maintenant en répétant le même algorithme; renommez-les Camera3 et Camera4 et déconnectez-vous. Après cela, tous les objets de jeu Camera, à l'exception de Camera1, doivent être désactivés. Voici à quoi devrait ressembler la hiérarchie:


Nous allons maintenant placer Camera2. Sélectionnez Camera2 et dans le champ Transformer de la fenêtre Inspecteur, définissez Position Y sur 10,75 et Position Z sur 2,84 . Réglez Rotation X sur 79,5 :


Comme pour Camera1, sélectionnez la fenêtre Chronologie et faites glisser l'objet Camera2 dedans depuis la hiérarchie; le menu de sélection de piste apparaît de nouveau, donc sélectionnez Piste d'activation . Faites glisser la barre active pour qu'elle démarre immédiatement une fois l'activation de Camera1 terminée (image 158). Faites glisser le côté droit de la piste active pour Camera2 afin qu'elle se termine à l' image 216 .

Enregistrez la scène, cliquez sur Lecture et regardez le changement de caméras dans votre scène.

Il est temps d'accéder au trésor!

On regarde la poitrine

Maintenant que notre héros a atterri sur le sol, il doit se tourner vers le coffre au trésor et commencer à marcher.

Sélectionnez la chronologie GameObject et définissez l'image 202 . Appuyez sur le bouton Enregistrer dans la piste Héros pour commencer l'enregistrement.

Sélectionnez GameObject Hero et dans le champ Transformer de la fenêtre Inspecteur, définissez Rotation Y sur -1, puis redéfinissez immédiatement la valeur sur 0 pour définir l'image clé initiale de la rotation GameObject Hero.

Une fois terminé, sélectionnez à nouveau la chronologie GameObject et définissez l'image 216 . Sélectionnez à nouveau GameObject Hero et, dans le champ Transformer de la fenêtre Inspecteur, définissez Rotation Y sur -90 .

Remarque: les images clés de la position et de la rotation sont définies indépendamment l'une de l'autre. Auparavant, lorsque nous définissions la position initiale du héros, l'image clé du tour n'était pas enregistrée, nous devons donc définir une nouvelle image avant de passer au tour souhaité dans la direction du trésor.

De plus, le héros doit être en attente à ce moment, alors ajoutez l'animation inactive à la piste d' animation du modèle et faites-la durer jusqu'à l'image 216 :


Ainsi, notre héros a atterri et est prêt à rechercher des trésors. Il est temps de se diriger vers lui et d'ouvrir le coffre!

Astuce: si la piste Timeline devient trop grande, vous pouvez tourner la molette de la souris pour changer son échelle. Pour vous déplacer vers la gauche ou la droite, maintenez enfoncé le bouton central de la souris tout en le déplaçant vers la gauche ou la droite.

Nous approchons du trésor

Sélectionnez la chronologie GameObject et définissez l'image 216 . Appuyez sur le bouton Enregistrer sur la piste Hero pour commencer l'enregistrement.

Sélectionnez GameObject Hero et définissez la position X sur -1 dans le champ Transformer de la fenêtre Inspecteur, puis revenez à 0 pour définir l'image clé pour la position de départ. Ensuite sur Timeline, sélectionnez l'image 361 sur la piste Hero.

Revenez à GameObject Hero et définissez la position X sur -6 dans le champ Transformer de la fenêtre Inspecteur. Revenez à la piste Hero et terminez l'enregistrement.

Enfin, donnez à l'objet Modèle une animation de marche , en suivant les mêmes étapes que précédemment, puis étirez-le jusqu'à l' image 361 :


Vous remarquerez peut-être que le héros semble parcourir le trésor, mais en fait, c'est un problème avec l'aperçu de la chronologie, car, comme nous le verrons bientôt, le héros va directement dans la poitrine et s'arrête.

Pour empêcher Camera2 de suivre l'intégralité du chemin du héros, nous pouvons maintenant utiliser Camera3 pour tirer de derrière le dos du héros.

Pour ce faire, dans le menu principal de la fenêtre Hiérarchie, sélectionnez et faites glisser Camera3 sur le modèle GameObject, qui se trouve à l'intérieur du GameObject Hero, pour faire de la caméra son enfant.

Réglez la position de Camera3 (X: 0, Y: 2.06, Z: -2.5) . Donnez-lui un tour (X: 0, Y: 0, Z: 0) . La hiérarchie devrait ressembler à ceci:


Étant donné que Camera3 est maintenant un enfant du modèle GameObject, il répétera tous les mouvements du modèle GameObject, en le regardant de derrière. Cependant, Camera3 a toujours besoin d'une piste d'activation pour qu'elle s'active au bon moment.

Faites glisser GameObject Camera3 vers la chronologie et sélectionnez Piste d'activation , comme nous l'avons fait avec Camera1 et Camera2. Définissez l'image de départ de Camera3 sur l' image de fin de Camera2 et définissez l'image de fin sur Camera3 sur 361 :


Maintenant, enregistrez la scène, cliquez sur Lecture et voyez comment tout se passe:


Nous avons déjà presque tout fait! Maintenant, le héros n'a plus qu'à ouvrir le coffre ... bien sûr, lui donner un coup de pied!

Ouvrez le coffre

Pour la vue finale, nous utilisons Camera4, la configurant comme nous l'avons fait avec Camera1 et Camera2.

Faites glisser Camera4 vers la timeline et ajoutez la piste d'activation . Définissez l'image de départ de Camera4 à la fin de la phase d'activité de Camera3 et étendez-la à l'image 555 . Cela devrait ressembler à ceci:


Ajoutez une animation Kick . Cliquez avec le bouton droit (sur un Mac, maintenez la commande) sur la piste Modèle. Sélectionnez Ajouter une animation à partir du clip , puis sélectionnez Coup de pied . Ne modifiez pas la durée. La piste Model devrait maintenant ressembler à ceci:


Nous devons ouvrir le coffre, alors maintenant nous allons ajouter une animation de sa couverture. La configuration de cette animation est similaire à ce que nous avons fait auparavant.

Développez GameObject ChestBottom dans la fenêtre Hiérarchie. Faites glisser GameObject ChestLid sur la timeline et sélectionnez Piste d'animation . Dans la timeline, définissez l'image 389 . Sélectionnez maintenant la piste ChestLid . Cliquez sur le bouton Enregistrer .

Maintenant que l'enregistrement est en cours , sélectionnez GameObject ChestLid dans la fenêtre Hiérarchie et définissez la position X sur -1 , puis revenez à 0 pour définir la position de départ. Dans la fenêtre Montage, définissez l'image 555 . Enfin, dans le champ Transformer de la fenêtre Inspecteur, définissez Y Position ChestLid sur 6 . Appuyez à nouveau sur le bouton Enregistrer de la piste pour terminer l'enregistrement.


Nous animons donc le couvercle du coffre pour qu'il vole à travers le mur.

Vous devez maintenant placer Camera4 de sorte qu'il soit au-dessus de la poitrine lorsque le couvercle s'envole. Nous allons répéter les mêmes étapes que pour la caméra précédente, donc je ne décrirai pas chaque action en détail.

Donnez à l'objet Camera4 une position (X: -9,00, Y: 5,4, Z: 5,18) . Réglez Camera4 pour qu'il pivote (X: 90, Y: 0, Z: 0) .


Comme avec toutes les autres caméras ajoutées, l'ajout d'une animation rend la scène plus intéressante, vous devez donc faire zoomer la caméra après avoir ouvert le coffre.

Sélectionnez la fenêtre Chronologie . Faites-y glisser GameObject Camera4 et créez une piste d'animation . Réglez la piste 389 sur piste. Cliquez sur la piste Camera4 , puis sur le bouton Enregistrer . Sélectionnez GameObject Camera4 . Dans le champ Transformer de la fenêtre Inspecteur, définissez Position X sur 0, puis à nouveau sur -9 .

Dans la fenêtre Montage , faites glisser la piste d'animation sur l' image 555 .

Enfin, définissez la position Y de Camera4 sur 3,74 :


La scène est enfin terminée. Cliquez sur Play et notez-le!

Gérer avec complexité: regrouper les pistes

C'était une courte animation de tout avec quelques "acteurs", donc c'était assez facile pour nous de suivre les objets et les pistes du jeu. Mais lors de la création de scènes plus complexes avec de nombreuses parties et acteurs en mouvement, il devient très difficile à contrôler. C'est pourquoi la commande est très nécessaire. Bien que la scène soit prête, passons quelques minutes à l'organiser - à l'avenir, vous vous en remercierez toujours.

Une façon d'organiser votre travail consiste à regrouper les pistes. Tout d'abord, cliquez avec le bouton droit sous les pistes de la fenêtre Montage et sélectionnez Groupe de pistes . Cliquez sur Track Group et dans l'inspecteur changez son nom en Activations :


Répétez ce processus et créez un groupe de pistes appelé animations . La chronologie devrait maintenant ressembler à ceci:


Faites maintenant glisser toutes les pistes contenant des sections actives vers le groupe Activations et toutes les autres vers le groupe Animations . Vous pouvez maintenant ouvrir et fermer chaque groupe pour pouvoir travailler avec eux:


N'oubliez pas de sauvegarder votre travail. Asseyez-vous dans le fauteuil de votre directeur et félicitez-vous - vous avez terminé votre première chronologie.

Où aller ensuite

Si vous avez manqué certaines parties du didacticiel, n'oubliez pas que vous pouvez télécharger la pièce et le projet fini à partir d'ici .

Nous avons travaillé dur et créé une cinématique en utilisant des animations de modèles, en changeant les caméras et en mettant à jour les cycles de vie des objets, mais beaucoup plus peut être appris ici. L'un des aspects les plus importants liés à Timeline est la création de vos propres scripts dans lesquels vous pouvez associer des animations avec du code qui peut être exécuté avec elles. En savoir plus sur les scripts ici . Si vous êtes déjà à l'aise, essayez d'ajouter un script à la scène après avoir ouvert le coffre au trésor.

Si vous souhaitez en savoir plus sur les animations dans Unity en général, consultez notre excellent didacticiel Introduction à l'animation Unity.

Pour en savoir plus sur la création de modèles 3D et la fenêtre d'animation, consultez la série détaillée de didacticiels pour développeurs Unity présentés ici .

Et le dernier - si vous êtes intéressé par la création de jeux, vous pouvez acheter notre livre Unity Games By Tutorial . Il parle de créer quatre types de jeux à partir de zéro avec une description détaillée de chaque étape du processus.