Hitboxes – Using Rectangles To Make Complex Shapes

Video Games — Game Development in particular — is often viewed as a geeky thing that guys do. I doubt my romantic app “Secret Admirer” is going to significantly change that perception. However, if you are a geeky game developer guy, you might not want to overlook the construction of this app. I’m pleased with the way the Secret Admirer pinball game turned out. The secret — hitboxes. Invisible rectangles and circles define the areas of collision.

Ryu from Street Fighter II, with hitboxes

Many years ago, I was introduced to hitboxes while playing Street Fighter II. The main characters have complex shapes, but invisible rectangles are doing all of the work. That’s where the collisions are happening. If the collision shapes were an exact representation of the image, it would put a huge strain on the computer. To compensate, large boxes are used as approximations. A punch or kick is registered when a red hitbox overlaps with a blue one. If you have a copy of Super Street Fighter II Turbo HD Remix on the PlayStation 3, you can see this technology in action. In a training match, it’s possible to display the hitboxes. Hardcore Street Fighter players like to see this data. It helps them to practice.

If you’ve ever thrown a punch in Street Fighter, and then wondered why it did land, a hitbox might be responsible. It’s not a perfect technology, but it can significantly boost performance.

The same general idea was used to make my pinball game. I used GameSalad to create it. The SDK brings speed and ease to Game Development. But one thing it doesn’t bring – pixel detection. It only uses circles and rectangles for collision detection. Surprisingly, that’s not as limiting as it seems. If three boxes can be used to make up Ryu, a pinball game should be straightforward.

The hitboxes from the pinball game of Secret Admirer are shown.

In the above image, Rectangular actors are being used for collision detection. Even the flippers use rectangles for collision detection. While all of the transparent images look like rectangles and squares, some of them are actually using circular based collision detection. The boxes over the bumpers, those are basically circles. Those little blue boxes on the top of the rails, those are basically circles too. Those little blue pegs helps in keeping the ball from getting stuck. The ball will roll off to the side of the rail. The result is a smooth looking pinball game.

If you want to learn more about game development with GameSalad, you might be interested in The Unofficial GameSalad Textbook.