Sprites suaves para caminar en HTML5 Canvas

Question

Estoy desarrollando un juego isométrico html5 en lienzo (& js). Mi grilla consiste en columnas (x) y filas (y).

Actualmente mi jugador puede caminar por el mapa, pero salta de las coordenadas a las coordenadas.

Estoy tratando de hacer que camine de azulejo a azulejo de una manera suave, usando una animación de sprite. Pero no tengo idea de cómo y no puedo encontrar ningún artículo que cubra la mecánica de esto, ¡así que una vez más me dirijo a ti!

Así que si sabes cómo hacerlo, o si sabes un artículo o tutorial explicando esto, ¡sería genial!

Gracias de antemano,

Nick VERHEIJEN

ACTUALIZACIÓN: código que estoy utilizando ahora a pasear a mi jugador

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: Estoy ahorrando la dirección que el jugador se mueve en , entonces puedo mostrar la imagen correcta.

Además, no estoy utilizando ninguna biblioteca como EaselJS. Por la sencilla razón de que apenas hay documentación o ejemplos, tendría que resolver todo por mi cuenta.

Answer 1

Necesita utilizar el movimiento basado en el tiempo. Consulte el siguiente artículo:

Using canvas to do bitmap sprite animation in JavaScript

Answer 2

vi su comentario acerca de no usar Easel.js, pero quizás ha mejorado desde la última vez que miré, ya que tienen 8 demos, 22 mini-demos, y enlaces a 6 tutoriales. (No soy un usuario, sin embargo, sólo las opciones que evalúan para gráficos isométricos)

De todos modos, si vale la pena otra mirada, desplazarse hacia abajo a la BitmapAnimation (# 18) de entrada en esta página: http://createjs.com/#!/EaselJS/demos/apitest