1. Code
  2. Games

Quick Tip: Collision Detection Between Circles

Read Time:4 minsLanguages:
This post is part of a series called Collision Detection and Reaction.
Quick Tip: Collision Detection Between a Circle and a Line

Collision detection is a branch of algorithms that checks whether two shapes overlap. If you build physics or action games with ActionScript, you will certainly not escape acquaintance with this topic. This is the first of the series regarding collision detection. In this Quick Tip, we shall look at ActionScript's built-in collision detection method, hitTestObject(), and write our own to detect overlap between two circles.

Final Result Preview

This is the final SWF we will create in this Quick Tip. Click the blue circle and drag it towards the green one. Once they overlap, the green circle will change its color; if you remove the blue circle again, the other will return to being green.

Step 1: Bounding Box Checks

Those who are aquainted with ActionScript 2.0 will definitely recognise the method, hitTest(). This command checks for overlap between two shapes, or between a shape and a single point. In ActionScript 3.0 it is split into two separate methods: hitTestObject() and hitTestPoint().

We shall look at hitTestObject() first. This commnad generally suits collision detection for box-like shapes (squares, rectangles). A bounding box is drawn around shapes and when these bounding boxes overlap each other, hitTestObject() returns true.

Check out the example below. Drag the blue box towards the green one. As they overlap, the green box's shade darkens.

I attach here the corresponding ActionScript that generates the above presentation. Box is a custom written class to easily generate square shapes. I've included the classes in the source folder; do refer to them. The important script for collision detection is highlighted below.

Step 2: Shortcomings of Bounding Boxes

However, collision between circles cannot be effectively checked using this command. Check out the presentation below. Drag the blue circle towards the green one. Before the shapes collide, their bounding boxes already overlap and hitTestObject() is true. We need a more accurate solution.

This problem is prevalent not only for collision detection between circles but non-square shapes generally. Observe the diagram below. For organic shapes that are difficult to resolve by polygons, we shall make use of pixel-precise collision detection.

Various inaccurate collision detected through hitTestObject.

Step 3: Distance Between Centers

The solution to this problem is quite simple: we shall measure the distance between the centers of these circles. If the centers get close enough to each other, we shall flag collision as true. But how close is close enough?

Distance between circles.

Observe the diagram above. r1 refers to the radius of circle1 and r2 refers to the radius of circle2. The distance between circles is calculated on every frame. If (and only if) it is equal to or less than the sum of both radii (r1+ r2), then the two circles must be touching or overlapping each other.

Step 4: Circle-Circle Collision Detection

Here are the important ActionScript for the implementation of the concept above:

Step 5: Sample Solution

Here is a sample of the solution. Drag the blue circle towards to the green one. As they overlap, you will see green's color change. It returns to normal when both circles are not colliding.

I have included the ActionScript implementation below.


As you can see, the general principle of collision detection is to use mathematical formulae to check for overlappings between different shapes. Vector mathematics plays an important role too. Next to come is collision between a circle and a line. Thanks for reading and see you soon.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.