Collision Checks

Recently in my development of mobile apps I have come across the need to making my own collision checks on objects as the physics engine I am working on doesn't work with my needs. So here is how I check for a collision between two objects.

Checking For A Collision

So lets take our two objects. We'll call these two blob1 and blob2. We will be testing if Blob 2 is colliding with Blob 1.

Blob 1

Width = 4

Height = 4

x = 4

y = 4

Blob 2

Width = 2

Height = 2

x = 6

y = 8

First we need to get the distance between the two objects on both the x and y axis. Let's get the x distance first. This distance is found by taking the x coordinate of blob 2 and taking away the x coordinate of blob 1. 

xDistance = 6 - 4 = 2

If this distance comes out as a negative, it needs to be made into a positive. Most languages will have a maths functions to do this test and alter it for you. Otherwise just do a simple if statement checking if its less than 0.

if xDistance is less than 0 then times xDistance by -1

Save the result into a new variable and not xDistance, as we will need xDistance later to check which side the collision is happening on.

So with all that done we can see that Blob2s x coordinate is 2 squares away from Blob1s x coordinate. But this doesn't tell us the distance between them. The distance between them is simply found by taking away the half the width of Blob1 and Blob2.

xD = 2 - (half of blob 1 width) - (half of blob 2 width)

xD = 2 - 2 - 1

xD = 2 - 3

xD = -1

These two blobs are -1 squares away from each other. And so this check says they are colliding. However, we can see they are not. This is why we must also check the yDistance as well. To check the yDistance we use the same formula.

yDistance = Blob2.y - Blob1.y
yDistance = 8 - 4
yDistance = 4

This is above 0 so we do not need to times by -1 so we move straight into the next formula...

yD = 4 - (half of blob 1 height) - (half of blob 2 height)
yD = 4 - 1- 1
yD = 4 - 2
yD = 2

Now we can see we are not colliding on the y so Blob 2 is not colliding with Blob 1.

Lets now look at an example where Blob 2 is colliding with Blob 1.

Blob 1

Width = 4

Height = 4

x = 4

y = 4

Blob 2

Width = 2

Height = 2

x =2

y = 4

In this example we can clearly see the top objects are colliding so lets get into the maths.

xDistance = Blob2.x - Blob1.x

xDistance = 2-4

xDistance = -2

xDistance has come out as a negative number so we need to multiply it by -1 to make it a positive number. However it's important to remember to keep the original as we need it later.

xD = xDistance * -1

xD = -2 * -1

xD = 2

xD= 2 - (half of blob 1 width) - (half of blob 2 width)

xD= 2 - 2 - 1

xD= 2 - 3

xD= -1

xD is a negative number so we know we are colliding on the x so now lets check the y.


yDistance = Blob2.y - Blob1.y
yDistance = 4 - 4
yDistance = 0

yD = 0 - (half of blob 1 height) - (half of blob 2 height)
yD = 0 - 1- 1
yD = 0 - 2
yD = -2

 

yD is also a negative number so we know we are also collising on the y. With both x and y colliding the objects must be colliding.

Finding Which Side The Collision Happened

Okay, we know we have a collision, and in some cases this is all you will need. Return a true for a collision and, job done. But what if you are working on a platformer and you need to check if the collision was the roof or floor or ever a wall. How would this be done.

To check this we first find out which out of the x or y collision is the greatest distance. This will narrow the possible collision sides down to only two sides. Lets get the x collision first.

First we need to make xDistance a positive number if it isn't. Once again put this in a new variable as we need the original soon. In our case xDistance is -2 so we need to do this.

xD = xDistance * -1

xD = -2 * -1

xD = 2

  

Now lets get the collision of x.

 

xCol = (half of blob 1 width) + (half of blob 2 width) - xD

xCol = 2 + 1 - 2

xCol = 3 -2

xCol = 1

 

Now lets repeat our process for the collision of y. yDistance is already a positive number so we don't need to adjust it. So lets go straight into the collision.

 

yD = yDistance

yCol = (half of blob 1 height) + (half of blob 2 height) - yD

yCol = 2 + 1 - 0

yCol = 3 - 0

yCol = 3

 

What we are doing is taking away the distance of the object from half of the combined widths. So essentially a lesser number, indicates a larger distance from the objects center. So if the xCol is greater than the yCol, the y coordinates are further away and so the collision either takes place on the top or the bottom of the object.

 

In our case xCol is less than yCol, showing that the x coordinates are further away. We can tell by this that our objects are colliding on either the left or the right side.

 

So lets continue and find which side it is. For this one we take our original xDistance. If xDistance is greater than 0 than Blob2 is off to the right of Blob1 and so colliding with the right side. In our case xDistance is -2 so Blob2 is off to the left side of Blob , therefore we are colliding with the left side. Now we can return the letter "l" or a pre-made LEFT constant. As a fail safe, we should always make one of these test include zero. For example, if xDistance is greater than or equal to 0. You may find a collision take place at exactly 0.

 

If our objects were colliding with either the top or bottom, we could find out which side by checking the yDistance in the same way we checked the xDistance. If yDistance is less than 0 then Blob2 is positioned higher than Blob1 and therefore colliding with the top. However is yDistance is greater than 0 Blob2 is positioned below Blob1 and therefore colliding with the bottom. Once again make sure one of your test includes 0.

So there you have your collision check. Keep in mind that this theory works on objects where the x and y coordinates are calculated from the center of the objects. Javascripts rect function works with x and y being the top left corner and so this theory will have to be adjusted to account for that. This can be done by simply adding half the objects width to your x coordinate and half the height to your y coordinate, giving you the objects center coordinates.

Also keep in mind this works only for rectangular shapes. I will go into a few methods of checking non rectangular shapes in a later post.

 

I hope this helps.