Collision Detection
How do games know when things touch?
How do games know when things touch?
Every frame, games ask thousands of times: "Are these two things overlapping?" Drag the shapes to see collision in action. When they overlap, they turn green!
Games can have 100+ objects. Checking every pair means 5,000+ collision tests per frame!
Each collision must be detected within 16ms. That's why simple math is crucial.
The simplest collision check! If two boxes don't overlap on ANY axis, they can't be colliding. We just need 4 comparisons. Drag the boxes to test!
These boxes can't rotate - their edges are always parallel to the X and Y axes. This makes the math super fast! For rotated boxes, you need more complex algorithms.
Circles are even simpler! If the distance between centers is less than the sum of radii, they're colliding. Drag the circles to see the math in action!
Square roots are slow! Games often compare distance² vs (r₁+r₂)² instead. Same result, faster math!
Balls, coins, bullets, explosions, character hitboxes - anything roughly circular!
What if you need to check a circle against a box? Find the closest point on the box to the circle's center, then check if that point is within the circle's radius!
1. Clamp circle center X to box's left/right edges
2. Clamp circle center Y to box's top/bottom edges
3. That's your closest point!
4. Check if distance from closest point to circle center < radius
Game characters have complex outlines, but collision uses simple shapes. Why? Performance! Watch how many collision checks happen in real-time.
comparisons
operations
per object pair!
A single box can't fit a character's shape! Games use multiple simple colliders combined. This character has separate hitboxes for head, body, and limbs - each can detect hits independently!
Drag launcher to aim | Click to select | Drag to move/resize | +Add for new shapes
Extra damage in shooters!
Different armor zones
Disable arms or legs
Hollow Knight's main character uses about 30 different collision shapes! Different hitboxes for attacking, getting hit, and touching the environment.
How does a game know if you clicked ON a button or character? The "ray casting" algorithm! Cast a ray from the point - if it crosses an odd number of edges, you're inside. Click anywhere!
With 100 objects, checking every pair = 4,950 checks! But objects far apart can't collide. Spatial partitioning divides space into cells - only check objects in the same cell!
Recursively divide space into 4 quadrants. Great for varying object density!
Simple fixed grid. Fast and easy to implement. Used in many 2D games.
Put it all together! Control the player with arrow keys or WASD. Collect coins, avoid enemies, and see collision detection in action!
Click canvas, then: Arrow keys/WASD = move
You've learned how games detect when objects touch! From simple boxes to complex compound colliders, you now understand the math behind every jump, hit, and pickup.
Axis-aligned boxes: 4 simple comparisons
Distance vs sum of radii
Find closest point, check distance
Complex shapes from simple ones
Ray casting for click detection
Optimize by dividing space
Put your new knowledge into practice!