Vous connaissez sans aucun doute les cinématiques, ces scènes animées entrecoupant les phases de jeu. Ces scènes cinématiques incorporées dans un jeu ont un but bien précis : faire avancer le scénario ou bien mettre l’accent sur un point précis de l’histoire.
Le composant principal de la création d’une scène cinématique est bien évidemment la caméra. Vous allez la déplacer, changer son angle… Nous allons aborder ensemble dans ce tutoriel comment mettre en place ce genre de mouvements de caméra et comment les relier ensemble pour créer une scène cinématique animée avec l’outil iTween.
Disclaimer
Cet article a été originalement écrit le 08/08/2014 sur mon précédent blog. Certaines informations présentées ici peuvent donc ne plus fonctionner telles quelles.
Introduction
Lorsque l’on commence à aborder le domaine de l’animation des éléments dans Unity3D, la première chose que l’on découvre, ce sont les fonctions Lerp (interpolation linéaire droite) et plus tard Slerp (interpolation linéaire sphérique). Ces fonctions permettent de faire de l’interpolation entre deux valeurs, sur une échelle de temps variable.
Ces fonctions prennent en général 3 paramètres (parfois plus mais on va rester dans le cas le plus simple) :
- L’état de départ
- L’état de fin
- Le delta entre 0 et 1
Le premier paramètre est l’état de départ, vous allez « partir de là ». L’état de fin est l’état que vous voulez atteindre à la fin de l’animation. Le delta est un nombre variant entre 0 et 1 et signifiant la progression de l’interpolation. à 0, la fonction renverra l’état de départ, à 1, elle renverra l’état de fin. Entre les deux, elle renverra une interpolation entre l’état de départ et l’état de fin, en fonction du delta.
Le résultat de cette interpolation, on peut en faire ce qu’on veut… et surtout s’en servir pour faire de l’animation. Le terme « animation » peut être utilisé de beaucoup… beaucoup de façons différentes. La seule limite étant votre imagination !
Installation et prise en main
iTween, en plus d’être un très bon outil est… gratuit ! Vous n’avez donc absolument aucune raison de vous en passer. Pour l’installer, rien de plus simple. Allez sur la page du store dédié, et installez le dans votre projet.
Une fois l’installation terminée, vous pouvez constater que le contenu est… spartiate. Pas de Prefab, pas de texture, rien que l’essentiel : iTween, une scène et 3 scripts d’exemple qui se courent après. Ce qui nous intéresse, c’est bien évidemment le script iTween. Ou devrais-je plutôt dire le mastodonteiTween et ses 7500 lignes. Ne paniquez pas. C’est un gros chiffre, je sais, mais vous n’aurez pas à mettre les mains dedans. Et c’est d’ailleurs ce qui est cool : ces milliers de lignes permettent de faire de façon relativement simple des animations poussées.
Passons à la prise en main. Vous savez maintenant que iTween est un titan, il faut apprendre à le maîtriser. Rassurez-vous, malgré les apparences, il est étonnamment simple à prendre en main. C’est même un jeu d’enfant pour dire vrai.
Commençons donc avec une simple animation : un cube qui va aller jusqu’à une position dans l’espace (matérialisée par un GameObject vide). La base de la base. En faisant ça à la main, vous pouvez faire ça dans la méthode d’Update, ou bien créer une Coroutine. Le code n’est pas très complexe, mais il faut gérer le Lerp soit même pour faire l’interpolation et quand on n’a pas l’habitude, on se retrouve vite à bricoler des trucs pas clairs… Beaucoup (trop) de gens utilisent ces fonctions sans comprendre comment elles fonctionnent et se plaignent ensuite d’avoir des résultats bizarres. Bref… Voici le code :
public class CubeScript : MonoBehaviour
{
public Transform Target;
void Start()
{
StartCoroutine("MoveCube");
}
private IEnumerator MoveCube()
{
var startTime = Time.time;
var animTime = 2;
var startPos = transform.position;
while(startTime + animTime > Time.time)
{
var delta = (Time.time - startTime) / animTime;
transform.position = Vector3.Lerp(startPos, Target.position, delta);
yield return null;
}
}
}
Tout ça, pour bouger le cube d’un point à un autre. 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. Vous trouvez que j’exagère ? Regardez cette scène d’ouverture de Bioshock datant de 2007 (il y a 7 ans quand même !), et faites attention aux mouvements de caméra…
Alors, à votre avis, combien de lignes de code pour tous ces mouvements avec cette technique ? Beaucoup hein ? Et ça, c’est juste pour la caméra, il y a tout le reste à animer aussi… Maintenant, voyons voir comment faire ce même mouvement avec iTween cette fois :
public class CubeScript : MonoBehaviour
{
public Transform Target;
void Start()
{
iTween.Init(gameObject);
iTween.MoveTo(gameObject, Target.position, 2);
}
}
Votre première réaction devrait être « mais ya pas de Coroutine ni de boucle, comment ça marche ton truc ? ». C’est là que c’est beau : iTween fait sa sauce en interne afin de faciliter au maximum les animations. Notez quelques points importants à propos d’iTween :
- Pas besoin d’ajouter un composant à vos GameObjects, iTween le fait lui même à la volée
- Vous devez utiliser iTween de manière statique : pas d’instanciation. Dans le code précédent, vous pouvez voir qu’on lui fournit toutes les informations dont il a besoin : la cible du mouvement, la position cible, et le temps d’animation. Il se débrouille pour faire le reste.
Nous venons de voir l’utilisation simple de iTween. Avec ça, vous pouvez faire des animations simples en 2 lignes maximum. Mais on veut aller bien plus loin et dans ce cas, il faut utiliser la seconde façon de faire.
Au lieu de lui passer un nombre de paramètre hallucinant pour paramétrer tout ce qu’on veut, iTween fonctionne avec un principe que les développeurs Javascript reconnaîtront bien. Les méthodes vont prendre un tableau associatif clé / valeur définissant les paramètres. De cette manière, il n’y a pas 200 méthodes portant le même nom avec un nombre de paramètres différent (et surtout jamais dans la configuration qui nous intéresse…). Ce principe est applicable à toutes les méthodes d’animation de iTween.
Reprenons l’exemple de notre cube pour aller un peu plus loin : le Cube va maintenant faire des aller-retours. Nous allons utiliser cette nouvelle notation pour demander à iTween de lui faire lire l’animation en « ping pong », c’est à dire en avant, puis en arrière, puis en avant… à l’infini. En javascript, il est simple de créer à la volée un set de propriété. En C#, ce n’est pas possible et il faut utiliser la classe Hashtable. Heureusement, là encore, iTween est là pour vous aider :
public class CubeScript : MonoBehaviour
{
public Transform Target;
void Start()
{
var hash = iTween.Hash(
"x", Target.position.x,
"y", Target.position.y,
"z", Target.position.z,
"time", 2,
"looptype", iTween.LoopType.pingPong,
"easetype", iTween.EaseType.linear
);
iTween.MoveTo(gameObject, hash);
}
}
Notez la méthode utilitaire de génération d’une Hashtable. Simple et facile à utiliser et vous pouvez la stocker en local si elle est réutilisée souvent. Son fonctionnement est simple, elle va associer le premier paramètre avec le second, le 3ième avec le 4ieme, et ainsi de suite. On définit la clé du paramètre en premier plus sa valeur. Clé, valeur, clé, valeur… Veillez à bien toujours avoir un nombre pair de paramètres sinon iTween va vous crier dessus (et il aura raison).
Les paramètres sont « simples », le Vector3 de la position cible est par exemple décomposée en ses 3 composantes x, y, et z. Pour le reste, c’est explicite. Voilà, votre cube fait des allers retours.
Je sens d’ici des étoiles apparaître dans vos yeux… Mais ce sera tout pour le moment ! Le sujet étant assez vaste, j’ai préféré découper ce tutoriel en deux parties. La partie suivante abordera la création de cinématiques à proprement parlé, même si avec ce que l’on vient de voir, vous avez déjà la plupart des clés pour faire pas mal de choses.
D’ici la suite… amusez-vous bien avec iTween !
L'atelier de Drakulo 