Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Pseudo 3d Collision Detection in a 2d World (AS3)
736
single,single-post,postid-736,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
The extra "z depth" hit state used to fake the z plane

Pseudo 3d Collision Detection in a 2d World (AS3)

Seven2 recently completed the core engine & first level for the Kung Fu Panda game “Tales of Po” hosted by Nickelodeon:

This is an Adobe Flash/AS3 classic side-scrolling brawler game (think Double DragonCastle Crashers, etc). Executing this type of pseudo 3-dimensional game (x,y,z) in a space that in actuality is only 2-dimensional (x,y), creates two main problems:
depth sorting & collision detection.

For depth sorting, I published a utility class that automatically solves this problem, which you can download from here. The focus of this article will be on solving the collision detection issue.

In many fast-paced action games, such as Tales of Po, pixel-perfect collision detection is not necessary and would only hurt performance unnecessarily. So instead we use the much faster hitTestObject() operation. In a purely 2d space, you would use two invisible Sprites:

  1. The character’s “defense” (the green square in the image above, which represents the area that could be hit by an opponent)
  2. The character’s “offense” (the red square in the image above, which represents the attacking area that could harm an opponent if connected with their defensive Sprite).

Then, in a collision manager class, on every frame update you would test the good guys’ offensive hit states (if one currently exists) against each of the bad guys’ defensive hit states, and visa versa.

This allows you full control over the size & position of the attack & defensive states on every frame of the timeline. If the character is ducking or rolling, just reduce the size of the defensive hit state during that animation. If the character is punching, gradually increase the size & position of the offensive hit state as the fist flies forward. If they aren’t currently attacking, just remove the offensive hit state from the timeline during those frames altogether. Performance is great and you can have as much control as you’d like by simply manipulating the timeline.

This all works great in 2 dimensions, but what if the character can move toward or away from the camera. Since we aren’t using a 3d engine, the z plane must be faked to ensure that we don’t generate false-positive hits between two characters that are not actually aligned in the z plane.

An easy solution for this problem is to add one more hit state:

In the image above, note the new purple square. Imagine that this purple box is laying flat across the ground below the character’s feet. It is intended to represent the character’s “width” across the z plane.

Now, if one character’s offensive hit state collides with another character’s defensive hit state, then one final check should be made to see if the z-hit state of both characters are also colliding. If they are, then the collision is successful:

If the purple z-hit states aren’t touching, then even though the attackers offensive hit box (red) did collide with the defenders defensive hit box (green), the hit was still unsuccessful overall since one character was not in “z-alignment” with the other:

This technique also allows you to easily create Area of Effect (AoE) attacks be simply expanding the offensive hit box (red) to cover the magnitude in the x direction, and the z hit box (purple) to cover the magnitude in the z direction:

One final note, is that the the z hit state (purple) should always be the same width or just slightly wider than the character’s defensive hit state + offensive hit state (this ensures accurate hit tests are always done).

And that’s it! Now go play some Tales of Po to see this all in action!