[ SDL2 — Part 5]Collision detection

3 min readJan 16, 2022

Collision detection is one of the key aspects of game programming. For all non-circular or non-rectangular objects it gets harder and harder the more accurate you want it to be. But today we’re gonna continue just using rectangles. This part describes a simple algorithm to check for intersections After we’ve created a functions that does rectangle-rectangle collision detection, we’ll use all of what we’ve learned so far and make a simple game!

Previous part

You can find the previous part here.

Rectangle to rectangle collisions

Instead of checking if two rectangles are inside or touching each other, we’re gonna check for the opposite; if they are outside of each other. The algorithm to do so consists of two steps.

Find the 4 sides of both the rectangles we want to test.
Use those 8 edges to check if they are not colliding

Finding the edges

Say we have two rectangles, rect1, and rect2.

SDL_Rect rect1;
SDL_Rect rect2,

Finding the x/y of left/right/top/bottom is very easy.

int left1 = rect1.x;
int right1 = rect1.x + rect1.w;
int top1 = rect1.y;
int bottom1 = rect1.y + rect1.h;// Do the same for rect2

Take a look at the drawing below

As you can see, the red rectangle is farther to the right than the blue one. But how do can we easily check that? Simply by checking if redLeft is further to the right than blueRight. If it is ( like it is in our case ) there is no collision. Then it’s just a simple matter of repeating it for the other edges. So we end up with something like this :


bool CheckCollision( SDL_Rect redRect, SDL_Rect blueRect ) {
    // Find edges of redRect
    int redLeft = redRect.x;
    int redRight = redRect.x + redRect.w;
    int redTop = redRect.y;
    int redBottom = redRect.y + redRect.h;    // Find edges of blueRect
    int bluLeft = blueRect.x;
    int blueRight = blueRect.x + blueRect.w;
    int blueTop = blueRect.y;
    int bluBbottom = blueRect.y + blueRect.h;    // Is redLeft futher to the right than blueRight?
    if ( redLeft &gt; blueRight ) 
        return false; // No collision    // Is redRight futher to the left than blueLeft?
    if ( redRight &lt; blueLeft )
        return false; // No collision    // Is redTop below blueBottom?
    if ( redTop &gt; blueBottom )
        return false; // No collision    // Is redBottom above blueTop?
    if ( redBottom &lt; blueTop )
        return false; // No collision     // None of the above test were true, collision!
    return true;
}

This is the final function for you to copy and test out.

If you want to shorten the code, you can remove the comments and replace the variables with the rect. x / y / w / h values like so :

// Is redLeft right of blueRight?
if ( redRect.x < ( blueRect.x + blueRect.w ) )
    return false; // No collision// … Do this for left, bottom, top like above

I chose to not do this as the longer version is a bit easier to read and understand.

Our first game!

Our first game is of the “lead the chicken safely across the road” kind of things. Or, as in our case, “lead the square from the rectangle, past all the other squares and to the other rectangle.” You control the square with the arrow keys. If you hit a red square, you’ll end up where you started. If you make it to the other side, you’ll also end up where you started, but at least you have that tiny sense of victory for helping our poor little square!

The code just uses the different things we’ve learned so far, so I won’t explain it other than in code comments and ( hopefully ) descriptive names.

So without further ado, here’s the code :

Next part

You can find the next part here.