# Richard's Arcade Tips #6 - Hitboxes, Overlaps, and Collisions (Part 1)

**URL:** https://forum.makecode.com/t/richards-arcade-tips-6-hitboxes-overlaps-and-collisions-part-1/45107
**Category:** MakeCode Blog
**Tags:** arcade-tips
**Created:** [July 27, 2026, 6:40pm UTC](https://forum.makecode.com/t/richards-arcade-tips-6-hitboxes-overlaps-and-collisions-part-1/45107 "2026-07-27T18:40:51Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)
#### Post date: [July 27, 2026, 6:40pm UTC](https://forum.makecode.com/t/richards-arcade-tips-6-hitboxes-overlaps-and-collisions-part-1/45107/1 "2026-07-27T18:40:51Z")

</div>

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](https://forum.makecode.com/t/richard-s-arcade-tips-7-hitboxes-overlaps-and-collisions-part-2/45108), 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 otherSprite` checks
- **Hitbox overlap** - used in tilemap `on tile overlap` events 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:

[![overlap-animation](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/6/8/6864792994e0712fdf8b54c3929a26f23c757d69.gif)](https://arcade.makecode.com/S97613-43186-81031-21152)

The important thing to note here is that only filled-in pixels count! Transparent pixels are completely ignored in pixel-perfect checks:

[![no-overlap-animation](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/0/a/0a46679baba146c2ed3f7d3e111087ecc02a7545.gif)](https://arcade.makecode.com/S39596-03954-28795-12744)

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:

[![circle-overlap](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/5/e/5e5271776de30635902b81c29f97b016fc469abb.gif)](https://arcade.makecode.com/S60481-73046-51530-26861)

## 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:

[![hitbox-overlap](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/7/b/7b87d0e769c6be70e4935ff1bd1463bf59738234.gif)](https://arcade.makecode.com/S96111-62112-91025-27885)

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:

[![hitbox-overlap2](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/3/9/390f580f1a1e46cabcb2199acf9331598a293e0a.gif)](https://arcade.makecode.com/S07415-09004-96427-48369)

To show how different hitbox overlaps are from pixel-perfect ones, let’s take a look at our green circle sprite again:

[![hitbox-overlap-ring](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/9/6/96449c6da365e81fb0587d648a1e6b560141c0dd.gif)](https://arcade.makecode.com/S62426-15056-23077-90874)

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.

---

<div class="post-metadata">

### Author: ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)
#### Post date: [July 27, 2026, 9:29pm UTC](https://forum.makecode.com/t/richards-arcade-tips-6-hitboxes-overlaps-and-collisions-part-1/45107/2 "2026-07-27T21:29:45Z")

</div>

“Wow, cool animations!”  
\*accidentally clicks on one of them\*  
“Wait, the animations are makecode projects!/!?1!/?!/1!”  
\*clicks on the rest of them\*

---

<div class="post-metadata">

### Author: ![Sword\_Studios](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sword_studios/32/35216_2.png) [@Sword\_Studios](https://forum.makecode.com/u/Sword_Studios)
#### Post date: [July 27, 2026, 9:29pm UTC](https://forum.makecode.com/t/richards-arcade-tips-6-hitboxes-overlaps-and-collisions-part-1/45107/3 "2026-07-27T21:29:47Z")

</div>

AMazing but is there a way tweek tile overlapping or change your overall hitbox

---

<div class="post-metadata">

### Author: ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)
#### Post date: [July 27, 2026, 11:23pm UTC](https://forum.makecode.com/t/richards-arcade-tips-6-hitboxes-overlaps-and-collisions-part-1/45107/4 "2026-07-27T23:23:21Z")

</div>

I’ll be giving some tips on how to do this in part 3 of the series, which should be coming out tomorrow!

---

<div class="post-metadata">

### Author: ![redSprite](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/redsprite/32/34262_2.png) [@redSprite](https://forum.makecode.com/u/redSprite)
#### Post date: [July 28, 2026, 2:23am UTC](https://forum.makecode.com/t/richards-arcade-tips-6-hitboxes-overlaps-and-collisions-part-1/45107/5 "2026-07-28T02:23:47Z")

</div>

Genuine Gem (Part 1)  
Is there a way to do pixel perfect overlaps in question?

---

<div class="post-metadata">

### Author: ![VoxelMaster64](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/voxelmaster64/32/32075_2.png) [@VoxelMaster64](https://forum.makecode.com/u/VoxelMaster64)
#### Post date: [July 28, 2026, 2:14pm UTC](https://forum.makecode.com/t/richards-arcade-tips-6-hitboxes-overlaps-and-collisions-part-1/45107/6 "2026-07-28T14:14:26Z")

</div>

> **[hitbox size different than visual](https://arcade.makecode.com/S96790-00772-95407-36743)**
>
> the player has a different hitbox size than it's image

Is that the you mean? @richard maybe you should include something like this.

---

<div class="post-metadata">

### Author: ![TheEarth](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/theearth/32/34579_2.png) [@TheEarth](https://forum.makecode.com/u/TheEarth)
#### Post date: [July 28, 2026, 9:07pm UTC](https://forum.makecode.com/t/richards-arcade-tips-6-hitboxes-overlaps-and-collisions-part-1/45107/7 "2026-07-28T21:07:08Z")

</div>

![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/9/1/913fdc6b8adfb0e2cb88ea9d063db5105194e824.png)Diabolically sized screen
