Collision Detection

Last Updated: Oct 20th, 2024

If you want to tell if two objects are touching, using collision boxes is a common way to do so. Here we'll be checking collision between two axis aligned bounding boxes.

Checking collisions between two convex polygons (and boxes are convex polygons) involves checking how they are separated against the axes of their sides.

Here we have two boxes that are not collided. As you can see, their x projections are on the bottom and their y projections are on the left:

Here you see the boxes have collided along the y axis but they are separated on the x axis:

Here the boxes are collided on the x axis but they are separated on the y axis:

When there is no separation on any of the axes there is a collision:

This is called the separating axis test where we try to find an axis where the polygons are separated. If there is no separating axis, then the objects are colliding.

In this tutorial we're doing the most basic type of separating axis test: between to axis aligned bounding boxes (knowns a AABBs). Bounding boxes are boxes that encapsulate an object and they are axis aligned because their side go along the x and y axis (as opposed to oriented bounding boxes which are rotated).

class Square
{
    public:
        //The dimensions of the square
        static constexpr int kSquareWidth = 20;
        static constexpr int kSquareHeight = 20;

        //Maximum axis velocity of the square
        static constexpr int kSquareVel = 10;

        //Initializes the variables
        Square();

        //Takes key presses and adjusts the square's velocity
        void handleEvent( SDL_Event& e );

        //Moves the square
        void move( SDL_Rect collider );

        //Shows the square on the screen
        void render();

    private:
        //The collision box
        SDL_Rect mCollisionBox;

        //The velocity of the square
        int mVelX, mVelY;
};

/* Function Prototypes */
//Starts up SDL and creates window
bool init();

//Loads media
bool loadMedia();

//Frees media and shuts down SDL
void close();

//Check collision between two AABBs
bool checkCollision( SDL_Rect a, SDL_Rect b );

//Square Implementation
Square::Square():
    mCollisionBox{ 0, 0, kSquareWidth, kSquareHeight },
    mVelX{ 0 },
    mVelY{ 0 }
{

}

void Square::handleEvent( SDL_Event& e )
{
    //If a key was pressed
    if( e.type == SDL_EVENT_KEY_DOWN && e.key.repeat == 0 )
    {
        //Adjust the velocity
        switch( e.key.key )
        {
            case SDLK_UP: mVelY -= kSquareVel; break;
            case SDLK_DOWN: mVelY += kSquareVel; break;
            case SDLK_LEFT: mVelX -= kSquareVel; break;
            case SDLK_RIGHT: mVelX += kSquareVel; break;
        }
    }
    //If a key was released
    else if( e.type == SDL_EVENT_KEY_UP && e.key.repeat == 0 )
    {
        //Adjust the velocity
        switch( e.key.key )
        {
            case SDLK_UP: mVelY += kSquareVel; break;
            case SDLK_DOWN: mVelY -= kSquareVel; break;
            case SDLK_LEFT: mVelX += kSquareVel; break;
            case SDLK_RIGHT: mVelX -= kSquareVel; break;
        }
    }
}

void Square::move( SDL_Rect collider )
{
    //Move the square left or right
    mCollisionBox.x += mVelX;

    //If the square went off screen or hit the wall
    if( ( mCollisionBox.x < 0 ) || ( mCollisionBox.x + kSquareWidth > kScreenWidth ) || checkCollision( mCollisionBox, collider ) )
    {
        //Move back
        mCollisionBox.x -= mVelX;
    }

    //Move the square up or down
    mCollisionBox.y += mVelY;

    //If the square went off screen or hit the wall
    if( ( mCollisionBox.y < 0 ) || ( mCollisionBox.y + kSquareHeight > kScreenHeight ) || checkCollision( mCollisionBox, collider ) )
    {
        //Move back
        mCollisionBox.y -= mVelY;
    }
}

void Square::render()
{
    //Show the square
    SDL_FRect drawingRect{ static_cast<float>( mCollisionBox.x ), static_cast<float>( mCollisionBox.y ), static_cast<float>( mCollisionBox.w ), static_cast<float>( mCollisionBox.h ) };
    SDL_SetRenderDrawColor( gRenderer, 0x00, 0x00, 0x00, 0xFF );   
    SDL_RenderRect( gRenderer, &drawingRect );
}

