Street Fighter II en Javascript et sprites CSS

Si vous êtes de la même génération que moi, vous avez sans doute joué à Street Fighter II dans votre tendre jeunesse. Jkneb, un développeur/designer a recrée les mouvements de Ken en Javascript et CSS. C’est l’occasion de parler des sprites CSS, une technique qui permet également d’améliorer les temps de chargement de ses pages web.

Si vous êtes impatient de voir le résultat, et que vous avec hâte de faire puncher Ken, vous pouvez vous rendre ici :
http://codepen.io/jkneb/pen/smtHA
Une fois que vous vous serez bien défoulé, vous aurez peut être envie d’en savoir un peu plus comment cela fonctionne, vous pourrez alors vous rendre ici :
http://front-back.com/animate-png-sprites-with-css3-animations

Vous verrez que la technique employée utilise beaucoup les sprites CSS. Késaco me direz vous ? Il s’agit en fait de rassembler plusieurs images en une seule, et de n’afficher sur la page web que la partie de l’image qui nous intéresse, en jouant notamment sur la propriété css background-position.
L’avantage de cette technique est de limiter les requêtes HTTP en limitant le nombre de fichiers à charger. Attention toutefois à bien tenir compte des limites de la technique, et de l’utiliser à bon escient.
Pour en savoir plus sur les sprites CSS, je vous invite à lire cet article sur Alsacréations qui parle de la mise en place et des limites de cette technique :
http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html
Mise à jour du 11 avril 2013 : 
Un tuto sur les sprites CSS que je viens de voir sur Developpez.com ce matin

A vos sprites !

Et si vous voulez jouer au Street Fighter original, pourquoi ne pas vous construire une borne d’arcade maison ?

Un commentaire sur « Street Fighter II en Javascript et sprites CSS »

Laisser un commentaire