Mariam Dholkawala's Blog

Flash Lite Gaming Tutorial : Continuous KeyPress for Moving Characters in Side-Scrollers

Action or adventure based games may require characters to move around the screen. We use the Key Object for interacting with the game characters. While keypresses and keyreleases respond quickly when the swf file runs on the desktop, these events work differently for swfs running on a mobile. A valid reason is that mobiles have lesser processing speeds thus making it slower for them to recognize keypresses or keyreleases before implementing them.

Thus, when you try to move a character with a keypress, you will observe a slight pause before the character starts moving. A solution that I mostly use is, making the keypress event interact with a loaded Movieclip.

The Key Events

var keyList:Object = new Object();
var dir:Number = 0;
var keyDownState:Boolean = false;

We begin by declaring 3 variables –
keyList of Object type to receive the KeyDown and KeyUp notifications,
dir of type Number to store the direction of the character based on the keys pressed
keyDownState of type Boolean to check whether the key is pressed down or up.

keyList.onKeyDown = function(){
  if(not keyDownState){
    var keyCode = Key.getCode();
    if(keyCode == 37){
      dir = -1;
    }else if(keyCode == 39){
      dir = 1;
    }
    keyMover.gotoAndPlay(2);
    char.gotoAndPlay(2);
    char._xscale = 100*dir;
    keyDownState = true;
  }
}

keyList.onKeyUp = function(){
  dir = 0;
  keyDownState = false;
  char.gotoAndStop(1);
  keyMover.gotoAndPlay(1);
}

The code above declares 2 events – The KeyDown event and the KeyUp event.

A KeyDown event is executed when a key is pressed. This event runs a block of code as long as the key remains pressed. Our code on the other hand, runs the statements only once and not continuously because the condition (if not keyDownState) fails to be recognized as false after its first run. The reason why we have set this condition is, because we don’t want to loop through the same code multiple times for the same key pressed.

var keyCode = Key.getCode();

The getCode() method return the key code value of the last key pressed. Based on the value returned, the direction of the character is set. This code checks for only 2 keys – the Left key and the Right key. Any other key pressed is ignored.
keyMover.gotoAndPlay(2);
char.gotoAndPlay(2);
char._xscale = 100*dir;

If you look at the script above, in the first line keyMover refers to a loaded MovieClip on the stage that contains the script to move the character.

The second line refers to the character MovieClip. This MC initially has the character in a standing posture on frame 1. When a key is pressed the character moves to the next frame which has it animating.

Lastly, we need to flip the character based on the key pressed. So we use the _xscale property to flip the character based on the key pressed.

A KeyUp event is called when a key is released. In our code, all the variables are reset to their original value and Movieclips proceed to halt on the first frame of their timeline at the time of a KeyUp event.

KeyMover Movie Clip

The KeyMover MovieClip consists of 3 frames

Frame 1
var mc:MovieClip = _root.char;
var dir:Number = 0;
var speed:Number = 3;
stop();

The first frame sets the necessary variables and also sets a reference to the character MovieClip on stage.

Frame 2
dir = _root.dir;
if(mc._x < mc._width/2 and dir < 0){
  dir = 0;
}else if(mc._x > (Stage.width – mc._width/2) and dir > 0){
  dir = 0;
}
mc._x += speed*dir;


The second frame sets a condition to check to see if the character is moving outside the screen area. If the condition is met to true then the direction is set to 0

Finally the character moves at a value which is direction X velocity

Frame 3
gotoAndPlay(2);

The third frame loops the Movieclip between frame 2 and 3.

The Final Run

Now when you play this in the emulator or the device the character will respond immediately to the keypressed without any pause.

The source file has been uploaded for your reference here

Labels: Flash Lite, Flash Lite Tutorial

posted by Mariam Dholkawala @ 10:55:00 PM