mardi 16 octobre 2012

Google anime en Javascript et SpriteSheets


C'est à l'occasion du 107ème anniversaire des premières planches de dessin de la bande dessinée Little Nemo, de Winsor Mac Cay, que Google a présenté cette superbe animation 2D réalisée en Javascript et à l'aide de SpriteSheets, ce lundi 15 octobre 2012. Enfin une animation qui exploite intelligemment les cases des bandes dessinées parce qu'elle y anime réellement du contenu et ne se contente pas de zoomer dedans !

video


Le principe des SpriteSheets, comme nous l'avons déjà évoqué, est de gérer une suite d'images fixes à l'aide de commandes Javascript ou à partir d'un langage de script quelconque. Technique éprouvée dans le secteur du jeu vidéo depuis des lustres, toujours employée dans les jeux actuels et les applications mobiles.

L'animation en SpriteSheets s'avère souvent bien plus efficace que n'importe quel autre procédé mais ne bénéficie pas d'une gestion dynamique des données, contrairement aux animations rendues en temps réel telles que Canvas, SVG, CSS, SWF. Les images étant enregistrées à l'avance, pas de calcul de rendu ou de comportement possible donc ! Toute l'interactivité demeure indépendante de l'animation.

La gestion de l'animation sous la forme d'images distinctes peut apparaître assez lourde en terme de logique de production et d'optimisation de l'animation (pas de compression temporelle comme en vidéo), mais offre cela dit une grande fluidité pour une gestion aller-retour, ou à vitesse variable, de la séquence animée. Elle reste à ce titre la solution la plus adaptée aux périphériques mobiles.

Voici quelques extraits des SpritesSheets utilisés par Google pour leur animation :






Pour animer à l'aide de SpriteSheets, vous pouvez utiliser la classe EaseJS disponible en téléchargement sur le site de l'éditeur ou désormais intégrée à Flash PRO CS6.

Pour en savoir plus sur la classe EaseJS et les SpriteSheets, consultez ces articles :

http://blogs.msdn.com/b/davrous/archive/2011/07/22/jeux-html5-animation-de-sprites-dans-l-233-l-233-ment-canvas-gr-226-ce-224-easeljs.aspx

http://forum.alsacreations.com/topic-5-56724-1-Jeux-HTML5-animation-de-sprites-dans-lelement-Canvas-grace-a-EaselJS.html

http://www.kddxy.net/comment-faire-un-film-flash-avec-le-jeu-video-sprites.html


Pour en savoir plus sur les SpriteSheets, lisez aussi cet article :
http://bloc-notes-arzhur.blogspot.fr/2012/04/animer-pour-le-mobile-les-spritesheets.html

Aucun commentaire:

Enregistrer un commentaire