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.

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.

• javascript
• html
• canvas
• sprite
• isometric

Share Improve this question Follow edited Mar 29, 2012 at 13:34 Nick Verheijen asked Mar 22, 2012 at 17:55 Nick VerheijenNick Verheijen 7711 silver badge1010 bronze badges 1

• Could you add some of your code to your question? That'll help - I had the same issue a while ago... – Barrie Reader Commented Mar 26, 2012 at 8:23

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

Using canvas to do bitmap sprite animation in JavaScript