Flappy Bird in Excel VBA - Detecting Collisions

Useful Links

Return to the Flappy Bird in Excel VBA Tutorial index.

Download Flappy Owl Pt11 - Collisions.

Introduction

In real 2D games there are two main approaches to detecting collisions between objects. There's complex, pixel-perfect collision-detection where the games tests  each coloured pixel of an image to check whether it overlaps with any coloured pixel of another image. This is very accurate but expensive in processing terms. The other technique involves testing whether one rectangle (or other basic geometric shape) overlaps with another at any point. This is less accurate for images which aren't perfectly rectangular but it faster in processing terms and easier to implement.

The application class in Excel VBA actually provides a convenient way to test whether one range of cells overlaps another; the Intersect method. We'll use this to test whether the bird has collided with the wall. This will mean that the collision-detection won't be perfect but in this case it's worth sacrificing accuracy for speed.

In our game if any of the cells within the pink border overlap with a wall shape we'll consider this to be a collision.

Creating the Colliding Property

We'll create a property within the bird class which will tell the game whether the bird is colliding with another object. Head back to the clsBird class module and add the following private variable to the top of the module:

Now go to the Update method of the bird class and add a line of code to the end of the subroutine:

While we're here it's worth making a quick change for a very small performance improvement. Near the top of the Update method find this section of code:

Replace the line above with the version shown below:

Now add one line to end of the Public Property Set GameSheet procedure so that it looks like this:

Now we can get on and create the property that will tell us if the bird is colliding with another game object. Add the following procedure to the class module:

The Application.Intersect method accepts two range objects and returns True if the two ranges overlap.

Getting the Wall Ranges

The property that we've just created requires us to pass in the range of the object for which we're testing collisions. That means we'll need some way for the wall class to provide us with the range of cells that the walls occupy.

Go back to the clsWall class module and add the following two properties:

Testing for Collisions During the Game

Now we can go back to the clsGameCode module and add some code to the UpdateAndDrawGame subroutine. For the time being we'll assume that if the bird collides with a wall we'll stop the game and return the player to the menu worksheet.

Change the UpdateAndDrawGame subroutine so that it looks like this:

You should now be able to run the game and find that if you hit the wall you'll be unceremoniously dumped to the game menu.

Adjusting the Bird Start Position

One small problem with the way the game works at the moment is that because the wall moves 16 columns each time the game updates it's possible that the wall could completely overlap the bird before any collisions are detected. In fact, that's exactly what happens with the current sizes of all of the game objects. If you could pause the game at the point it ends this is what you would see:

The bird is well and truly embedded in the wall before any collisions are detected.

To prevent the player seeing this slightly rubbish effect we're simply going to adjust the starting position of the bird so that it won't be overlapped by the wall before a collision is detected. It's worth looking a little more closely at how far the bird sits inside the wall first:

Measuring the number of columns by selecting the cells reveals that the wall overlaps by 16 columns.

Head back to the clsBird class module and find the Public Property GameSheet procedure. Edit the line which sets the BirdCell variable so that the start of the procedure looks like this:

All we've done is changed the starting column of the bird from 40 to 41. If you run the game again now you might be able to see that the collisions are detected before the wall completely overlaps the bird.

Now the collision is detected as soon as the bird image overlaps the wall by just a single column.

Adjusting the Bird's Vertical Movement

It's worth mentioning that we have a similar problem if the bird moves up or down too quickly when it's in the gap between the top and bottom walls.

Moving up too quickly results in the bird being embedded in the wall again.

Solving this problem is a little more convoluted. If we establish a collision has taken place between the bird and top wall this is the basic logic of what needs to happen:

• Check if the bird is moving up.
• Check if the top of the bird was below the bottom of the top wall in the previous frame.
• Check if the top of the bird is above the bottom of the top wall in the current frame.
• If so, move the bird so that it sits just below the bottom of the top wall.

We'll need to do something similar to ensure that the bird doesn't become embedded in the bottom wall as well. In the clsBird class module, replace the Colliding property with this version:

Before running the game we also need to make a small change to the UpdateAndDrawGame subroutine in the modGameCode module. Change it so that it looks like this:

The Colliding property of the bird class can now change the position of the bird so it's important that we draw the bird in its new position if a collision is detected. We also need to make sure that the bird and wall are drawn even if no collisions are detected so we need to call the Draw method of both objects after the check for collisions as well.

Testing the Game

That was somewhat complicated, but the end result should be that the bird will never become embedded within the wall, as shown in the images below:

When colliding with the side of the wall the bird will overlap by a single column.

When the bird collides with the top wall while moving upwards it stops just below the wall.

When the bird collides with the bottom wall while moving downwards it stops just above the wall.

Give the game a test - with the collision-detection implemented it should be a little more challenging than it was previously! If your code doesn't work you can download a working copy from the top of the page.

What's Next

Now that the game is becoming a little more complicated it's worth thinking about how we tell the game what to do each time it is updated. The next part of the tutorial shows you how to implement a state system to help us with this task.