How can I render player movement on a 2d plane efficiently?

Question

I'm prototyping a 2d HTML5 game with similar interaction to Diablo II. (See an older post of mine describing the interaction here: How can I imitate interaction and movement in Diablo II?)

I just got the player click-to-move system working using the Bresenham algorithm but I can't figure out how to efficiently render the player's avatar as he moves across the screen. By the time redraw() is called, the player has already finished moving to the target point. If I try to call redraw() more frequently (based on my game timer), there's incredible system lag and I don't even see the avatar image glide across the screen.

I have a game timer based off this awesome timer class: http://www.dailycoding.com/Posts/object_oriented_programming_with_javascript__timer_class.aspx

In the future, there will be multiple enemies chasing the player. Fast pace is essential to the experience.

What should I do?

Answer 1

You should probably cache your player move in an array, and step through it frame after frame. Let's say you store your Bresenham result in an array called path, you'll need an additional variable to hold the current position, let's call it pathMarker:

var path = new Array();
var pathMarker = -1;

Somewhere in you're update function, you'll need something like this:

// if our player clicked somewhere, compute a new path
if (click.x != -1 && click.y != -1)
{
    bresenham(path, click);
    pathMarker = -1;
}

// if there's a current path, move along it
if (path.length > 0)
{
    ++pathMarker;

    if (pathMarker >= path.length)
    {
        // reached the end of path, clear everything
        var path = new Array();
        pathMarker = -1;
    }
    else
    {
        // set the player at current path position
        player.pos = path[pathMarker]:
    }
}

Depending on the size of your grid, this could be too slow or too fast.

If it's too slow this means that instead of incrementing pathMarker one by one you'll have to use greater steps, e.g. replace ++pathMarker by:

    var speed = 4; // for instance
    pathMarker += speed

If it's too fast you can step only once in a while instead of each frame:

    var framesForAMove = 4; // for instance
    if ((frameCount % framesForAMove) == 0)
    {
        ++pathMarker;
    }

NB: using discrete grid positions directly isn't a really good idea in a lot of contexts: variable framerate, variable player speed, etc. But it's simpler to grasp, and quick to code, so very appropriate for prototyping.