Geek Answers Handbook

Smooth Walking Sprites in HTML5 Canvas

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

Currently, my player can go on the map, but he jumps from coordinate to coordinates.

I try to make it go from tile to tile smoothly using sprite animations. But I have no idea, nor can I find articles on the mechanics of this, so once again I will turn to you!

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

Thanks in advance,

Nick Verhayen

UPDATE: The code I'm using now to walk around 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 keep the direction of movement of the player, so I can display the correct image.

, , EaselJS. , - , .

+5
2

, . . :

JavaScript

+4

Easel.js, , , , , 8 , 22 - 6 . ( , )

, , BitmapAnimation (# 18) : http://createjs.com/#!/EaselJS/demos/apitest

+2

More articles:


All Articles