VirtuousWebVirtuousWebVirtuousWeb

L’utilisation de gif est dure à gérée en cas de modification de l’animation, la qualité se fait au prix d’un poids excessif. La solution alternative est donc le sprite …euh non pas la boisson… Pour ceux qui ne connaissent pas, c’est une planche d’images sur laquelle on trouve tous les états d’une animation.

Dans notre exemple l’animation du personnage si on clique sur la droite ou la gauche, ce qui fait 4 animations du personnage en tout. Voyez plutôt :

La démonstration

Comme dans l’article précédent, la structure HTML est minimaliste :

Et le CSS également est très light :

body {
	margin:0;
}
#container {
	position:absolute;
	width:1000px;
	height:300px;
	background:#92d2ed;
}
#sol {
	position:absolute;
	width:2000px;
	height:36px;
	bottom:0;
	background:url(../images/sol.png) repeat-x;
	z-index:50;
}
#perso {
	position:absolute;
	width:61px;
	height:73px;
	background:url(../images/nu.png) -21px -128px no-repeat;
	top:195px;
	left:460px;
	z-index:40;
}

Et voici le javascript qui anime le personnage et permet de détecter le pressage de touches.
Nous utilisons le plugin de background position et le plugin timers, qui permet de remplacer les setTimeOut et setInterval.

$(document).ready(function() {
	jQuery.fn.arretDrt = function() {
		$(this).oneTime(200,function() {
			$(this).css({backgroundPosition:'-21px -128px'});
		}).oneTime(400,function() {
			$(this).css({backgroundPosition:'-121px -128px'});
		}).oneTime(600,function() {
			$(this).css({backgroundPosition:'-221px -128px'});
		}).oneTime(800,function() {
			$(this).css({backgroundPosition:'-121px -128px'});
		});
	};
	jQuery.fn.mouvArretDrt = function(){
		$(this).arretDrt();
		$(this).everyTime(800,function(){
			$(this).arretDrt();
		});
	}
	jQuery.fn.arretGch = function() {
		$(this).oneTime(200,function() {
			$(this).css({backgroundPosition:'-23px -28px'});
		}).oneTime(400,function() {
			$(this).css({backgroundPosition:'-123px -28px'});
		}).oneTime(600,function() {
			$(this).css({backgroundPosition:'-223px -28px'});
		}).oneTime(800,function() {
			$(this).css({backgroundPosition:'-123px -28px'});
		});
	};
	jQuery.fn.mouvArretGch = function(){
		$(this).arretGch();
		$(this).everyTime(800,function(){
			$(this).arretGch();
		});
	}
	jQuery.fn.marcheDrt = function() {
		$(this).oneTime(200,function() {
			$(this).css({backgroundPosition:'-18px -328px'});
		}).oneTime(400,function() {
			$(this).css({backgroundPosition:'-118px -328px'});
		}).oneTime(600,function() {
			$(this).css({backgroundPosition:'-218px -328px'});
		}).oneTime(800,function() {
			$(this).css({backgroundPosition:'-318px -328px'});
		});
	};
	jQuery.fn.mouvMarcheDrt = function(){
		$(this).marcheDrt();
		$(this).everyTime(800,function(){
			$(this).marcheDrt();
		});
	}
	jQuery.fn.marcheGch = function() {
		$(this).oneTime(200,function() {
			$(this).css({backgroundPosition:'-23px -228px'});
		}).oneTime(400,function() {
			$(this).css({backgroundPosition:'-123px -228px'});
		}).oneTime(600,function() {
			$(this).css({backgroundPosition:'-223px -228px'});
		}).oneTime(800,function() {
			$(this).css({backgroundPosition:'-323px -228px'});
		});
	};
	jQuery.fn.mouvMarcheGch = function(){
		$(this).marcheGch();
		$(this).everyTime(800,function(){
			$(this).marcheGch();
		});
	}
	$("#perso").mouvArretDrt();

	var arret = 0;

	$(window).keydown(function(event) {
		if (event.keyCode == '39') {
			if (arret == 0) {
				arret = 1;
				$("#perso").stopTime().removeClass('gch').mouvMarcheDrt();
			}
		}
		if (event.keyCode == '37') {
			if (arret == 0) {
				arret = 1;
				$("#perso").stopTime().addClass('gch').mouvMarcheGch();
			}
		}
	});
	$(window).keyup(function(event) {
		if (arret == 1) {
			arret = 0;
			$("#perso").stopTime().mouvArretDrt();
			$(".gch").stopTime().mouvArretGch();
		}
	});
});

J’ai posté cet article rapidement (je n’ai même pas fini d’habiller le personnage, qui utilise la base des personnages de Maple Story), j’éditerai pour plus de détails, et bientôt la suite pour aller plus loin dans la navigation façon jeu-vidéo.
Merci à Fabien pour les flags.