Home » ActionScript 3.0, Flash CS5

HitTest AS3 for collision detection, Flash Actionscript 3

19 May 2011 No Comment
Share on Facebook

HitTest in as3 (Actionscript 3.0) is one of the essential part of game development in Flash Actionscript. HitTest is one of the built in function available in Flash actionscript to make the DisplayObject to interact with other objects. With hitTest() builtin method you can check whether a MovieClip or Sprite collides with each other or not.

Tutorial Difficulty:

Beginner to Intermediate

 

as3 hittest flash actionscript source files download

 

The below sections of how to use hitTest in as3 are covered in this tutorial.

  • Simple hittest or hitTestObject
  • Mouse hitTestPoint
  • BitmapData hitTest

 

Simple as3 hittest:

In as3 hitTest() method is renamed as hitTestObject(), this method is to evaluate whether two different objects collides or not.

hitTestObject: The hitTestObject function returns a boolean variable of either true or false depending on whether or not the two objects are hitting one another.

Simple hitTestObject Syntax:

Object1.hitTestObject( Object2 );

Note: Above built in method returns true or false, depend upon the collision between two Objects.

Simple as3 hittest output:

 

 

[Note the text in SWF changes depend on hit or miss]

 

Code for Simple hitTest in AS3

import flash.events.Event;

this.addEventListener( Event.ENTER_FRAME, handleCollision)

function handleCollision( e:Event ):void
{
	if(circle_mc.hitTestObject(rect_mc))
	   {
		   output_txt.text = "HIT"
	   }
	   else
	   {
		   output_txt.text = "MISS"
	   }
}

Explanation:

Listener added for “ENTER_FRAME” Event will be triggered on each and every time frame is loaded, the handler handleCollision is called. Basically

“ENTER_FRAME” Event makes the action to repeat continuosly. I am not going to explain the if statement here. Follow the link to learn basics of if statement.

circle_mc.hitTestObject(rect_mc) method check whether collision is happening or not. The result of this method will be Boolean expression, means “Yes” or ”NO” whether hit is made or not.

Mouse point hittest in as3 using hitTestPoint:

hitTestPoint() method is to check the overlapping of given point with display object.

Simple Syntax:

Object1.hitTestPoint(x:Number, y:Number, shapeFlag:Boolean = false)

X,Y represents a point in space, and shapeFlag is to check against the actual pixels of the object (true) or the bounding box (false).

Simple as3 hitTestPoint output:

[mouse over the circle and see the text change]

 

Code for Simple hitTestPoint:

import flash.events.Event;

this.addEventListener( Event.ENTER_FRAME, handleCollision)

function handleCollision( e:Event ):void
{
	var _point:Point = localToGlobal(new Point(mouseX,mouseY));

	if(circle_mc.hitTestPoint(_point.x,_point.y,true))
   {
	   output_txt.text = "HIT"
   }
   else
   {
	   output_txt.text = "MISS"
   }
}

 

BitmapData hitTest:

BitmapData hitTest is to check pixel level detection between bitmapData and Display object, or point and another bitmap data. BitmapData hitTest method help to detect pixel level collision and it is very useful for game developers. The method is very useful even if we have irregular shapes for hitTest.

In the code and example provided below we are going to see bitmapData collision in bitmap level for irregular objects.

Simple Syntax:

public function hitTest(firstPoint:Point, firstAlphaThreshold:uint, secondObject:Object, secondBitmapDataPoint:Point = null, 

secondAlphaThreshold:uint = 1):Boolean

Learn more about the syntax from here

We are going to see the collision between two bitmapData.

[Move the irregular object in Maze provided without touching the boundary]

 

Code for bitmap hittest:

//Thanks to mike chambers for the code.
//http://www.mikechambers.com

var redRect:Rectangle = redClip.getBounds(this);
var redClipBmpData = new BitmapData(redRect.width, redRect.height, true, 0);
redClipBmpData.draw(redClip);

var blueRect:Rectangle = blueClip.getBounds(this);
var blueClipBmpData = new BitmapData(blueRect.width, blueRect.height, true, 0);
blueClipBmpData.draw(blueClip);

addEventListener(Event.ENTER_FRAME, enterFrame);

function enterFrame(e:Event):void
{
	blueClip.x = mouseX;
	blueClip.y = mouseY;

	if(redClipBmpData.hitTest(new Point(redClip.x, redClip.y),
								255,
								blueClipBmpData,
								new Point(blueClip.x, blueClip.y),
								255

						  ))
	{
		trace("hit");
		redClip.filters = [new GlowFilter()];
	}
	else
	{
		redClip.filters = [];
	}
}

Code explanation:

The code “blueClip.x = mouseX; blueClip.y = mouseY;” moves the object along with mouse(Similar to mouse follow).

redClipBmpData.hitTest(new Point(redClip.x, redClip.y),
								255,
								blueClipBmpData,
								new Point(blueClip.x, blueClip.y),
								255

						  )

The above code checks pixel level collision between the redClip and blueClip bitmap data, this returns true to condition statement and apply’s glow filter.

 

 

as3 hittest flash actionscript source files download

 

GET THE UPDATES VIA EMAIL

We don't share your email anywhere, grab our rss via feedburner