HTML and CSS Reference
In-Depth Information
While this method works, and produces pixel-perfect results, it presents two primary issues.
1.
Image data, which is normally stored in your JavaScript layer behind the scenes, now has
to be duplicated in your scripts. As such, this results in a larger memory footprint, often
more than double the size since your in-memory copy is uncompressed.
2.
It's currently unclear how an array look-up affects performance in JavaScript under
the hood. In C++ you have the ability to avoid CPU addressing issues like L2 Cache
optimization for array traversal, which is completely missing in JavaScript. On my 12-core
work machine, a single pick against 4096 images takes around ~2ms. I'd imagine on a
phone it would be
significantly
longer.
And finally, it's unclear if you
really
need pixel-perfect picking for
every part
of your game. For instance, the user
may benefit from a more loosely defined picking area that allows an extension of the valid picking area beyond the
pixel boundaries around the object, in an attempt to reduce user picking frustration.
Convex Hull Picking
While pixel-perfect picking represents the most resolution-specific solution you can produce for selecting objects,
it has a large downside of increased memory footprint and potential performance burden for slower devices. For
example, if you had a 1024x1024 image, that may only be 64k in PNG form, but once you fetch it to main memory,
it's now 4MB. There's really no (good) way around this, since the
getImageData
function on canvas returns RGBA data
uncompressed; even if you pass in a grayscale image, you'd get the full pixel footprint.
Ideally, it would be great to get a lower-memory
representation
of the image without having to store the whole
thing in memory. And to that end, I'm going to introduce the concept of using convex hulls for picking.
Effectively, a convex hull is a minimum representation of the
shape
of your sprite, without curving inward towards
itself (i.e. being concave). See Figure
5-5
for a representation of a convex hull versus a traditional bounding box.
Figure 5-5.
Visualizing the difference between a bounding box (which is always some form of rectangle), a convex hull
(which is not allowed to “curve inward” on itself ) and a concave hull (which allows itself to curve towards the source
object boundaries)
