moock>> web>> flash>> actionscript>> collision detection

MACROMEDIA FLASH

ACTIONSCRIPT: COLLISION DETECTION

checking to see if two objects bang into each other...what could be more noble? collision detection in flash essentially works like this:

we start with two movie clips. in each movie clip we place an object (for the purposes of our examples, a circle or a square). by using shapes inside clips rather than raw shapes we gain access to the properties we need in order to check for collision.
we initialize the necessary properties of the objects (height, width, radius, etc).
we create a looping movie clip which continuously calls a collision-checking subroutine. (i refer to this kind of subroutine-caller as a "process clip".)
we create a subroutine that evaluates whether or not the two objects are in contact (for normal collision this means the objects are simply overlapping; for containment, one object must be entirely encompassed by the other).
if the objects are overlapping at all, a collision occurs; if object 1 completely overlaps object 2, a containment occurs.
if the objects are not overlapping, no collision and no containment occurs.

there are lots of kinds of collision, all of which provide varying levels of accuracy and realism depending on the physics they use to calculate the overlap. for most purposes in flash, primitive shapes will provide the level of precision we need. i'll demonstrate the approach for circle collision and square collision. typically you'd use one of these shapes as a mask over your real object. since collision detection is a common programming issue, i won't go into great detail about the actual calculations, i'll just describe the general approach.

here are a couple things to note if you're planning on implementing collision detection based on these examples:

to keep the programming focussed on collision, and not movement, i've used tweening to move the objects. in programmatic situations, of course, you'd be using a subroutine to move the objects and a subroutine to check for collision (i'll do a separate article on movement).
these examples only show the collision of two objects. again, to keep the code easy to follow, i haven't provided for more than two objects. in a real implementation, you'd want to generalize the code quite a bit to allow any number of objects to be initialized and evaluated.
the four-sided collision demos assume that the objects are not rotated. rotated collision gets a little more complicated. if you need to detect rotating objects colliding, you're probably best off if you can mask them with a circle. stay tuned...i may do more on this at some point.

before you get on to the fun stuff of seeing the demos and fla files, take a second to thank mike linkovich (freelance game developer) and derek clayton with me. i couldn't have put this together without their expertise. you may even want to wander over to mike's awe-inspiring site.

>	collision detection for circles
	the basic approach: 1) get the x and y locations of the centres of the two circles. 2) determine the distance between the centre points of the circles by subtracting x2 from x1 and y2 from y1. 3) if the distance between the circles' centres squared is less than or equal to the total length of the two radii squared, a collision occurs. (we use the squares cause to force the comparison of positive numbers). >>download the .fla (zipped) >>view the demo
>	containment detection for circles
	the basic approach: 1) get the x and y locations of the centres of the two circles. 2) determine the distance between the centre points of the circles by subtracting x2 from x1 and y2 from y1. 3) if the distance between the circles' centres squared is less than (not equal to) the total length of the two radii squared, a containment occurs. >>download the .fla (zipped) >>view the demo
>	collision detection for squares and rectangles
	the basic approach: 1) get the x location of both sides of both objects and the y location of the top and bottom of both objects (do these calculations by subtracting or adding half the width or height from the centre point). 2) check if each of the left, right, top, and bottom of object 2 are inside object 1. if any are, set a flag. 3) if any combination of two perpendicular sides (eg. left and top) of object 2 are inside object 1, a collision occurs. >>download the .fla (zipped) >>view the demo
>	containment detection for squares and rectangles
	the basic approach: 1) get the x location of both sides of both objects and the y location of the top and bottom of both objects (do these calculations by subtracting or adding half the width or height from the centre point). 2) if all four sides of object one are located inside object 2, a containment occurs. note that the code in this example is simply a variation on the collision code, with the only difference being that i don't pre-evaluate the side hits. instead of using flags i do the calculations right inside the if statement. this code is a little less efficient because it requires duplicate calculations. if you need to do containment detection you should probably adapt the collision code (just change all the OR operators in the big if statement to AND operators). i didn't do that cause i thought seeing two different approaches to the same problem might be useful for some. >>download the .fla (zipped) >>view the demo

revision history: july 27, 1999: posted.; march 08, 2001: changed link to mike linkovich's site (www.spacejack.org).