Aksel Kornesjo

Hi everyone who reads my tutorials. Now I’ve jumped over to AS3 myself, and I think it’s better than as2, so hereby my tutorials will be in AS3. This tutorial is about really simple circular hit detection.

I’m making the flash file at the same time as I write this so there could be some errors in it. But I think I could.

First off. Open a ActionScript 3.0 .fla file. We’re not going to use classes in this tutorial, mostly because it’s simpler without them.

Then we could create a new circle movieClip by opening the code window by pressing F9.

And typing this in:

var circ1:MovieClip=new MovieClip();

Now we have a empty MovieClip there, we could position it to the middle:

circ1.x=275;
circ1.y=200;

And add it to the stage:

addChild(circ1);

But when you run this, it shows nothing. That’s because it’s just a empty movieClip. So lets add these lines to it:

var circle1r:uint=new uint(20);
circ1.graphics.beginFill(0xFF0000);
circ1.graphics.drawEllipse(-circle1r,-circle1r,circle1r*2,circle1r*2);
circ1.alpha=.5;

Now it has a fine looking circle. Its red and dandy. Yay.

But now lets see how we can see if something is colliding with it. Lets say that well see when the mouse pointer is colliding with it:

var vx:int=new int();//"velocity-x"
var vy:int=new int();//velocity-y
var len:int=new int();//Distance/Length
stage.addEventListener(MouseEvent.MOUSE_MOVE,mouse_move);//Adds mouse event listener
function mouse_move(event:MouseEvent):void {//The function for it.
	vx=circ1.x-mouseX;//Calculates velocity x
	vy=circ1.y-mouseY;//Calculates velocity y
	len=Math.sqrt(vx*vx+vy*vy);//sees the length.
	if (len<circle1r) {//if the distance is shorter than the circles radius, its a hit.
		circ1.alpha=1;//Putting the alpha to full.
                trace("*Collission*");
	} else {//else not.
		circ1.alpha=.5;//half of the alpha.
	}
}

Now you can see that the detection is very precise. But at this moment, we can’t do much with it. So lets continue With a collision detection between 2 circles, and that’s not so much harder.

The other circle will be like this:

var circ2:MovieClip=new MovieClip();
var circle2r:uint=new uint(30);
circ2.graphics.beginFill(0x00FF00);
circ2.graphics.drawEllipse(-circle2r,-circle2r,circle2r*2,circle2r*2);
addChild(circ2);

Add this code directly after where circ1 ends.
We also need to change the code in the mouse_move function. Change the whole function to this:

function mouse_move(event:MouseEvent):void {//The function for it.
	circ2.x=mouseX;
	circ2.y=mouseY;
	vx=circ1.x-circ2.x;//Calculates velocity x
	vy=circ1.y-circ2.y;//Calculates velocity y
	len=Math.sqrt(vx*vx+vy*vy);//sees the length.
	if (len<circle1r+circle2r) {//if the distance is shorter than the circles radius plus the moving circles radius, its a hit.
		circ1.alpha=1;//Putting the alpha to full.
		trace("*Collission*");
	} else {//else not.
		circ1.alpha=.5;//half of the alpha.
	}
}

The only thing that’s changed in this code, is that the green circle is moved to the mouse pointer.
And that instead of creating a collision at circ1’s radius, it adds both circles radiuses, and then sees if the distance is below that value.
It’s really simple.

But if it wasn’t simple enough, and you didn’t get it to work, here’s the source for it.

A follow up to this will come soon. Probably.

written by torskmunken \\ tags: 3, action, circle, circular, detection, flash, hit, script, tutorial