How to code a Beat em up

Some of you may remember a long time ago I did write a tutorial on beat em up's, but it was in AS2, and had a few major flaws I picked up on, therefore it was removed.
I figure now is the time to update those tutorials in AS3. This isn't going to be a straightforward making-from-scratch tutorial, rather a guide to the techniques involved. You'll have to do the grunt work yourself- no easy download FLA's for the lazybones here!
-------------------------------------------------
ADVANCED KEY-CAPTURE
-------------------------------------------------

Second only to a real fighting game such as Street Fighter 2, I can't imagine which type of game requires more pinpoint, tight arcade controls than a beat em up. Besides knowing exactly when a key is pressed, after we know what key has been pressed, we will also want to know when it was last pressed (in milliseconds), if it is being held down, and if so for how long.

//////////KEYS
var KEY_UP = Keyboard.UP;
var KEY_DOWN =Keyboard.DOWN;
var KEY_LEFT = Keyboard.LEFT;
var KEY_RIGHT = Keyboard.RIGHT;
var KEY_ATTACK = 87;
var KEY_JUMP = 81;
/////////////////////////////////////////////////////////////////////

First we need to set up some constant variables for the key-codes. As you can see, with the directional controls I'm just using the arrow keys therefore I can use the globals Keyboard.UP etc. KeyCode 87 = "W", KeyCode 81 = "Q".

var keys = new Object();
keys[KEY_UP]={down:false,count:0,held_down:false,timerA:200,timerB:0,timeElapsed:0};
keys[KEY_DOWN]={down:false,count:0,held_down:false, timerA:200,timerB:0,timeElapsed:0};

keys[KEY_LEFT] = {down:false, count:0, held_down:false, timerA:200,timerB:0,timeElapsed:0};

keys[KEY_RIGHT] = {down:false, count:0, held_down:false, timerA:200,timerB:0,timeElapsed:0};

keys[KEY_ATTACK] = {down:false, count:0, held_down:false, timerA:200,timerB:0,timeElapsed:0};

keys[KEY_JUMP] = {down:false, count:0, held_down:false, timerA:200,timerB:0,timeElapsed:0};

Next I've made an Object that contains information on all keys used.
down = Is the key being pressed?
count= How many times has the key listener detected this key being held down?
held_down= er..is actually being held down?
timerA and timer B are used for checking the length of time it's being held down.
timeElapsed= might or might now be useful till later.


stage.addEventListener (KeyboardEvent.KEY_DOWN, downKeys);
stage.addEventListener (KeyboardEvent.KEY_UP, upKeys);

Our keyListeners. What is a listener? Think of it as a function that never stops working until you tell it to. In other words, remove it.

function downKeys (ev:KeyboardEvent)
{
if (keys[ev.keyCode] != undefined)
{
   keys[ev.keyCode].down = true;
   keys[ev.keyCode].count++;
   keys[ev.keyCode].timerA = getTimer() - keys[ev.keyCode].timerB;
   keys[ev.keyCode].timerB = getTimer();
}
};

function upKeys (ev:KeyboardEvent)
{
if (keys[ev.keyCode] != undefined)
{
   keys[ev.keyCode].down = false;
   keys[ev.keyCode].count=0;
   keys[ev.keyCode].held_down=false;
}
};

////////////////////////////////////////////////////////////////

downKeys listens for pressed keys, and upKeys listens for unpressed keys.
Okay so every listener triggers an event. Don't worry too much about what that means, anyway the ev:KeyboardEvent part means 'ev' equals the key that has been picked up by the listener. We can use it as a reference into our handy keys object.

if (keys[ev.keyCode] != undefined)
Only proceed if a key has been picked up by the listener.

keys[ev.keyCode].down = true;

This key has been pressed, so set down to true.

keys[ev.keyCode].count++;
Increment variable count- telling us how many times the listener has picked up this key being held. *NOTE* This doesn't work quite as simply as you might think, the AS3 Key Listener is a funny beast- to be explained later.

keys[ev.keyCode].timerA = getTimer() - keys[ev.keyCode].timerB;
getTimer() returns the number of seconds since the movie has been playing. TimerA is the now time. The old time - the timer value it gives us right now. Think about it, you'll get it!

keys[ev.keyCode].timerB = getTimer();
Set timerB, the then time.

So, now I can detect whether a key is being pressed with a line like:

if (keys[KEY_JUMP].down)
{
trace("JUMP has been pressed");
}

This replaces the old AS2 isKeyDown nicely. In fact, it's better isn't it? Not only can we check if the key is down, but we can also get more information about that key.

p.s.Don't forget your libraries at the top.:

import flash.events.KeyboardEvent;
import flash.events.Event;

Posted in: