[ssjskipp]

[h1]Hit Test[/h1]
Okay! This is the second tutorial! If you didn't take the first tutorial, I suggest you do now! Here's a link:
Basic Movement
And if you did take it, but didn't save the .fla, you can download my source (my .fla) of it here:
*note* Please don't download this unless you've 1. Taken the tutorial, or 2. Understand the script I wrote.
Basic Movement Source File

Well! now that that's all cleared up, I'll give you a quick bio of this tutorial:
     In my last tutorial, I explained the scripts used in basic movement, this was done by modifying the _x and _y position of a Movie clip (_x+=5; _x-=5; _y+=5 ;_y-=5). But I did this with some if statements. The strange thing is, I set 4 Boolean (true/false) variable, named _root.up, _root.down, _root.left, _root.right. I bet you're wondering why I set those...well I'll tell you in this tutorial.
     This tutorial will teach you how to use the hitTest command to make walls for the movement tutorial I made. This is done by making four if statement, and four movie clips.

hitTest Tutorial-
Okay, here we go! Let's start by opening my BasicMovement.fla that you either downloaded (I recommend you do that, link's at the top of the page), or saved.
Okay, now that you have Flash open, and the BasicMovement.fla, you'll notice we have our 'hero'. If  you care to test it (CTRL+ENTER), you'll notice that the arrow keys move him around, yay! But maybe we should give him some walls...because we don't want him going off the screen, and just stopping on the edge looks weird!

So, let's add a Movie clip.

Insert>New Symbol

It'll ask you to input the data, so make it look like this:

Okay, now that you have your wall Movie clip, let's make it be a 10x600 rectangle like this:
You can align it to the center like I did, but it's not important...
Okay, we have out Movie clip, so let's add it into our main frame with the hero! Go back to the main frame by clicking 'Scene 1':


Okay, now let's place our Movie clip onto the frame; let's make this one be out left wall, so it'll look like this:

If you notice I have a grid on, don't worry about it, I just like being neat ^_^, but if you must, CTRL+ALT+G, size 10x10.
Okay, we've got our left wall on, but oh no! There are no actions on it! *gasp*! Let's make it so when the hero hits our wall, it'll set the variable left to false, making this if statement on the hero:

Code:

if (Key.isDown(Key.LEFT)&&_root.left==true){
_x-=5
}

Not be true anymore, making the Movie clip  unable to move left!
So, here's the action we need to put onto the Wall Movie clip that's aligned to the left:

Code:

onClipEvent (enterFrame) {
if (hitTest(_root.hero)) {
_root.left = false;
} else {
_root.left = true;
}
}

Now, let me explain this:
onClipEvent (enterFrame) { This is saying as long as this Movie clip is on the frame, the actions will run!
if (hitTest(_root.hero)) This is where hitTest comes in, basically, it's self spoken, if one Movie clip hits another, then it does the action!
_root.left = false This one is the action, if the previous statement is true (if (hitTest(_root.hero))) then it sets the variable _root.left to false, making the hero Movie clip not move left!
But oh no! what if the Movie clip hero isn't hitting left, then what? It won't be able to move left anymore because it's still false!
So, we needed to add this stuff:
} else { Else basically takes the opposite of the if statement, example: if we said if (pie==true), then the else would mean if (pie == false).
_root.left = true; Now this script is nice and easy, it sets _root.left back to true!
Now, test the movie (CTRL + ENTER). Notice something wrong? It doesn't stop! =O Here's why:
The way hitTest works, is like this: if ([movieclip].hitTest([other movieclip)). So, I'm guessing you've noticed in the Properties tab:

Look to the left: you'll see something like this:

What the instance name is, it's like a reference. So go ahead and type the instance name 'hero', so then the hitTest will know what Movie clip we mean, when we say if (hitTest(_root.hero))! When you're done, it should look like this:


Good, now if you test it, it should work perfect...we just need to add some more walls! Here's what you do to make a top wall:

• CTRL + C or right click>copy on the Wall Movie clip
• CTRL + V or right click and paste on the main frame
• Now, go into Transform (CTRL+T) and rotate it 90°
• Next, position it to the top of the main frame, like this:
  

Now, we need to modify the actions, change the old action to this:

Code:

onClipEvent (enterFrame) {
if (hitTest(_root.hero)) {
_root.up = false;
} else {
_root.up = true;
}
}

Basically, all you did was copy a Movie clip, reposition it, and change the actions! Simple, eh? Okay, it's practically the same process to make a bottom and right walls, just copy, and past, the left wall, and align it to the right! Next, change the actions to this:

Code:

onClipEvent (enterFrame) {
if (hitTest(_root.hero)) {
_root.right = false;
} else {
_root.right = true;
}
}

Finally, we have our bottom wall. Copy and paste the top wall, and align it to the bottom, then, replace the actions to this:

Code:

onClipEvent (enterFrame) {
if (hitTest(_root.hero)) {
_root.down = false;
} else {
_root.down = true;
}
}

Now, let's test our walls, CTRL + ENTER and use the arrow keys!

Final product:
<a href="http://www.graphicaddicts.net/ssj/hitTest.swf" target="_blank">http://www.graphicaddicts.net/ssj/hitTest.swf</a>

If you like this tutorial, please Click Here to register.

Click the link below to download the Flash file for this tutorial.
hitTest Tutorial FLA

[ZT]

BWAHHHAHA we definatly need to make that zelda game after the economy one >=D

[ssjskipp]

Yessir!

[Blitz]

nice1 ssj

[ssjskipp]

=]

[Mr.Brightside]

Big thanks! :]

