Collision Detection
Making Games
It’s time for us to talk about collision detection. It affects obvious parts of our game, like walls we can’t walk through. Like floors we can’t fall through. It also affects obscure parts of our game like weapon projectiles, and checkpoints.
We’re not going to get to gravity yet. Nor are we going to look at player health or respawning. Floors, projectiles and checkpoints are interesting, but they deserve sections of their own. We’re going to create impassable objects. We’re going to learn ways of knowing whether two object occupy the same space.
I’ve spent a bit of time researching this topic. It seems there are many ways of working out whether two things occupy the same space. Some of them are easy to explain and implement. We’ll look at those. Other ways are not easy. They’re still cool though.
What we’re going to cover
You can find the example code at https://github.com/assertchris/making-games/tree/collision-detection
Creating boxes
The player is only one of many objects that will exist on the screen at one time. It’s a platform game, so we can expect at least one platform on screen, at a time.
Platforms have some interesting characteristics though. Sometimes they allow players to fall down through them. Like when you’re standing on a platform and you hold down and press jump (at the same time). Some games take that sequence to mean that you want to fall through the platform.
Some games allow players to jump through the bottom of platforms. This enables vertical movement without gaps in overhead platforms.
Sometimes platforms move!
Platforms are so special that we’ll spend a few sections just implementing their different behaviours. Now we’re going to focus on another common object. The generic box.
Think of this box as an ancestor to the platform. It may share some platform functionality, but the main reason it exists to for things to collide with it. Especially things like the player.
The boxes we’re going to make might not even look like boxes. When we get to implementing gravity, we’ll need a wide, thin box to keep the player from falling out of the world. We’ll need tall, thin boxes to stop the player from running off the side of the floor. We’ll make walls out of them. We may even make boxes out of the boxes. Big, wooden, “jump on me to get to higher things” boxes.
Ok, enough talking.
To make this class, I copy and pasted the Player class and deleted a bunch of stuff. I did have to add a width and height property to it. We’ll get to that in a bit.
Next, we need to add two of these boxes to the stage:
That’s strange! I’ve created two new Box instances, and called them barrel. That’s because we’re about to look at…
Detecting circle collisions
I want you to create circles for these first few boxes. The type of collision detection we’re going to do first, is with circles. It’s ok that the box has a width and height, instead of a radius. You won’t use this kind of collision detection often, unless your platform game has a lot of circles in it.
Let’s see how this kind of detection works:
The first thing we need to do is define a width and height. While we’re pretending that our players and boxes are circles, we only need half a width as a radius…
Next we check each object in the state. We can ignore any the player object because we don’t need to know when something collides with itself. We do check everything else though.
Circles collide when the distance between their origin is less than their combined radii. Their middle points are so close that their lines have to be overlapping.
We do a quick check to see whether the direction the player is moving in is where the box is. If that’s the case then we prevent the player from moving in that direction.
Give it a go. Its pretty fun to see how non-squares block each other. Of course they all have to be perfect circles for this simple algorithm to work.
Detecting rectangle collisions
Detecting collisions of rectangles is almost as easy as circles. Go ahead and swap the barrel image for a box image. You can even adjust the bootstrap code to reflect the squareness of your boxes.
This time round, we’ll treat the player like a rectangle. Instead of radii, we need to check if there are gaps between the player rectangle and either box. We call this axis-aligned bounding box collision detection (or AABB for short).
If there is no gap, and the player wants to move in the direction of the box, then we prevent that from happening:
These are simple methods for detecting collisions, but there are others. There’s one that uses projection-based vector mathematics to determine overlap. There’s one that checks each line, in a couple of polygons, to see if any lines intersect. It’s crazy.
You could even experiment with groups of circles colliding together. That might be fun. I’m going to run this little green circle into these little red boxes for a bit. See you later…
If you liked this post, please share it. You can ask questions, or give feedback to me on Twitter.
