Tuesday, 18 August 2009

Collision Detection in Actionscript 3

In Actionscript 3.0 there are two methods to detect collisions which are: the hitTestObject and the hitTestPoint. Firstly, the hitTestObject detects whether two display objects have collided or overlapped. I have previously made a tutorial on the hitTestObject which can be found here. The hitTestPoint detects whether a display object has intersected with a specified x & y point.

This tutorial will show you how to detect collisions using the hitTestPoint method which will detect whether the mouse’s x and y position has collide with an object. I have used a simple circle for the object in this tutorial, but any object can be created.


Collision Detection in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select the oval tool and draw a simple circle shape on the stage like below. I have used #0000FF colour, but you can use whatever colour you wish.




Step 2

Select your circle shape and convert it into movie clip (F8). Then give it the instance name: ‘ball_mc’ as shown below.




Step 3

Select the text tool with dynamic text and drag a textbox below your circle like below:



Now give the dynamic text box the instance name: “hitText_txt”.


Step 4

On the timeline create a new layer called “Actions”. Select the first frame and hit F9 to open up the actions panel and enter the following code:

//1.
stage.addEventListener(Event.ENTER_FRAME, detectCollision);

//2.
function detectCollision(event:Event) {
if (ball_mc.hitTestPoint(mouseX,mouseY,true)) {
hitText_txt.text="Ball hit";
} else {
hitText_txt.text="No hit";
}
}

Code:
1. This adds an event listener to the stage with the enter frame event and the detectCollision parameter.
2. This function checks whether the mouse’s x & y position has collide with the ball object. The third parameter for the hitTestPoint method is the shapeflag which checks for the actual pixel of an object (true) or the bounding box (false).


Step 5

Test your collision detection Ctrl + Enter. Now move your mouse over the ball and you should see a different message.



You should now be able to perform collision detection in Actionscript 3.0.

9 comments:

Ram 17 December 2009 at 20:33  

i get dis wen i run de code

1120: Access of undefined property ball_cd.

wat is de problem ??

iliketo 18 December 2009 at 02:51  

@Ram

Take a look at this post. You have not given the correct instance name, or have left the instance name field empty.

r3dux 20 January 2010 at 18:06  

Thanks for the how-to, much appreciated.

I actually had to modify the code a little to get it to work, but it's probably me doing something daft.

Anyways, to get the dynamic status text to display I created a hitText_mc instance of the hitText symbol, then added the dynamic text field to the movie clip as hitText_txt, and finally called hitText_mc.hitText_txt.text = "Ball hit!" etc.

Again, many thanks & keep up the good work!

Neda' 9 March 2010 at 04:20  

1120: Access of undefined property hitText_txt.text="hit";

what do u mean with dynamic text??

iliketo 9 March 2010 at 10:40  

Take a look at this tutorial

santossays 10 November 2011 at 01:49  

first off THANK YOU for making easy no bullsh#t code!!

here's my problem.
1. i followed your tutorial so i could convert my mouse into an object
2. now i'm following this tutorial so that my when my mouse touches a new object i will advance to a new frame
3. it works! but i get error
"
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at butterfly_fla::MainTimeline/detectCollision()

stop();
"
here's my code.

//1.
stage.addEventListener(MouseEvent.MOUSE_MOVE,followBall);

//2.
function followBall(event:MouseEvent):void {
handmove.x=mouseX;
handmove.y=mouseY;
}
//1.
stage.addEventListener(Event.ENTER_FRAME, detectCollision);

//2.
function detectCollision(event:Event) {
if (butterfly.hitTestPoint(mouseX,mouseY,true)) {
gotoAndStop(3);
}
}

thanks!!!

iliketo 11 November 2011 at 02:12  

@santossays

If you go to frame 3 on the main timeline, you will not be able to access the Actionscript code from frame1. So, I suggest you add whatever you want to go to frame 3 into a movie clip.

eg. youMovieClip.gotoAndStop(3);

gbs 6 January 2012 at 20:18  

I have been following this and you're other 'linedrawing' codes. I am trying to work a line drawing movie (use your mouse to draw your path over a background picture), that should you stray onto certain areas, the drawing would stop and the hidden danger becomes visible. Would you recommend colision detection for this or something else?
Cheers for any help.

iliketo 7 January 2012 at 03:27  

@gbs

Yes, this would work.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP