# Hitbox

**URL:** https://forum.makecode.com/t/hitbox/22993
**Category:** Arcade
**Tags:** art, game
**Created:** [October 4, 2023, 4:46pm UTC](https://forum.makecode.com/t/hitbox/22993 "2023-10-04T16:46:08Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![Mega0star01](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/mega0star01/32/14784_2.png) [@Mega0star01](https://forum.makecode.com/u/Mega0star01)
#### Post date: [October 4, 2023, 4:46pm UTC](https://forum.makecode.com/t/hitbox/22993/1 "2023-10-04T16:46:08Z")

</div>

i got a question.  
is this the hitbox? (all the yellow area)

 ![Captura de pantalla (108)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/3/3fbcae05d572cb6153026a4abcbf4d24cd6d05fd.png)  
or the hitbox is the whole square/rectangle

---

<div class="post-metadata">

### Author: ![Vegz78](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/vegz78/32/1201_2.png) [@Vegz78](https://forum.makecode.com/u/Vegz78)
#### Post date: [October 4, 2023, 11:29pm UTC](https://forum.makecode.com/t/hitbox/22993/2 "2023-10-04T23:29:42Z")

</div>

VERY good question, @Mega0star01!

I am trying to [wrap my head around this myself](https://forum.makecode.com/t/effect-of-different-widths-on-overlapping-features-what-am-i-doing-wrong/22161) in this very same moment…

Anyone?

---

<div class="post-metadata">

### Author: ![Luke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/luke/32/32519_2.png) [@Luke](https://forum.makecode.com/u/Luke)
#### Post date: [October 4, 2023, 11:29pm UTC](https://forum.makecode.com/t/hitbox/22993/3 "2023-10-04T23:29:54Z")

</div>

It’s the yellow area, not the whole thing

---

<div class="post-metadata">

### Author: ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)
#### Post date: [October 4, 2023, 11:30pm UTC](https://forum.makecode.com/t/hitbox/22993/5 "2023-10-04T23:30:04Z")

</div>

Sprite overlaps are computed using the image, so transparent pixels in an image do not count towards overlaps. So the hitbox is in the red outline in that image.

---

<div class="post-metadata">

### Author: ![urassari](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/urassari/32/9535_2.png) [@urassari](https://forum.makecode.com/u/urassari)
#### Post date: [October 4, 2023, 11:30pm UTC](https://forum.makecode.com/t/hitbox/22993/6 "2023-10-04T23:30:06Z")

</div>

that yellow area is the hitbox. (i think)

---

<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: [October 4, 2023, 11:36pm UTC](https://forum.makecode.com/t/hitbox/22993/7 "2023-10-04T23:36:58Z")

</div>

The answer is both.

**Sprite overlaps** are based on the pixels in the image (transparency is ignored). In other words, the yellow area of your example

**Tilemap overlaps** are based on the outer rectangle of all filled pixels in an image. For your example, that would be the entire outer rectangle of the sprite. For an image like this one:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/9/93b646c7632b18516ff28d4a9b95eeafcd0ffb53.png)

…it’s the red rectangle (the rectangle around all filled pixels).

---

<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: [October 4, 2023, 11:49pm UTC](https://forum.makecode.com/t/hitbox/22993/8 "2023-10-04T23:49:33Z")

</div>

Here is an example program that shows the sprite overlap behavior:

> **[pixel-perfect-overlaps](https://arcade.makecode.com/S63852-61321-10898-22604)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

The background turns orange when the sprites are overlapping.

And here is another example showing off tilemap behavior:

> **[tilemap-overlaps](https://arcade.makecode.com/S26424-94953-88662-63621)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

Note that the sprite you are moving around has a huge transparent chunk in the middle but it still can’t pass through walls and the transparent area still overlaps with tiles

---

<div class="post-metadata">

### Author: ![Mega0star01](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/mega0star01/32/14784_2.png) [@Mega0star01](https://forum.makecode.com/u/Mega0star01)
#### Post date: [October 5, 2023, 4:26pm UTC](https://forum.makecode.com/t/hitbox/22993/9 "2023-10-05T16:26:22Z")

</div>

thank you so much, i needed this answer for a fighting game.

---

<div class="post-metadata">

### Author: ![Sarge](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sarge/32/19590_2.png) [@Sarge](https://forum.makecode.com/u/Sarge)
#### Post date: [October 10, 2023, 6:46pm UTC](https://forum.makecode.com/t/hitbox/22993/10 "2023-10-10T18:46:26Z")

</div>

Great to know! Just one question… why?? Why not make it pixel perfect for both?

---

<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: [October 10, 2023, 7:36pm UTC](https://forum.makecode.com/t/hitbox/22993/11 "2023-10-10T19:36:45Z")

</div>

@Sarge good question!

The primary reason is to stop you from getting caught on walls. Imagine you have a character like this:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/a/a9d4faba5d45ccf0bf9bd61604a562000d6154b0.png)

If they were in a platformer and walked to the edge of a platform, you wouldn’t want them to get caught on their arm or the brim of their hat on the way down. You’d want them to behave like a rectangle.

The second reason is performance. Pixel perfect overlaps are expensive to check; you need to iterate over the pixels of both images to see if there are any two that touch. Meanwhile, rectangle checks are cheap!

---

<div class="post-metadata">

### Author: ![Sarge](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sarge/32/19590_2.png) [@Sarge](https://forum.makecode.com/u/Sarge)
#### Post date: [October 10, 2023, 8:43pm UTC](https://forum.makecode.com/t/hitbox/22993/12 "2023-10-10T20:43:20Z")

</div>

You do have a point, after all if I do need pixel perfect collision checks I can just code them myself 😩

(I mean, on a project to project basis that is)

---

<div class="post-metadata">

### Author: ![Not\_a\_Potato](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/not_a_potato/32/18462_2.png) [@Not\_a\_Potato](https://forum.makecode.com/u/Not_a_Potato)
#### Post date: [March 30, 2026, 9:42pm UTC](https://forum.makecode.com/t/hitbox/22993/13 "2026-03-30T21:42:16Z")

</div>

is there anyway to make a _custom_ rectangle hitbox?

for example, if I’m making an overhead game, but I want my character (whos sprite is 16x16, so very tricky to get into 1-tile holes) to have a smaller hitbox, so it can fit in places easier, and have more 3D-ish collision, is there any way to do that? like draw a hitbox for it, or maybe an extension?

I just wanna know, so that if its fast-paced or something, moving around tight spaces would be easier and less precise (in a good way). I would be really helpful for lots of projects.

---

<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: [March 30, 2026, 9:50pm UTC](https://forum.makecode.com/t/hitbox/22993/14 "2026-03-30T21:50:10Z")

</div>

the way i do this is by dividing my sprite into two: a visible sprite that the player can see and one that they can’t see that serves as the hitbox. like this:

 ![arcade-screenshot (4)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/3X/2/7/278b7cc135c2d29fd92371ac2408f587d6359042.png)

here’s that code: [https://makecode.com/\_JjkdUibhTbqb](https://makecode.com/_JjkdUibhTbqb)

---

<div class="post-metadata">

### Author: ![CodingGrizzlyBear](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/codinggrizzlybear/32/14838_2.png) [@CodingGrizzlyBear](https://forum.makecode.com/u/CodingGrizzlyBear)
#### Post date: [March 31, 2026, 8:12pm UTC](https://forum.makecode.com/t/hitbox/22993/15 "2026-03-31T20:12:55Z")

</div>

Is there a way to make sprites not be able to go on the same space as each other sprites (Sprites being walls)?

---

<div class="post-metadata">

### Author: ![Not\_a\_Potato](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/not_a_potato/32/18462_2.png) [@Not\_a\_Potato](https://forum.makecode.com/u/Not_a_Potato)
#### Post date: [April 1, 2026, 12:39am UTC](https://forum.makecode.com/t/hitbox/22993/16 "2026-04-01T00:39:21Z")

</div>

Thanks! This going to be really helpful for me. Makes sense, too.
