Problems with animating character movement

[Anzie356]

Hi!

I am pretty new to as3, and so I have encountered a problem that I cannot solve by my self.

I have searched other forums and this to see if I can find a solution, but have not found one yet.

I'm making a game where this character is supposed to move left, right,up and down. And so I've animated her walking in all different directions,

and also made the corresponding animations play whenever the right buttons are pushed.

Before I go any further, here's the code so far:

stop();

character.stop();

var vx=0;

var vy=0;

stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress);

stage.addEventListener(KeyboardEvent.KEY_UP, onKeyRelease);

stage.addEventListener(Event.ENTER_FRAME, onEnterThisFrame);

function onKeyPress(e:KeyboardEvent):void{

if(e.keyCode==Keyboard.DOWN){

vy=3;

character.gotoAndPlay("frontWalk");///character is a movieclip with different animated movieclips inside it.

}

else if(e.keyCode==Keyboard.UP){

character.gotoAndPlay("backWalk");

vy=-3;

}

else if(e.keyCode==Keyboard.RIGHT){

character.gotoAndPlay("leftWalk");

vx=3;

}

else if(e.keyCode==Keyboard.LEFT){

character.gotoAndPlay("rightWalk");

vx=-3;

}

}

function onKeyRelease(e:KeyboardEvent):void{

if(e.keyCode==Keyboard.DOWN){

character.gotoAndStop("frontStand");

vy=0;

}

else if(e.keyCode==Keyboard.UP){

character.gotoAndStop("backStand");

vy=0;

}

else if(e.keyCode==Keyboard.RIGHT){

character.gotoAndStop("leftStand");

vx=0;

}

else if(e.keyCode==Keyboard.LEFT){

character.gotoAndStop("rightStand");

vx=0;

}

}

function onEnterThisFrame(e:Event):void{

character.x+=vx;

character.y+=vy;

}

The code works fine if I hold a arrow key down, release it and wait for a second before i push the arrow next key. But if I don't wait a while before I push the next key, it will move the character with the standing still frame for a second and then animate the right walking animation.

Its like, the code can't catch up or something.

I hope I am making sense.

I would highly appreciate any help on this matter.

[kglad]

you should use an enterframe loop to update your character.  use your keyboardevent listener functions to assign variables that inform you enterframe loop listener function how to update your character.

[Anzie356]

could you be more specific as to what you mean?

I though I already did it with the onEnterThisFrame function?

[Nabren]

Use a dictionary to track key states and then do all your updating in the enterFrameHandler. Example:

import flash.events.KeyboardEvent;

import flash.utils.Dictionary;

import flash.events.Event;

import flash.ui.Keyboard;

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);

var keyState:Dictionary = new Dictionary();

function keyDownHandler(e:KeyboardEvent):void

{

          keyState[e.keyCode] = true;

}

function keyUpHandler(e:KeyboardEvent):void

{

          keyState[e.keyCode] = false;

}

function enterFrameListener(e:Event):void

{

          if (keyState[Keyboard.LEFT])

          {

                    // Do left

          }

          if (keyState[Keyboard.RIGHT])

          {

                    // Do right

          }

          if (keyState[Keyboard.UP])

          {

                    // Do up

          }

          if (keyState[Keyboard.DOWN])

          {

                    // Do down

          }

}

You will solve your issue and also be able to hold multiple keys down at the same time. If you don't want this - just make them else if instead with your priority:

import flash.events.KeyboardEvent;

import flash.utils.Dictionary;

import flash.events.Event;

import flash.ui.Keyboard;

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);

var keyState:Dictionary = new Dictionary();

function keyDownHandler(e:KeyboardEvent):void

{

          keyState[e.keyCode] = true;

}

function keyUpHandler(e:KeyboardEvent):void

{

          keyState[e.keyCode] = false;

}

function enterFrameListener(e:Event):void

{

          if (keyState[Keyboard.LEFT])

          {

                    // Do left

          }

  else if (keyState[Keyboard.RIGHT])

          {

                    // Do right

          }

  else if (keyState[Keyboard.UP])

          {

                    // Do up

          }

  else if (keyState[Keyboard.DOWN])

          {

                    // Do down

          }

}

[Anzie356]

Thanks for the idea! I think your code was a little bit to difficult for a newbie like me to understand, but seeing how it was structured, I thought I'd remake my code in another way which works absolutely fine now! I had to add the walking animations to the enterframe function, and the idle to the keyUp function. Now it does not flicker between idle and walking.

Here it is if anyone else will stumble upon the same issue:

stop();

character.stop();

var movingUp;

var movingDown;

var movingLeft;

var movingRight;

stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress);

stage.addEventListener(KeyboardEvent.KEY_UP, onKeyRelease);

stage.addEventListener(Event.ENTER_FRAME, onEnterThisFrame);

function onKeyPress(e:KeyboardEvent):void{

if(e.keyCode==Keyboard.DOWN){

movingDown=1;

}

else if(e.keyCode==Keyboard.UP){

movingUp=1;

}

else if(e.keyCode==Keyboard.RIGHT){

movingRight=1;

}

else if(e.keyCode==Keyboard.LEFT){

movingLeft=1;

}

}

function onKeyRelease(e:KeyboardEvent):void{

if(e.keyCode==Keyboard.DOWN){

character.gotoAndStop(1);

movingDown=0;

}

else if(e.keyCode==Keyboard.UP){

character.gotoAndStop(3);

movingUp=0;

}

else if(e.keyCode==Keyboard.RIGHT){

character.gotoAndStop(5);

movingRight=0;

}

else if(e.keyCode==Keyboard.LEFT){

character.gotoAndStop(7);

movingLeft=0;

}

}

function onEnterThisFrame(e:Event):void{

if(movingDown==1){

character.y+=4;

character.gotoAndStop(2);

}

else if(movingUp==1){

character.y-=4;

character.gotoAndStop(4);

}

else if(movingRight==1){

character.x+=4;

character.gotoAndStop(6);

}

else if(movingLeft==1){

character.x-=4;

character.gotoAndStop(8);

}

}

[Nabren]

That will work too - your new code is very similar to what I was suggesting. The main difference is I used a Dictionary to store key state and you just used 4 variables. A Dictionary is just a mapping of key/value pairs. You can consider the key amost like a variable name in a sense but it lives inside a different variable.