Créez des scènes cinématiques avec iTween (2/2)

Mettre en place des animations est très simple avec iTween. Nous avons vu dans le tutoriel précédent comment mettre en place des animations basiques. Si vous arrivez tout juste, je vous invite à aller y jeter un oeil !

Nous allons maintenant passer à la partie avancée pour animer une caméra sur un chemin. L’objectif étant de créer une scène cinématique.

Disclaimer

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

Installation

L’installation est simple et rapide. Allez sur cette page et téléchargez le package unity suivant : Visual editor for itween motion paths. Installez le dans votre projet en double cliquant sur le package.

Et voilà. L’installation est terminée. Passons à la suite.

Mise en scène

Comme présenté dans l’article précédent, l’idée est de faire une mise en scène particulière :

Maintenant je vous laisse imaginer comment coder votre effet de caméra avec plongé jusqu’au personnage depuis un immeuble avec ralentit sur la goutte de sueur qui perle sur son front, puis basculement à l’envers au ralentit suivi d’une nouvelle animation en spirale autour de la balle que le personnage vient de tirer de son fusil.

On va mettre cette séquence en place (au moins dans les grandes lignes). Pour commencer, il nous faut des décors. Comme ce n’est pas ce qui nous intéresse le plus, on va poser des cubes et les déformer pour obtenir les formes qui nous intéressent. Quelque chose comme ça :

Des cubes qui représentent les immeubles, dont un plus haut que les autres (c’est de là que va commencer l’animation) et un autre cube aplatit pour le sol de la rue. On va également rajouter deux capsules pour représenter notre héros et le méchant. Le héro sera en bas de notre grand « immeuble et le méchant au bout de la rue :

Voilà pour la mise en scène. Je ne vais pas aller plus loin dans le détail, ce n’est pas ce qui nous intéresse ici.

Création du chemin de la caméra

Nous avons iTween, nous avons le gestionnaire de chemins pour iTween, nous avons la scène… c’est le moment de passer à l’action ! Créer le chemin est un jeu d’enfant. Pour commencer, il vous faut créer une nouveau GameObject qui va contenir le chemin. Sélectionnez le dans la hiérarchie et ouvrez le menu Components. Un nouvel élément est disponible vous permettant d’ajouter un composant iTweenPath :

Vous voilà donc avec votre chemin :

Notez l’affichage dans la scène et dans le composant. J’ai renommé le chemin pour plus de clarté en « Camera Path ». Le nom du chemin est affiché sur la scène sous forme de gizmo mais ce n’est pas très lisible dans l’image précédente. En effet, deux gizmos sont affichés : la position de début et la position de fin de l’animation. Ici, les deux points de départ et d’arrivée sont au même endroit… d’où le chevauchement du texte. Ce nom est important pour la suite.

Déplaçons tout ça ! Vous remarquerez qu’un seul GameObject va contenir tout le chemin via des noeuds (Vector3). Rassurez-vous, il est possible de les déplacer comme n’importe quel GameObject sur la scène. C’est bien tout l’intérêt de l’éditeur de chemins ! Déplacez les noeuds de début et de fin pour y voir un peu plus clair. Vous avez maintenant 3 marqueurs spatiaux, un pour chacun des noeuds du chemin et bien entendu un pour le GameObject lui même. Déplacer le GameObject n’a aucune incidence sur le chemin, je vous invite donc à le placer en [0,0,0].

Pour rajouter un point de passage, augmentez le nombre de noeuds et des lignes supplémentaires apparaîtront, avec leurs gizmos respectifs. Vous pouvez mettre en place tous les points de l’animation comme ceci :

Animation de la caméra

Le chemin est prêt, il faut maintenant s’occuper de lier la caméra à ce chemin et de lui faire suivre. Nous allons donc créer un script pour gérer tout ça et appeler iTween pour effectuer les transformations. Dans le tutoriel précédent, nous avons vu comment utiliser la méthode Hash, et nous allons encore en avoir besoin :

public class CameraAnimator : MonoBehaviour
{
    void Start()
    {
        var hash = iTween.Hash(
            "path", iTweenPath.GetPath("Camera Path"),
            "time", 8,
            "easetype", iTween.EaseType.linear,
        );

        iTween.MoveTo(gameObject, hash);
    }
}

Le paramètre « path » permet de spécifier quel chemin utiliser. Il vous faut ensuite utiliser iTweenPath.GetPath pour récupérer un tableau des points de passage que vous avez définit en drag’n’drop sur votre scène. La clé est le nom que vous avez donné à votre chemin.

Attachez ce script à votre caméra et lancez… Elle suit le chemin ! Mais ce n’est pas encore ça. Vous noterez deux choses importantes :

1. La caméra part de sa position actuelle et pas du premier point de passage
2. La caméra regarde toujours dans la même direction.

En effet, iTween fait également une interpolation entre la position actuelle de l’objet et le premier point de passage. Si vous voulez un départ « immédiat » il vous faudra déplacer vous même votre objet (ici la caméra) au premier point de passage.

La caméra (ou n’importe quel objet attaché à une animation de chemin iTween), est uniquement déplacée dans l’espace en suivant les points. Pour notre caméra, c’est pas top… On voudrait plutôt qu’elle regarde dans la direction du chemin ! Et pour ça, rien de plus simple. Rajoutez dans le Hash l’option « orienttopath » à true…

 

Relancez le jeu et appréciez !

Pour aller plus loin

Dans le cas où vous voudriez faire des animations (toujours sur un chemin) mais avec des paramètres différents (vitesse, mode d’animation, etc), il vous faudra découper votre chemin en plusieurs « sous chemins » : plusieurs GameObjects avec un composants iTweenPath. Le point de fin du 1 est le point de début du 2, le point de fin du 2 est le point de début du 3, etc.

Pour les lier entre eux, vous pouvez utiliser les méthodes de callback comme « oncomplete » qui sera appelée une fois l’animation terminée. Vous pouvez ainsi chaîner différents « blocks » d’animation pour obtenir l’effet de vos rêves.

Vous voilà maintenant armé pour faire des animations. Amusez-vous bien !

 

 

Publicité