Rectangle intersection detection collision detection is really straightforward. We draw an imaginary rectangle; we can call it a hitbox or bounding rectangle, around the objects we want to test for collision. Then, test to see if they intersect on each and every frame of the game. If they do, we have a collision.

About this tutorial

Skill level 1
Time to read: 10 minutes

New Concepts:

  1. Hitboxes
  2. Rectangle intersection
  3. Android Rect and SFML FloatRect

Recommended preparation tutorials

  • The game loop

Where the hitboxes intersect, we have a collision. As we can see from the title image, this is far from perfect. However, in some situations, it is sufficient. To implement this method, all we need to do is test for the intersection using the x and y coordinates of both objects.

This next pseudo code (C++/Java-like) shows the use of a hypothetical getHitBox method/function.

if(ship.getHitbox().right > enemy.getHitbox().left
	&& ship.getHitbox().left < enemy.getHitbox().right )
	// Ship is intersecting on x axis 

	// But they could be at different heights
	if(ship.getHitbox().top < enemy.getHitbox().bottom  		&& ship.getHitbox().bottom > enemy.getHitbox().top )
		// Ship is intersecting enemy on y axis as well
		// Hit detected - take action

In the previous code the first if statement checks whether the right hand side of the ship is at a coordinate greater than the left hand side of the enemy, at the same time as the left hand side of the ship is at a coordinate less than the right hand side of the ship. If both those conditions are true then the two rectangles/hitboxes must be overlapping/intersecting on the horizontal/x axis.

Although the rectangles intersect horizontally it is still possible that they are miles apart vertically. The second if statement checks whether the top of the ship is at a coordinate less than the bottom of the enemy, at the same time as the bottom of the ship is at a coordinate greater than the top of the enemy.

Note that the vertical detection assumes a coordinate system that increases from top to bottom. This is not always the case.

When both of the if statements are true, a collision has occurred and we can do whatever is required; destroy the ship, add points, play a sound effect, etc… All we need to do then is perform these checks from each and every object against each and every object, where we need to detect collisions.

The one thing I haven’t explained is this mystical getHitbox method/function. The getHitbox method probably already exists in your library/API of choice.

  • SFML has a FloatRect class and you can use code like myFloatRect.x and myFloatRect.y etc. In fact, SFML even has an intersects method which handles everything for you.
  • The Android API has a Rect class that works similarly to SFML FloatRect. The Rect class has a contains method that also does all the work for you.

Sometimes, however you need to add a bit more functionality to your rectangles/hitboxes so it is worth understanding the simple math that underlies detecting a collision between two rectangles. Then it is worth writing your own code, as above. For example you might want to know whether the collision happened on the left, right, top or bottom. With your own custom hitbox method/function you could code this functionality into the same class.

If your game objects cannot be represented by rectangles then be sure to take a look at the radius overlap method and the crossing number algorithm. Furthermore, if doing these checks for every object, against every other object, on every frame, sounds like it will badly effect the frame rate then take a look at the Neighbour checking tutorial.