[ssjskipp]

No problem!

[Someone]

ssj, how can i make a hittest wall wich you cant go trough from all sides?

[ssjskipp]

well, using hitTest the way I illustrated here, it's pretty hard. Fortunately, there's also a different way to use hitTest, as in more parameters.

Try copy + pasting this to a movieclip, and make sure EVERY 'wall' is inside a movieclip with the instance name "hit_area", I just use that instance name here, so it'll correspond with the code, but you can change it if you feel so inclined (mind you, you'll have to change the code as well).

Code:

onClipEvent (load) {
//Sets the speed at which the MC will move
this.speed = 2;
//This is provided the 'center' of the MC's Registration
//is really in the center. (I'm using a square)
//In other words, it's taking the width of the MC, divided by 2
//and adding the speed (this is so I can add the MC's current _x
// to the width value, giving me the next point that it will move, make sence?
this.hWidth = this._width/2+this.speed;
//Same idea, just for height
this.hHeight = this._height/2+this.speed;
}
onClipEvent (enterFrame) {
//This is where the hitTest happens
//First, it checks to see if you're pressing the right arrow
//Next, it makes sure that the statement:
//"_root.hit_area.hitTest(this._x+this.hWidth, this._y, true)" is NOT true (hence the !)
//What that means is:
//If the movieclip, hit_area, if any fill (you know, paint brush, etc.) is touching the points
//given. So, if your _x and _y were 0, 0, and since I'm checking the RIGHT side
//of you (hence the + this.hWidth), and let's pretend you're 'this.hWidth' is = 10
//then it would check to see if hit_area is touching the point (10, 0). Make sence?
//That 'true' is what tells hitTest to check that point, etc etc.
if (Key.isDown(Key.RIGHT) && !_root.hit_area.hitTest(this._x+this.hWidth, this._y, true)) {
//Then I just add the _x.
this._x += this.speed
}
//Same idea, differnet points
if (Key.isDown(Key.LEFT) && !_root.hit_area.hitTest(this._x-this.hWidth, this._y, true)) {
this._x -= this.speed
}
if (Key.isDown(Key.UP) && !_root.hit_area.hitTest(this._x, this._y-this.hHeight, true)) {
this._y -= this.speed
}
if (Key.isDown(Key.DOWN) && !_root.hit_area.hitTest(this._x, this._y+this.hHeight, true)) {
this._y += this.speed
}
}

The general idea of it is like this:
Check to see if where you're ABOUT to go is hitting the wall, if so, don't go!
But since you're specifying a specific point, we can make it say "if you're going right, let's check right side only!" etc. etc.

[Someone]

I dont know why but it does'nt works the wall is moving to the right when im going right and the "hero" just goes trough...

[kevin1534]

i want to do that too but i copy the code from the other walls in the right dirrection but it doesnt works.. it just makes the new wall work and the other one (the one i took the code from) doesn't works... please help in an easy way cuz i dont understand anything of that you writted ssj...

[awesty]

@Someone: They are seperate MC's right?

@Kevin: You can't use the same code for each wall.

[ssjskipp]

Yeah, it has to be 1 movieclip named 'hit_area', and INSIDE that MC is shapes (drawings and such) that will act as 'walls'.

[Racoon]

Awesome tut man, it really helped me out a bit.
I do have one request though.
I have a movieclip and intergrated the frames of other movie clips for it to do different actions.
Now it can perform tasks such as kicking and punching.
I've created a hitTest for him and another MC to interact with each other, however
no matter what the frame he is the target acts the same to all images.
I only want a response when he is either kicked or punched, not when the
player is just standing still.
I would really appreciate the help.

[awesty]

well say the MC's kicking frame is 3, and punching is 4 you could do something like:

if(this._currentframe == 4 || this._currentframe == 3){
//hitTest
}