RPG Character Movement – Part 1

June 13th, 2008

Today I am going to share a small sample of RPG type character movement using Flash Actionscript 3. I will say up front, this sample will look very boring, but this tutorial is for Actionscript 3 beginners. However, I will continue to build examples and more tutorials off this one. I also would like to point out that I will be writing this code in the main time line, which is something you should try not to do in Actionscript 3. So why am I writing the code on the main time line? In honesty, this is how I begin to program in Actionscript 3 to help understand the newer syntax and different structure and event handling and everything Actionscript 3 has to offer from Actionscript 2. I also would like to point out that I am not going to discuss all the syntax throughly (for the most part, but I will try my best), because if you want to program games, you will have to do some research and testing on “hows” and “whys” and “what the…?”.

So lets begin with the sample of what you will have by the end of this tutorial:

Again, it is basic, it is not much, but much can be built on little ground. Here is the script doing all the magic followed with an explanation:

[as]
// CREATE OBJECTS

// game object
var game:Object = new Object();
game.mc = new MovieClip();
game.sw = stage.stageWidth; // sw is short for stage/scene width
game.sh = stage.stageHeight;

// hero object
var hero:Object = new Object();
hero.mc = new Hero();
hero.speed = 2;

// key detection
var keys:Object = new Object();
keys[65] = keys[Keyboard.LEFT] = false;
keys[68] = keys[Keyboard.RIGHT] = false;
keys[87] = keys[Keyboard.UP] = false;
keys[83] = keys[Keyboard.DOWN] = false;

// START FUNCTIONS

// hero movement
function hero_move():void {

var left:Boolean = keys[65] || keys[Keyboard.LEFT];
var right:Boolean = keys[68] || keys[Keyboard.RIGHT];
var up:Boolean = keys[87] || keys[Keyboard.UP];
var down:Boolean = keys[83] || keys[Keyboard.DOWN];

if(left) {
hero.mc.x -= hero.speed;
hero.mc.rotation = 180;
} else if(right) {
hero.mc.x += hero.speed;
hero.mc.rotation = 0;
} else if(up) {
hero.mc.y -= hero.speed;
hero.mc.rotation = -90;
} else if(down) {
hero.mc.y += hero.speed;
hero.mc.rotation = 90;
}

}

// begins the game by setting up the mc’s
function game_begin():void {

// add game mc to stage
addChild(game.mc);

// add hero to game.mc, place in center of game screen
game.mc.addChild(hero.mc);
hero.mc.x = game.sw / 2;
hero.mc.y = game.sh / 2;

// add event listeners
stage.addEventListener(Event.ENTER_FRAME, game_loop);
stage.addEventListener(KeyboardEvent.KEY_DOWN, keys_down);
stage.addEventListener(KeyboardEvent.KEY_UP, keys_up);

}

// main game loop
function game_loop(e:Event):void {
// hero movement
hero_move();
}

// key down and up functions
function keys_down(e:KeyboardEvent):void {
if(keys[e.keyCode] !== undefined) {
keys[e.keyCode] = true;
}
}
function keys_up(e:KeyboardEvent):void {
if(keys[e.keyCode] !== undefined) {
keys[e.keyCode] = false;
}
}

// begin the game!
game_begin();
[/as]

When I create games in Flash, I declare an object for each “objet” I will be using in the game. I also declare these objects at the very top and very beginning since its nice to have them declared/created without having to create it in the middle of the scripts. Then I usually begin creating functions right after with the more “misc.” type of functions at the top (ie, a random number generator, frames per second counter, etc). At this moment, there is no misc. functions declared, just the functions needed to make our hero move. So lets look at the code more closely:

4. Declare a game object
5. Create a property mc which will hold our game’s Movie Clip on stage
6 – 7. Create a property sw and sh to hold the Stage’s width and height
10. Declare a hero object
11. Create a property mc which creates an instance of our Hero Movie Clip that is in the Library. The Hero Movie Clip is show below facing the direction “right”. With Flash, the rotation starts on this side
12. Create the property speed for our Hero

