(continues from page 1)

click in the movie, then use arrow keys to control the green square.
This prototype shows how to create a smoother animation

Download the source code of this example

SMOOTHER MOVEMENTS

Is that all? No, actually the sprite is moving in big steps (20 pixels each) and the animation effect really sucks!
It isn't really the effect you would like to see in one of your games!
We should slightly modify the prototype to have a smoother transition between each movement.

Even if the new code seems more complex, I've just splitted the old approach into two parts:

1) Get the user input if the sprite is not already moving
2) Move the sprite step by step in the desired way

What is going on is very simple: each time a key is pressed the sprite is animated to its next location and in the time taken
by this action all the other key presses are discarded.

Two new variables are introduced for th sprite: speed and steps.
The second one depends one the first one, as more speed means less steps to reach next location: in this case the
sprite speed is set to 2 so it will take 10 steps to cover 20 pixels.

NOTE: what about if speed is set to 3,6 or another number that doesn't exactly divide 20 ?
At the end of the animation you will not move by 20 exact pixels and this will cause the sprite to loose alignment from the other tiles. For the sake of semplicity I didn't implement this but it should be very simple: when all steps are taken you have
to adjust the sprite position to the next multiple of 20. We used this trick for DickDynamite and all the other sprites
in it so that we could use whatever speed value.

sprite.onEnterFrame = function()
{
	
	if ((Key.isDown(Key.LEFT)) && (map[this.py][this.px-1] != 1) && (!this.moving))
	{
		this.px--
		dir = "left"
		this.moving = true
	}
	if ((Key.isDown(Key.RIGHT)) && (map[this.py][this.px+1] != 1) && (!this.moving))
	{
		this.px++
		dir = "right"
		this.moving = true
	}
	else if ((Key.isDown(Key.UP)) && (map[this.py-1][this.px] != 1) && (!this.moving))
	{
		this.py--
		dir = "up"
		this.moving = true
	}
	else if ((Key.isDown(Key.DOWN)) && (map[this.py+1][this.px] != 1) && (!this.moving))
	{
		this.py++
		dir = "down"
		this.moving = true
	}
	
	if (this.moving)
	{
		this.moving = true;
		if (this.count >= this.steps)
		{
			this.moving = false
			this.count = 0
		}
		else
		{
			switch(dir)
			{
				case "left":
					this._x -= this.speed;
					break;
				
				case "right":
					this._x += this.speed
					break;
				
				case "up":
					this._y -= this.speed;
					break;
				
				case "down":
					this._y += this.speed;
					break;

			}
			this.count++
		}
		
	}
	
}