Game Tutorial: Part 2
  This chapter covers placing of a character and movement in a tile based world.
<-- Game Tutorial: Part 1 - Tiles                                                                Game Tutorial: Part 3 - Collision Detection-->


Game Tutorial: Part 2 - Character and Basic Movement

This is chapter two in my series of game tutorials. The previous chapter can be found here. In this chapter I will be covering character placement and movement and a couple of different methods to do this.

Character Placement

This is pretty basic and 100% up to you and the needs of your game. If you generated a random map you might want to place your character randomly. If you manually created your map you might want to randomly place the character anyway. Or you can manually place the character. Again, totally up to you and your needs.


Random is pretty straightforward. We are going to generate a random set of x/y coordinates within our map, check to make sure that square isn't a wall and place the character:

      var x = Math.floor(Math.random()*map_width);
      var y = Math.floor(Math.random()*map_height);

      while(map[y][x] == 1) {
            x = Math.floor(Math.random()*map_width);
            y = Math.floor(Math.random()*map_height);

      character._x = x*tile_width;
      character._y = y*tile_height;

Pretty small and simple code. The first two lines find random x/y coordinates. Note that I used the Math.floor function to find the integer value. This is because all the coordinates in our map are integers and we are looking to check if the new random position is a wall or not.

Next I loop till the random location found is not a wall on the map. Then I assign the new location to our character (note that I took into account the width/height of our tiles).

So this should out put you something like this (our character is the red box):


Manual Placement

The other option, of course, would be to decide the characters position manually. This would be as simple as choosing two coordinates and using them, though this probably isn't a good idea with a randomly generated map, but it's up to you.


Now comes the fun part. Making our character respond to the key board and will of the user. There are a couple of ways to do movement and it depends on your needs.

Angle/Velocity Vectors

My favorite method is angle and velocity based movement. This allows the character to move any direction and also makes the motion smooth and jerk free. However, this is normally only useful in vehicle based games (cars, tanks, etc).

This method works by, first, having an angle in which to travel and a specific velocity to travel. Then it uses trig to transform this into x and y velocities and we use those to move our character:

     character._rotation = Math.random()*360;
     character.velocity = Math.random()*10;

     character.onEnterFrame = function() {
          var x_vel = Math.cos(this._rotation*(Math.PI/180))*this.velocity;
          var y_vel = Math.sin(this._rotation*(Math.PI/180))*this.velocity;

          this._x += x_vel;
          this._y += y_vel;

This code works by first generating a random angle/velocity (for examples sake) and then (within the characters onEnterFrame function) it does the trig calculations and applies the specific x/y velcoities to the x/y coordinates to provide the illusion of motion. Note that I converted the _rotation from degrees to radians using this._rotation*(Math.PI/180)because flash does trig calculations in radians.

This should give you something like this:

So now we have a character that moves with a velocity and angle, but with no user control it's not really helpful.

Keyboard Control

 The most important piece of keyboard control is the Key.isDown function. This checks if a certain key is down and, combined with an if statement, allows you to do an action:

     if(Key.isDown(Key.UP)) {
          this.velocity += .5;
     if(Key.isDown(Key.DOWN)) {
          this.velocity -= .5;
     if(Key.isDown(Key.LEFT)) {
          this._rotation -= 5;
     if(Key.isDown(Key.RIGHT)) {
          this._rotation += 5;

So you can see it's very easy to use the keyboard to adjust our velocity and _rotation variables. If we add this to our code we should get something along the lines of this:


Tile-Based Movement

Another method of movement would be tile based movement. This moves on a per tile basis and never strays from the coordinates on the map. This is more common in a game where the character is a person or something like that that dosen't require movement based on steering.

The way this works is by moving the character a whole tile in stead of just parts. Normally you would end up with eight directions of movement (up, down, left, right and the four diagonals). This is easily achieved like this:

     if(Key.isDown(Key.UP)) {
          this._y -= tile_height;
     if(Key.isDown(Key.DOWN)) {
          this._y += tile_height;
     if(Key.isDown(Key.LEFT)) {
          this._x -= tile_width;
     if(Key.isDown(Key.RIGHT)) {
          this._x += tile_width;

As you can see it's pretty straight forward. Press a key, and move one tile in the appropriate direction. This will output something like this:

So those are the basic types of movement I like to use. As you can see in my tank game, I used the angle/velocity just because it fits the idea of tanks the best.
In the next chapter I will cover collision detection, because all the movement is no good if we can move right through the walls: Game Tutorial: Part 3 - Collision Detection