Games Programming - 2

Player Movement

In this tutorial we will look at placing a 'player' character on screen and allowing a user to move that character around the screen using the keyboard arrow keys.

In order to achieve player movement, there are two things we have to think about - how to detect keyboard presses and how to move the player character.

Creating the player character

1. Open Flash and create a new movie.

2. Draw an object in the centre of the screen - a filled rectangle or oval will do. This will represent our player character. Select the object and convert it to a Movie Clip symbol.

3. Select the player character on the stage, and open the Properties Panel. Name the instance of this symbol 'player'.

   Adding a Clip Event

4. Now open the Actions Panel. In here, we will write Actionscript that is 'attached' to the movie clip.

   This is quite similar to attaching code to a button. The main difference is that the code must occur in what is called a 'clip event'. The code inside a clip event will only run when that clip event occurs. Just like a button's code will only run when the mouse clicks the button. The most frequently used clip event is 'enterFrame'. This is used when we want the code to run continuously, i.e. it runs every time a frame starts playing (which is continuously in a Flash movie).

   Okay, lets set up an 'enterFrame' clip event, attached to the player character. To do this, add the following code to the Actions Panel.

   onClipEvent(enterFrame){
   
   }

   Any code that we want to run continuously (at the frame rate of the Flash movie) must be placed inside the curly brackets.

5. To detect a keyboard press, you can use the 'Key' object and the 'isDown()' method. We will wrap this up in a conditional statement that says something like 'if user presses the up arrow, move the player character up'. Place the following code inside the enterFrame clip event.

   if (Key.isDown(Key.UP)){
   
   }
   

6. Next thing to do is add the code that will move the player character. To do this, we must change the _y property, which relates to the Y coordinate of the object on the screen. We will reduce the _y property by 10, which will move the player character 10 pixels up the screen.

   Here is the code to do that - place it inside the curly brackets of the Key.isDown() method.

   this._y-=10;
   

   In summary, here is the entire code that should be attached to the player character instance:

   onClipEvent(enterFrame){
   	if (Key.isDown(Key.UP)){
   		this._y-=10;
   	}
   }
   

7. The next step is obviously to detect the pressing of the keys DOWN, LEFT and RIGHT and to move the player character in the appropriate direction. I'll leave you to figure out how to do that for yourself...

Additional things to try

1. As it stands, you can keep pressing an arrow key and the player caharcter will just move right off the edge of the screen. Think about how to stop this happening - limit the X and Y movement using conditional statements.

2. How about diagonal movement? How could this be achieved?

3. Could you animate the player character so that when you move in a particular direction, the character faces the way it is moving?