Hitbox Overlap Helper

Enter position and size for two 2D rectangles to check if they collide, compute overlap depth, minimum translation vector, and see a live canvas visualization.

Object A

Object B

Results

Collision:
Overlap width
Overlap height
Overlap area
MTV axis
MTV direction
MTV magnitude
Center distance

Visualization

Object A Object B Overlap

Summary

Enter position and size for two 2D rectangles to check if they collide, compute overlap depth, minimum translation vector, and see a live canvas visualization.

How it works

  1. Enter position (X, Y top-left corner) and size (Width, Height) for each rectangle.
  2. The tool evaluates four AABB inequalities: A.left < B.right, A.right > B.left, A.top < B.bottom, A.bottom > B.top.
  3. If all four hold, overlap width and height are computed as the intersection lengths on each axis.
  4. The MTV picks the axis with the smaller overlap and chooses a direction that pushes the boxes apart.
  5. A Canvas visualization draws both boxes to scale, shading the overlapping region differently.

Use cases

  • Verifying AABB collision math when debugging a 2D game engine.
  • Computing the minimum push distance to separate two overlapping hitboxes.
  • Checking whether a projectile bounding box intersects an enemy hitbox.
  • Prototyping platform collision response by experimenting with different box positions.
  • Teaching game physics students how penetration depth and MTV are derived.
  • Validating hitbox sizes before baking them into a tilemap or sprite atlas.

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu