Advanced
Collision
by
Jeremy Moseley : 24 July 2004
In this tutorial I am hoping (yes hoping) to teach you to do
complicated collision. Now this tutorial is teaching advanced
detection. If you have never worked with collision detection
before I would recommend taking a look at
Kirupa's Tutorial. It
will get you started on the right track.
Now that you are familiarized with collision detection let's
take a look at what this tutorial will help you accomplish.
The purpose of this tutorial is to teach you a slightly
different method of collision detection than just simple
hitTest. We will use a method that involves outlining the
perimeter of an object with many smaller movieclips (the size
depends completely on how much detail you desire) and individually
checking those clips. You can see that I didn't use very much.
Here is an example you can see for yourself by dragging one
shape towards the other shape:
[ drag
one of the above shapes towards another ]
Here is How
Follow these steps to create something like the example above:
-
First off you will want to Create/Open a Flash
document.
-
Now that the easy stuff is out of the way your
ready to get started
First off create two odd looking shapes (no squares/rectangles)
allowed) and make them separate movieclips (F8). We'll name
them shape1 and shape2 (creative I know). Remember to assign
the clips instance names (shpae1 and shape2 respectively).
[ create two
oddly shaped movieclips named shape1 and shape2 ]
-
Now that you have your shapes to collision
test you will want to select one to outline. You will probably
want to select the least complicated one as it will be easier
to outline. I selected shape 1.
-
After you selected your shape you will want to
create your "perimeter" clip. So double click the shape you
chose to Edit the symbol and create a new layer called
perimeter:
[ create a new
layer and call it perimeter ]
-
Now that you have your new perimeter layer
it's time to add that perimeter. Ensure you lock the first
layer to prevent an accident and then select the first frame
of your newest layer. (It should be blank)
-
Now we will want create an empty movieclip
(Insert/New Symbol or Ctrl+F8). Call it perimeter. Place it on
the first frame of the perimeter layer and give it the
instance name "perimeter". This will contain all of the small
clips. Now edit the perimeter clip that we just created and
get ready to make the perimeter.
-
Now create a small symbol that can used to
outline the border of your shape. I chose a small rectangle
3x2 pixels in size. I named it perimeter_clip:
[ create a new
layer and call it perimeter ]
-
Now comes the really tedious part. We are
going to align an indefinite number of these tiny rectangles
end to end around the outside of our shape. Let's place the
edge of the rectangle right along the edge of our shape:
[ place as many
rectangles as needed ]
-
The rectangles do not need to be exactly lined
up (especially at 800% zoom) but you will want to close enough
that you can't see any gaps at 100%. Once you are satisfied
that the perimeter is complete your ready to start with the
actionscript.
[ perimeter
complete ]
-
So now your ready to do some programming.
Select shape 2 and open the Actions panel.
-
Enter this code (I'll elaborate later):
- onClipEvent(enterFrame)
{
- //collision detection
- hit =
false;
//set hit variable to false
- for(i
in _root.shape1.perimeter)
{ //loop
through all opjects in perimeter clip
- point
= new
Object();
//create a new generic object to
hold the coordinates
- point.x
= _root.shape1.perimeter[i]._x;
//x coordinate
- point.y
= _root.shape1.perimeter[i]._y;
//y coordinate
- _root.shape1.localToGlobal(point);
//convert coordinates from local
(within shape1) to global (_root)
- if(this.hitTest(point.x,
point.y,
true))
{
//check for collision between perimeter clip coordinates
and shape 2
- hit
=
true; //make our hit
variable true
- }
- }
- if(hit)
{ //check
out hit variable for a true or false collision detection
- this._alpha
= 50;
//do actions if they touching
- }
else {
- this._alpha
= 100;
//do actions if they aren't touching
- }
- }
- onClipEvent(mouseDown)
{
- if(this.hitTest(_root._xmouse,
_root._ymouse,
true))
{ //check
for mouse down ontop of this clip
- this.startDrag();
//start drag
- }
- }
- onClipEvent(mouseUp)
{
- stopDrag();
//stop drag on mouse up
- }
-
Now select shape 1 and open the actions panel,
entering this code:
- onClipEvent(mouseDown)
{
- if(this.hitTest(_root._xmouse,
_root._ymouse,
true))
{ //check
for mouse down ontop of this clip
- this.startDrag();
//start drag
- }
- }
- onClipEvent(mouseUp)
{
- stopDrag();
//stop drag on mouse up
- }
|
Note |
You will notice this code is identical to some of the code on
shape 2. This is just to allow you to move the clips around and
test the collision detection. It is not important for the
functionality of the collision detection. |
|
-
Now your all done the steps. I'll explain the
code in the next page.
On the next page, I will explain
what the code does.
|
page 1 of 2 |
|
|