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.
Help me out by voting for this tutorial
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!
hi dude! just wondering if you could help me make a click counter ( a variable number that increases by one on the click of a certain button or movie clip) if you could help me this would be great!
amazing script it helped me a lot ..i was stuck ..but now the picture is clear
I have been looking for this EXACT tutorial for well over a week and was beginning to have doubt if flash was for me.
I wouldn’t even usually comment on tutorials but this has helped me so much and got me out of such a deep hole that i think it is well worth the praise!
Thank you very much!
it works but when i turn my guy he is off from where he started, he doesnt just turn straight around but he kinda goes to the side too, how can i fix this?
nvm i got it!! the registration was not centered, thanks for the tut!
Hey, always remember to place ur registration point to the center when making a object or it would be difficult to work with. Btw if you are doing basic tweening, the registration points MUST be in the same postion on the object for BOTH key frames.
and btw dude gd job this helped me.
how do i make it flip instead of turning?
radius = player._width/2;
@CalebKim
To correct this double click your movieclip, and make sure your person is at the center of the lil cross on the screen. This is the point were it rotates, so if it isn’t on top of it will rotate it wrong.
also known as a registration point.
onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT))
{ if (hitTest(_level0.wall) == false) { _x = _x-10; } }
if (Key.isDown(Key.UP))
{ if (hitTest(_level0.wall) == false) { _y = _y-10; } }
if (Key.isDown(Key.RIGHT))
{ if (hitTest(_level0.wall) == false) { _x = _x+10; } }
if (Key.isDown(Key.DOWN))
{ if (hitTest(_level0.wall) == false) { _y = _y+10; } }
}
This code works fine exept for the fact that when i come in contact with the walls i cannot move anytime after that, unless the wall itself moves. So i am basically frozen when i touch a wall, anyone help?
It does’nt work. It says something about, “Statement must appeare with on/onClipEvent Handler…” or something?
Earlyer I posted a comment saying it does not work (THE COMMENT UP THERE). Sorry about that, it works now. I had just put the code in the wrong spot. :] Thanks for the awesome tutorial! ROCK-ON!
Hey, this is great. But I’ve had problems modifying it to fit my needs. I was wanting to make the character stay centred but the background move instead. So i did this:
while (MC_wall.hitTest(this._x, this._y+radius, true)) {
this._y–;
_root._y++;
}
And so on
But as soon as my character hits the wall he jumps out of the movieclip. If you cant find a solution I’ll just have to make do with no moving background. No big loss but it’s a feature I quite had my heart set on lol.
Thanks for the tutorial btw, it’s the only one I’ve found thats got this type of gameplay.
this._y–; *
Hmm… it’s not letting me put two -’s lol I guess you know what I mean
when i put the code in it gives me like 7 errors
None of these scripts work on me. I’m using Macromedia Flash 8 Pro.
hey Gah u must have placed the code in the MC ur supposed to put it in the timeline.