15. Declare a keys object.
16 – 19. Create several Boolean properties for what keys we have pressed. Right now we set them all to false
24. Create a function hero_move. We have it say void on the end because we are not returning anything from within the function
26 – 29. Declare local variables to capture the status/values of the keys values. So if keys[65] OR (|| – two pipe bars) keys[Keyboard.LEFT] is set to true, so will the local variable left. I do this primarily because it is short hand
31 – 43. Here we are doing several if and else if statements to find out what local variables are true. If left is true, then we have our Hero go left where its current position is minus its speed. Also, we have to rotate it 180 degrees. The same goes for the other directions that are set to true, except we have it move in a different direction and have it rotate accordingly.
45. Close the function hero_move
48. Create a function game_begin. This code will be initiated at the end of the script to set up the games Movie Clips and Event Listeners
51. Add our game’s Movie Clip to the stage
54. Add our Hero’s Movie Clip to the game’s Movie Clip
55 – 56. Set our Hero in the middle of the game’s Movie Clip
59. Add an Event.ENTER_FRAME Event Listener to the stage. So every frame it will execute the function game_loop
60 – 61. Add an KeyboardEvent.KEY_UP and KeyboardEvent.KEY_DOWN Event Listener to the stage as well. This will then have our stage listen for any key strokes
63. Close the function game_begin
66. Create a function game_loop. It is passed the argument/value Event which is a must have because this function is being called from the added Event Listener initiated above.
68. Execute the function hero_move. As mentioned above, this function will move our Hero depending on what keys have been pressed.
72 – 81. These two functions, keys_down and keys_up, are passed the Keyboard Event from added Event Listener we set up on lines 60 and 61. With the Keyboard Event, we get the keyCode and check if we have declared it within our keys object. If it exists, it will set it to true or false depending on if the key was pressed or released.
84. Initiate the function game_begin and have fun!

Here is the file for download

AS3 > Games > RPG

8 Responses to “RPG Character Movement – Part 1”

  1. wobalisk Says:

    is there anyway to make it accept wsad movement aswell?
    I have tried :

    keys[65] = keys[Keyboard.A] = false; // left
    keys[68] = keys[Keyboard.D] = false; // right
    // etc…

    but I get the error :
    1119: Access of possibly undefined property A through a reference with the static type Class.

    it does not seem to matter what I change the :
    keys[…] = etc
    part to and I can find nothing else wrong with it flash even suggests it as a possiblity when I type :
    Keyboard.
    and wait for the hint to come up, I just dont see what I am doing wrong

  2. admin Says:

    @ wobalisk

    The keys WASD are already set up. Good guessing with the Keyboard.A and Keybaord.D though. If you can’ get them to run properly in your flash player its probably because you haven’t disabled the shortcut keys.

    When I do keys[e.keyCode], I am getting the key code for the keyboard event. Here is a very useful link for keyCodes (its referenced through Javascript, but it works for all languages I believe). Here you can look for keys such as the arrow keys or what ever else you desire.

    http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/Javascript-Char-Codes-Key-Codes.aspx

    Let me know if this helps :)

  3. gry planszowe Says:

    very interesting site, i have bookmarked your blog for future referrence, thanks

  4. joe Says:

    wobalisk Says:

    is there anyway to make it accept wsad movement aswell?
    I have tried :

    keys[65] = keys[Keyboard.A] = false; // left
    keys[68] = keys[Keyboard.D] = false; // right
    // etc…

    Um it does already have the wasd movements

    its a double declartion and the keys[##] are the e.keyCode for wasd

    keys[65] = keys[Keyboard.LEFT] = false;
    keys[68] = keys[Keyboard.RIGHT] = false;
    keys[87] = keys[Keyboard.UP] = false;
    keys[83] = keys[Keyboard.DOWN] = false;

  5. Gregory Says:

    @joe
    Do you mean you want it to accept the arrow keys? It is already accepting the WASD keys. Here is what you can do for the arrow keys:

    keys[37] = false; // left
    keys[38] = false; // up
    keys[39] = false; // right
    keys[40] = false; // down

  6. Rich Says:

    Hey this is a good tutorial … nice and easy to understand. I gotta make a basic game by thursday and then a major assignment beginning Friday … this is a MASSIVE HELP …Thanks :)

  7. Mew Says:

    Where do I put this kind of code in flash develop?Simply in the Main.as?

  8. Mew Says:

    Does this even belong into the constructor?Or in the class definition?