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
- Enter position (X, Y top-left corner) and size (Width, Height) for each rectangle.
- The tool evaluates four AABB inequalities: A.left < B.right, A.right > B.left, A.top < B.bottom, A.bottom > B.top.
- If all four hold, overlap width and height are computed as the intersection lengths on each axis.
- The MTV picks the axis with the smaller overlap and chooses a direction that pushes the boxes apart.
- 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