bool checkCollision( SDL_Rect a, SDL_Rect b )
{
    //Calculate the sides of rect A
    int aMinX = a.x;
    int aMaxX = a.x + a.w;
    int aMinY = a.y;
    int aMaxY = a.y + a.h;

    //Calculate the sides of rect B
    int bMinX = b.x;
    int bMaxX = b.x + b.w;
    int bMinY = b.y;
    int bMaxY = b.y + b.h;

    //If left side of A is the the right of B
    if( aMinX >= bMaxX )
    {
        return false;
    }

    //If the right side of A to the left of B
    if( aMaxX <= bMinX )
    {
        return false;
    }
}

    //If the top side of A is below B
    if( aMinY >= bMaxY )
    {
        return false;
    }

    //If the bottom side of A is above B
    if( aMaxY <= bMinY )
    {
        return false;
    }

    //If none of the sides from A are outside B
    return true;
}

            //The quit flag
            bool quit{ false };

            //The event data
            SDL_Event e;
            SDL_zero( e );

            //Timer to cap frame rate
            LTimer capTimer;

            //Square we will be moving around on the screen
            Square square;

            //The wall we will be colliding with
            constexpr int kWallWidth = Square::kSquareWidth;
            constexpr int kWallHeight = kScreenHeight - Square::kSquareHeight * 2;
            SDL_Rect wall{ ( kScreenWidth - kWallWidth ) / 2, ( kScreenHeight - kWallHeight ) / 2, kWallWidth, kWallHeight };
            

            //The main loop
            while( quit == false )
            {
                //Start frame time
                capTimer.start();

                //Get event data
                while( SDL_PollEvent( &e ) )
                {
                    //If event is quit type
                    if( e.type == SDL_EVENT_QUIT )
                    {
                        //End the main loop
                        quit = true;
                    }

                    //Process square events
                    square.handleEvent( e );
                }
                
                //Update square
                square.move( wall );

                //Fill the background
                SDL_SetRenderDrawColor( gRenderer, 0xFF, 0xFF, 0xFF,  0xFF );
                SDL_RenderClear( gRenderer );

                //Render wall
                SDL_FRect drawingRect{ static_cast( wall.x ), static_cast( wall.y ),  static_cast( wall.w ),  static_cast( wall.h ) };
                SDL_SetRenderDrawColor( gRenderer, 0x00, 0x00, 0x00, 0xFF );   
                SDL_RenderRect( gRenderer, &drawingRect );
                
                //Render square
                square.render();

                //Update screen
                SDL_RenderPresent( gRenderer );

                //Cap frame rate
                constexpr Uint64 nsPerFrame = 1000000000 / kScreenFps; 
                Uint64 frameNs = capTimer.getTicksNS();
                if( frameNs < nsPerFrame )
                {
                    SDL_DelayNS( nsPerFrame - frameNs );
                }
            } 

You maybe asking "well what if I want to check collisions with objects that aren't square". There are way to check collisions with shapes that aren't rectanges (some of which we'll be covering in future tutorials), and there are volumes written on the subject of checking collisions with different shapes, but you can get pretty far with just AABBs.

Collision volumes do not have to perfectly match the objects they're representing. The recently released Marvel vs. Capcom Fighting Collection has the option to view collision boxes:

As you can see, the collision volumes just have to be close enough. Besides, the more complex the collision geometry, the more computationally expensive it is to handle it. You have to ask yourself if the additional accuracy is worth the cost.

Oh, and it wouldn't be a bad idea to take a look at the game loops article because as your game loops start becoming more complex, knowing how to order your logic properly is important.

class GameObject
{
public:
/*yada yada*/
private:
Transform mTransform; //Holds position, rotation, scale
RigidBody mRigidBody; //Hold mass, velocity, etc
Collider mCollider; //Holds the collision box
Graphic mGraphic; //Holds the info for the square we'll be rendering
};

applyAllForcesToObjects(); //Gravity, wind, propulsion, etc
moveAllObjects(); //Apply acceleration/velocity to position
checkForCollisions(); //Generate all contacts/collisions
processCollisions(); //Resolves all contacts/collisions