What is AABB collision detection?

AABB stands for Axis-Aligned Bounding Box. Two rectangles whose sides are parallel to the X and Y axes collide if they overlap on both axes simultaneously. The test is: A.left B.left AND A.top B.top.

What is the minimum translation vector (MTV)?

The MTV is the smallest displacement needed to push one box out of the other. You compute the overlap on each axis and push along the axis with the smaller overlap. The direction is chosen so the boxes separate rather than merge further.

How is overlap width calculated?

Overlap width = min(A.right, B.right) − max(A.left, B.left). Overlap height = min(A.bottom, B.bottom) − max(A.top, B.top). Both must be positive for a real collision.

What does distance between centers mean?

It is the straight-line (Euclidean) distance between the center points of the two rectangles. Useful as a quick spatial reference even when the boxes are not colliding.

Why use AABB instead of circle or polygon collision?

AABB tests require no trigonometry and run in constant time — just four comparisons. They are ideal for tile-based games, platformers, and anywhere boxes approximate the object shape well enough. More complex shapes use AABB as a cheap broad-phase pass before an expensive narrow-phase check.

Can I use this for 3D games?

No — this tool handles 2D rectangles only. 3D AABB adds a Z axis with the same logic: overlap on all three axes simultaneously signals a collision.

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

X (left)

Y (top)

Width

Height

Object B

X (left)

Y (top)

Width

Height

Results

Collision: —

Overlap width —

Overlap height —

Overlap area —

MTV axis —

MTV direction —

MTV magnitude —

Center distance —

Visualization

Object A Object B Overlap

Summary

The Hitbox Overlap Helper checks whether two axis-aligned bounding boxes collide and, if they do, computes the exact overlap dimensions, overlap area, and minimum translation vector (MTV) needed to separate them. A live HTML5 Canvas renders both boxes and shades the overlap region so you can see the geometry at a glance. All math runs client-side.

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-06-19 · Reviewed by Nham Vu