Following some requests I now bring you a flash tutorial on more advanced flash game movement and hit testing. It will help if you have completed the Basic Game Movement tutorial, as it is this I am going to be expanding on. Your final result will look similar to this:
STEP 1
Open a new actionscript file, set the framerate to 30 and rename layer 1 to ’stuff’. Create a new layer called ‘actions’ and lock it.
First off, we need to create an object on stage which reacts to the arrow key presses. Draw a shape, man, graphic whatever you fancy on frame 1 of the stuff layer, ensuring it has a ‘front’ and ‘back’, so not just a circle. I drew a man, AKA The DUde:
Select all and press f8 to convert to a movie clip. Give this an instance name of ‘MC_dude’. On frame 1 of the actions layer, add the following code:
MC_dude.onEnterFrame = function(){
if(Key.isDown(Key.UP)){
this._y -= 10;
}
if(Key.isDown(Key.DOWN)){
this._y += 10;
}
if(Key.isDown(Key.LEFT)){
this._x -= 10;
}
if(Key.isDown(Key.RIGHT)){
this._x += 10;
}
}
Press CTRL + Enter, and your movie should work like below:
(Click on swf then use arrow keys)
Okay, so something is not quite right here. As I have drawn a character, it is easy to see which direction he should be facing. We will now add code to handle the rotation of ‘MC_dude’ to ensure he can see where he’s going…
STEP 2
Adding rotation can be easily achieved. We need to add a rotation command to each keypress to make our dude face the correct way using ‘_rotation’. Add the following to your code:
MC_dude.onEnterFrame = function(){
if(Key.isDown(Key.UP)){
this._y -= 10;
this._rotation = 180;
}
if(Key.isDown(Key.DOWN)){
this._y += 10;
this._rotation = 0;
}
if(Key.isDown(Key.LEFT)){
this._x -= 10;
this._rotation = 90;
}
if(Key.isDown(Key.RIGHT)){
this._x += 10;
this._rotation = -90;
}
}
you may need top adjust the angles, dependant on the direction of your starting clip. Test your movie, it should now work like this:
(Click on swf then use arrow keys)
STEP 3
Now we will add hit testing. On the stuff layer, draw a 10 px black line towards the bottom of the stage. Press f8 to convert this to a movieClip called ‘MC_wall’ with an instance name of ‘MC_wall’.
Your stage should now look like this:
As it suggests, hit testing detects when one movieclip collides with another, then performs an action. Add the following at the top of your code within the onEnterFrame function:
radius = 8;
I have set mine to 8 as that is the radius of my movieclip, yours may be different.
Next, add the following code within the onEnterFrame function:
while (MC_wall.hitTest (this._x, this._y+radius, true)){
this._y--;
}
while (MC_wall.hitTest (this._x, this._y-radius, true)){
this._y++;
}
while (MC_wall.hitTest (this._x-radius, this._y, true)){
this._x++;
}
while (MC_wall.hitTest (this._x+radius, this._y, true)){
this._x--;
}
While creates a loop, so the hittest is constantly being checked for. We are declaring the hit test ( ‘MC_wall.hitTest’ ) then checking if the dude is touching any sides within its radius ( ‘(this._x, this._y+radius, true)’ ). If it is, then the ‘MC_dude’ movieClip is pushed back ( ‘this._y–;’ ). This is then repeated for all sides of the movieClip. Your final code should look like this:
MC_dude.onEnterFrame = function(){
radius = 8;
if(Key.isDown(Key.UP)){
this._y -= 10;
this._rotation = 180;
}
if(Key.isDown(Key.DOWN)){
this._y += 10;
this._rotation = 0;
}
if(Key.isDown(Key.LEFT)){
this._x -= 10;
this._rotation = 90;
}
if(Key.isDown(Key.RIGHT)){
this._x += 10;
this._rotation = -90;
}
while (MC_wall.hitTest (this._x, this._y+radius, true)){
this._y--;
}
while (MC_wall.hitTest (this._x, this._y-radius, true)){
this._y++;
}
while (MC_wall.hitTest (this._x-radius, this._y, true)){
this._x++;
}
while (MC_wall.hitTest (this._x+radius, this._y, true)){
this._x--;
}
}
Test your movie and try to go through the wall, if the steps were completed correctly you should no longer be able to pass through, from any side.
I hope this has helped those who needed it, as always if you have a question just post below and i will be more than happy to help 
The Dude
Did this tutorial help you? If so, click the bookmark button, stumble me, add me to your twitter and tell your friends! Alternatively, sign up and leave a comment!
Not what you were looking for? Then leave a comment or email me and we’ll get you the tutorials you need.
Did this post help you? If so help us continue to grow and Digg this page or Share on Twitter!
If you haven't already, sign up to our RSS feed or register to recieve updates direct to your email!
Damn good tutorial
If you wanted to create multiple walls with all different sizes/radius, what would be an easy way to duplicating this “wall_mc” without having to write code for each individual wall?
Hi Jester,
Just double click on wall_MC to enter the clip, then draw more walls! The caracter will only react to the ‘filled in’ parts of the movieclip, so to speak. Test it, go into the MC and draw another wall behind the dude, then hit ctrl + enter. You can walk in between the two walls, but u cannot go through them.
The Dude
Awesome, thanks alot.
Hi,
I’m having a bit of trouble with the hitTest-function. I want it to take me to the second frame when the character is hit by an object, but clearly adobe doesn’t want me working with flash
I’ve tried the GoToAndStop thingy but it doesn’t work.
hey dude, damn good tut, i must say
thxx
[...] HitTest and Advanced Game Movement Learn basic collision and game movement in this concise tutorial. [...]
Hi!
I have the same problem with Jonathan.V.
I don’t know what to do … gotoAndStop() doesn’t work.
PS. very good tutorial
Excellent tutorial, one of my favorites I’ve seen so far. I was having luck with the horizontal walls but how about putting vertical walls to keep the character in the room?
What code would we have to append to actionscript?
thnx
Hey, I used this tutorial on Flash 2.0 and I can get my character to move, but when i use the wall hit scripting, it doesn’t seem to work.
I am using different names for my items though. I have no clue what I’m doing wrong. Is the wall hit script on the actions layer as well? I put it there and tried putting it on the wall… both don’t seem to work…
Hey, I used this tutorial on Flash 2.0 and I can get my character to move, but when i use the wall hit scripting, it doesn’t seem to work.
I am using different names for my items though. I have no clue what I’m doing wrong. Is the wall hit script on the actions layer as well? I put it there and tried putting it on the wall… both don’t seem to work…
I think you should change the radius to something like
xradius = this._width/2;
yradius = this._height/2;
and put it in place…
the new code:
MC_dude.onEnterFrame = function(){
yradius = this._height/2;
xradius = this._width/2;
if(Key.isDown(Key.UP)){
this._y -= 10;
this._rotation = 180;
}
if(Key.isDown(Key.DOWN)){
this._y += 10;
this._rotation = 0;
}
if(Key.isDown(Key.LEFT)){
this._x -= 10;
this._rotation = 90;
}
if(Key.isDown(Key.RIGHT)){
this._x += 10;
this._rotation = -90;
}
while (MC_wall.hitTest (this._x, this._y+yradius, true)){
this._y–;
}
while (MC_wall.hitTest (this._x, this._y-yradius, true)){
this._y++;
}
while (MC_wall.hitTest (this._x-xradius, this._y, true)){
this._x++;
}
while (MC_wall.hitTest (this._x+xradius, this._y, true)){
this._x–;
}
}
it better i think…
Angel007,
Increase the value of the radius (e.g. radius = 12;)
I used this system for a platformer, and if I make my platforms too small the guy falls through, why?
you are a bloody legend. this is EXACTLY what i needed. everyone else puts their script on mc’s.
Jonathan.V,
For future reference, if your Flash has the default actionscript settings, built-in commands turn blue when written.
it’s gotoAndStop. Your capitalization was wrong, that’s all.
Hey, my guy when I change a direction changes his position about 1cm from where he was before I touched an arrow. Plz Help!