Hey folks!
It’s been a while since I did one of these!
Today I want to talk about hitboxes, overlaps, and collisions. This is something I’ve posted about many times when helping people with their games, but I figured it would be a good idea to have a post that people could point to in the future with an explanation of how these work in Arcade.
This is going to be a three part post. In this first part, we’re going to look at how these mechanics work. In part 2, we’re going to talk about wall collisions and clipping. Part 3 will have some tips and tricks for avoiding common pitfalls when it comes to collisions in your game!
Anyways, read on! You might learn something new!
The two types of overlaps
In Arcade, there are two types of checks that we perform to see if two things are overlapping:
- Pixel-perfect overlap - used in
on sprite overlaps with otherSpritechecks - Hitbox overlap - used in tilemap
on tile overlapevents and wall collisions
Let’s take a look at how both of these work! Also, you can click on any of the images/animations below to get the code for that example!
Pixel-perfect overlaps
Pixel-perfect overlaps work by placing two sprites on top of each other and looping over all of the pixels to see if any of them touch. Here’s an animation showing how that works:
The important thing to note here is that only filled-in pixels count! Transparent pixels are completely ignored in pixel-perfect checks:
You can even have one sprite be completely within another! As long as they don’t have filled-in pixels overlapping one another, it doesn’t count:
Hitbox overlaps
Hitbox overlaps are simpler than pixel-perfect overlaps. Instead of looping over all of the pixels, hitboxes work by drawing a rectangle around all of the filled-in pixels and checking to see if that rectangle overlaps with anything. In the animation below, the red rectangle is the hitbox:
Even though the tile in that animation is only touching transparent pixels in the sprite, it still counts as an overlap! Another thing to note about hitboxes is that each sprite only has one hitbox. If you have an image that has two or more completely disconnected groups of pixels, the hitbox will be a rectangle that encompasses all of them. For example:
To show how different hitbox overlaps are from pixel-perfect ones, let’s take a look at our green circle sprite again:
When the tile is fully within the ring it counts as an overlap even though only transparent pixels are touching it.
Tile Hitboxes
Finally, let’s talk about the hitboxes of tiles. Unlike sprite hitboxes, the hitboxes for tiles and walls always take up the full width and height of the tile. Transparent pixels don’t matter when calculating the hitboxes of tiles! If you have a 16x16 tile, the hitbox will always be 16x16 pixels.
Anyways, that’s all for part one! I’ll be posting part two later this afternoon after livestream.