Smooth character movement using AS3

In this Actionscript 3 tutorial we will find out how to move a character with keys smoothly!

Alright, here is the normal movement using arrow keys.



This movement was described in one of my earlier tutorials about keyboard events. Here's the code I'm using for the example above (mc is the hero on stage):

var isRight:Boolean=false
var isLeft:Boolean=false
var isUp:Boolean=false
var isDown:Boolean=false


stage.addEventListener(KeyboardEvent.KEY_DOWN, downKey);
function downKey(event:KeyboardEvent){
 if(event.keyCode==39){
 isRight=true}
 if(event.keyCode==37){
 isLeft=true}
 if(event.keyCode==38){
 isUp=true}
 if(event.keyCode==40){
 isDown=true}
}
 
stage.addEventListener(KeyboardEvent.KEY_UP, upKey);
function upKey(event:KeyboardEvent){
 if(event.keyCode==39){
 isRight=false}
 if(event.keyCode==37){
 isLeft=false}
 if(event.keyCode==38){
 isUp=false}
 if(event.keyCode==40){
 isDown=false}
}

stage.addEventListener(Event.ENTER_FRAME, loop);
function loop(Event){
 if(isRight==true && mc.x<450){mc.x+=5}
 if(isLeft==true && mc.x>50){mc.x-=5}
 if(isUp==true && mc.y>50){mc.y-=5}
 if(isDown==true && mc.y<350){mc.y+=5}
 }

Now take a look at this example:

 

As you can see, the movement is more smooth, there is acceleration and the object doesn't immediately stop when you release a key.

To do this, we have to create a few more variables:

xspeed and yspeed, the variables that represent speed on two axises. When you hold right key, xspeed increases, making the object accelerate, and so on.
maxspeed - the maximum speed our character can move with.
slowdown - the value that slows down our character.

Here's the full commented code:

var isRight:Boolean=false
var isLeft:Boolean=false
var isUp:Boolean=false
var isDown:Boolean=false
var xspeed:Number=0
var yspeed:Number=0
var maxspeed:Number=8
var accel:Number=0.5

stage.addEventListener(KeyboardEvent.KEY_DOWN, downKey);
function downKey(event:KeyboardEvent){
 if(event.keyCode==39){
 isRight=true}
 if(event.keyCode==37){
 isLeft=true}
 if(event.keyCode==38){
 isUp=true}
 if(event.keyCode==40){
 isDown=true}
}
 
stage.addEventListener(KeyboardEvent.KEY_UP, upKey);
function upKey(event:KeyboardEvent){
 if(event.keyCode==39){
 isRight=false}
 if(event.keyCode==37){
 isLeft=false}
 if(event.keyCode==38){
 isUp=false}
 if(event.keyCode==40){
 isDown=false}
}

stage.addEventListener(Event.ENTER_FRAME, loop);
function loop(Event){
// if right is pressed and speed didnt hit the limit, increase speed
if(isRight==true && xspeed<maxspeed){xspeed+=2}
// if left is pressed and speed didnt hit the limit, increase speed (the other way)
if(isLeft==true && xspeed>-maxspeed){xspeed-=2}
// if speed is more than 0, decrease
if(xspeed>0){xspeed-=accel}
// if speed is less than 0, increase
if(xspeed<0){xspeed+=accel}

// just like x, but with y
if(isDown==true && yspeed<maxspeed){yspeed+=2}
if(isUp==true && yspeed>-maxspeed){yspeed-=2}
if(yspeed>0){yspeed-=accel}
if(yspeed<0){yspeed+=accel}

// apply speed to movieclip
mc.x+=xspeed
mc.y+=yspeed

// managing the walls
if(mc.x<30 && xspeed<0){mc.x=30}
if(mc.x>470 && xspeed>0){mc.x=470}
if(mc.y<30 && yspeed<0){mc.y=30}
if(mc.y>370 && yspeed>0){mc.y=370}

}

Thanks for reading!

Related:

Actionscript 3 keyboard event