Moving sprites in a tile-based environment
[ July 18, 2003 ] by Marco Lapi, a.k.a Lapo
In this tutorial, two different prototypes illustrate how to move your sprites within a tile-based maze using a two dimensional array for detecting obstacles.

(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


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.

So now the main code looks like this:

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


The count variable just keeps track of how many steps have been done and the moving flag is a boolean variable
that tells if the sprite is moving or not.

Ok, that's all for now. For any questions about these tutorial post your questions in our fourms.

Name: Marco Lapi, a.k.a Lapo
Location: Fossano, Italy
Age: 34
Flash experience: started out with Flash 4 back in 1999
Job: web designer/developer
| Homepage | News | Games | Articles | Multiplayer Central | Reviews | Spotlight | Forums | Info | Links | Contact us | Advertise | Credits |

| | | |

gotoAndPlay() v 3.0.0 -- (c)2003-2008 gotoAndPlay() Team -- P.IVA 03121770048