Sprite ambulanti lisce in HTML5 Canvas

Question

Sto sviluppando un gioco isometrico html5 su tela (& js). La mia griglia è composta da colonne (x) e righe (y).

Attualmente il mio giocatore può camminare attraverso la mappa, ma salta da una coordinata a una coordinata.

Sto provando a farlo camminare da una piastrella all'altra in modo uniforme, utilizzando un'animazione sprite. Ma non ho idea di come e non riesco a trovare articoli che trattino i meccanismi di questo, quindi ancora una volta mi rivolgo a te!

Quindi, se sai come farlo, o conosci un articolo o un tutorial che spiega questo, sarebbe fantastico!

Grazie in anticipo,

Nick VERHEIJEN

UPDATE: codice che sto usando ora di camminare il mio lettore

Player.move = function(direction) 
{ 
var newX = Player.positionX; 
var newY = Player.positionY; 

switch(direction) 
{ 
    case 'up': 
     Player.moveDirection = 'up'; 
     newY--; 
    break; 
    case 'down': 
     Player.moveDirection = 'down'; 
     newY++; 
    break; 
    case 'left': 
     Player.moveDirection = 'left'; 
     newX--; 
    break; 
    case 'right': 
     Player.moveDirection = 'right'; 
     newX++; 
    break; 
} 

Player.positionX = newX; 
Player.positionY = newY; 
} 

Nota: Mi risparmio la direzione il giocatore si sta muovendo in , così posso visualizzare l'immagine corretta.

Inoltre, non utilizzo librerie come EaselJS. Per la semplice ragione che non c'è quasi nessuna documentazione o esempi, quindi dovrei capire tutto da solo.

Answer 1

È necessario utilizzare il movimento basato sul tempo. Vedere il seguente articolo:

Using canvas to do bitmap sprite animation in JavaScript

Answer 2

Ho visto i suoi commenti su non usare Easel.js, ma forse è migliorata dopo l'ultimo guardato, come hanno 8 demo, 22 mini-demo, e collegamenti a 6 esercitazioni. (Io non sono un utente, ancora, solo scelte valutando per la grafica isometrica)

In ogni caso, se vale la pena un altro sguardo, scorrere verso il basso alla BitmapAnimation (# 18) di entrata in questa pagina: http://createjs.com/#!/EaselJS/demos/apitest