Smooth walking sprites in HTML5 Canvas

Question

I'm developing an isometric html5 game in canvas (& js). My grid consists of columns (x) and rows (y).

Currently my player can walk through the map, but he jumps from coordinate to coordinate.

I'm trying to get him to walk from tile to tile in a smooth fashion, using a sprite animation. But I have no idea how and I can't find any articles covering the mechanics of this, so once again I turn to you!

So if you know how to do this, or know an article or tutorial explaining this, that would be great!

Thanks in advance,

Nick Verheijen

UPDATE: Code I am using now to walk my player

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;
}

Note: I am saving the direction the player is moving in, so I can display the correct image.

Also, I am using no libraries like EaselJS. For the simple reason that there is hardly any documentation or examples so I would have to figure everything out myself.

Answer 1

You need to use time-based movement. See the following article:

Using canvas to do bitmap sprite animation in JavaScript