A game finds out when two things touch
Collision detection is how a game finds out that two things touch. It decides whether a star is caught, a bullet hits or a player walks into a wall.
Games test simple shapes, boxes and circles, because a screen can hold hundreds of things and every pair may need checking on every frame.
By the end of this lesson
Note
I can test whether two boxes or two circles overlap.
Key words
| Word | What it means |
|---|---|
| Collision | two things touching or overlapping |
| Bounding box | the smallest rectangle that holds a shape |
| Overlap | sharing some of the same space |
| Radius | the distance from the centre of a circle to its edge |
| Hitbox | the shape a game uses to test for a collision |
The cells students fill in are left blank in this preview.
Boxes overlap when both ranges overlap
A box has a position (x, y), a width w and a height h. Its x range runs from x to x + w. Its y range runs from y to y + h.
Two boxes overlap when their x ranges overlap and their y ranges overlap. Two ranges overlap when each one starts before the other one ends.
Worked example: four pairs of boxes
| Box A (x, y, w, h) | Box B (x, y, w, h) | Overlap? | Why |
|---|---|---|---|
| 0, 0, 10, 10 | 5, 5, 10, 10 | Yes | Both ranges overlap |
| 0, 0, 10, 10 | 20, 0, 10, 10 | No | A ends at 10, B starts at 20 |
| 0, 0, 10, 10 | 10, 0, 10, 10 | No | They only share an edge |
| 0, 0, 10, 10 | 0, 30, 10, 10 | No | Same x range, but y is far apart |
The cells students fill in are left blank in this preview.
Try it: test two boxes in JavaScript
<pre id="out"></pre>Run the lab's overlap test on six pairs
docker exec jupyter python3 steps/collide.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
The lab script tests six fixed pairs
The script runs the same test the game uses, written in Python, on six pairs of boxes. It prints a name and True or False for each.
Apart, edges touching and same column far apart print False. Overlapping, one inside the other and one corner inside print True. A box that only touches an edge is not a collision, because the test uses strict signs.
Two circles overlap when the centres are close
A circle has a centre (x, y) and a radius r. Two circles overlap when the distance between the centres is less than the two radii added together.
Finding a distance needs a square root, which is slow. So games compare squares instead: dx * dx + dy * dy is less than (r1 + r2) * (r1 + r2). Here dx and dy are the gaps between the centres.
Worked example: three pairs of circles
| Circle A (x, y, r) | Circle B (x, y, r) | dx, dy | Squares compared | Overlap? |
|---|---|---|---|---|
| 0, 0, 5 | 8, 0, 5 | 8, 0 | 64 < 100 | Yes |
| 0, 0, 5 | 10, 0, 5 | 10, 0 | 100 < 100 is false | No |
| 0, 0, 2 | 3, 4, 3 | 3, 4 | 25 < 25 is false | No |
The cells students fill in are left blank in this preview.
A common mistake
Warning
Many people check only one direction. If two boxes share the same x range, they only collide when their y ranges overlap too. Test both directions, and join the two tests with and. One failed test means no collision.