HTML and CSS Reference
In-Depth Information
However, as with all things, there is a trade-off. As collision detection methods get easier, they get less
accurate. As they get more accurate, they become more complex and computationally-intensive. So, while
this is the easiest method, it is also the least accurate.
What do we mean by hit testing accuracy—either something is hitting or it's not, right? Well, it goes back to
this question: Based on the positions of two objects, how do you determine if they are hitting?
In the bounding rectangle method that was just described, you take the first object and draw a rectangle
around it. The top edge of the rectangle goes on the topmost visible pixel of the object's shape, the bottom
edge goes on the lowest visible pixel, and the left and right edges are on their furthest visible pixels. Then
you do the same for the object you're testing against. Finally, you check whether these two rectangles are
intersecting in any way, and if so, you have a collision.
Figure 9-1.
A bounding box
This rectangle around the object is known as a bounding box, and it's calculated for our ball based on its
position and size. It's normally invisible, so it is explicitly drawn as rectangle around the shape in Figure 9-
1 so you can see it.
Why would this be inaccurate? You might think that if the bounding boxes intersected, the objects must be
touching. Well, take a look at the pictures in Figure 9-2. Which pairs would you say are touching each
other?
Figure 9-2.
Which ones are touching?
Obviously, only the squares are actually hitting, right? Well, let's draw in the bounding boxes and see what
the calculation sees. Figure 9-3 shows the results.
