Animation avec JavaScript

Bonjour à tous,

Alors voila je me met a utiliser le framework kinetic.js pour faire des petit jeux ou tout simplement de l’animation.

Donc je me suis mis au sprite.
J'arrive bien a lancer un sprite simplement comme ceci:

Mais lorsque je veux lancer l'animation lors d'un event keyboard (dans mon cas les flèche directionelle) l'animation est toute moche.

Quelqu'un aurait il une idée ?

Salut !
Je ne connais pas Kinetic, mais je te conseil de séparer l’update de ton entité de la gestion des évènements clavier.
Pour cela maintient, en mémoire, les états des touches clavier, comme ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

var Keys ={ Up : "38", Down : "40", Left : "37", Right: "39" };   window.addEventListener('keydown', function( evt ) { Keys[evt.keyCode]=true; }, false);   window.addEventListener('keyup', function( evt ) { Keys[evt.keyCode]=false; }, false);

---

Pour l’update time tes déplacements et évite d’appeler plusieurs fois les méthodes start et stop ( peut être que celles-ci réinitialisent l’animation)

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

sonic.onUpdate = function(deltatime) { if(Keys[Keys.Right]) { if(!sonic.running) sonic.start();   sonic.attrs.x += 5*deltatime; }   if(Keys[Keys.Left]) { if(!sonic.running) sonic.start();   sonic.attrs.x -= 5*deltatime; }   if(sonic.running && !Keys[Keys.Left] && !Keys[Keys.Right]) sonic.stop(); }

---

Si Kinetic lève un évènement Update sur ton entité sonic vérifie que cette librairie utilise bien la fonction requestAnimationFrame, sinon branche-la comme ceci :

Code:

---

1 2 3 4 5 6 7 8 9

var lastTick = Date.now(); function animate() { requestAnimationFrame(animate); var tick = Date.now(); var dt = tick-lastTick; lastTick = tick; sonic.onUpdate(dt); }

---

Je vais regarder tout ca demain, histoire de bien comprendre le code que tu me propose. En tout cas merci d'avoir pris de ton temps pour répondre !
Je te tiens au jus ;)!