Animation Sprite Sheet

4

Pensez au cinĂ©ma đŸ“œïž. Une pellicule contient de nombreuses images đŸŽžïž. Chaque image reprĂ©sente une Ă©tape dans un mouvement.

Pour voir un mouvement continu, ces 24 images doivent s'afficher dans un interval rĂ©gulier. Plus le nombre d'images est Ă©levĂ©, plus le mouvement est fluide.

Les animations de type sprite sheet fonctionnent sur le mĂȘme principe.

Fichier image

Il est nĂ©cessaire d’avoir une sprite sheet regroupant toutes les images clĂ©s (keyframes) constituant l’animation. Toutes les images clĂ©s doivent avoir la mĂȘme dimension et ĂȘtre placĂ©es Ă  une distance Ă©quivalente.

Par exemple, chaque image clĂ© constituant l’animation de Donald Trump mesure 250px de large par 250px de haut. Puisque la sprite sheet est constituĂ©e de dix images clĂ©s, elle mesure donc 2500px de large pour une hauteur de 250px.

Il est important que les images clĂ©s aient toutes la mĂȘme dimension et soient placĂ©s Ă  des distances Ă©quivalentes, sinon un "glitch" sera visible dans l’animation.

Si chaque image clĂ© est un fichier sĂ©parĂ©, responsive-css.spritegen.com permet de les combiner en une sprite sheet.

Les images sources ont parfois besoin d'ĂȘtre redimensionnĂ©es et/ou recadrĂ©es avant d'ĂȘtre utilisĂ©es pour gĂ©nĂ©rer une sprite sheet, dans ce cas l'option la plus efficace est d'utiliser une Action Photoshop.

Animation

Si nous pouvions "flasher" chaque image à interval régulier, nous pourrions voir l'animation.

Il faut d'abord crĂ©er un Ă©lĂ©ment HTML dont la dimension correspond Ă  celle d’une image clĂ©. Dans cet exemple, 250px par 250px. Et y ajouter notre sprite sheet en background-image.

Ainsi, seule la premiĂšre image clĂ© devrait-ĂȘtre visible.

Voir le CodePen de Simon Arnold (@smnarnold).

Il faut ensuite animer la propriĂ©tĂ© background-position de sorte que la sprite sheet se dĂ©place vers la gauche et que toutes les images-clĂ©s dĂ©filent une Ă  la suite de l'autre.

Dans cet exemple, nous dĂ©plaçons donc la sprite sheet de sa largeur soit -2500px.

Voir le CodePen de Simon Arnold (@smnarnold).

Malheureusement, l'effet n'est pas convaincant puisqu'il y a une interpolation sur la propriĂ©tĂ© background-position.

Il est nĂ©anmoins possible d’ajuster la propriĂ©tĂ© animation-timing-function afin de remĂ©dier Ă  cette situation. PlutĂŽt que de lui donner une valeur telle que ease ou linear, il est possible de lui passer la fonction steps(). Cette derniĂšre permet de spĂ©cifier le nombre d’étapes devant constituer l'animation.

Par exemple, nous avons dix images clĂ©s constituant l’animation de Donald Trump. Il faudra donc spĂ©cifier steps(10).

Voir le CodePen de Simon Arnold (@smnarnold).

Shout out/CrĂ©dit Ă  Denys Almaral et Jose Sinchicay pour l'animation de Donald Trump!

Démonstration vidéo

Pour visualiser le rĂ©sultat codepen.io/smnarnold/pen/JjYKJMZ

Si vous n'avez pas de sprite sheet, vous pouvez vous amuser à créer un personnage ici sanderfrenken.github.io/Universal-LPC-Spritesheet-Character-Generator

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagĂ© ton opinion 😎
Pssst, c'est 💯 anonyme