HTML and CSS Reference
In-Depth Information
Generating the Convex Hull
Generating a convex hull should be done offline, ahead of time, so that you can reduce the loading time for your
HTML5 game. As such, I threw together a simple C++ app that loads a sprite, calculates its convex hull, and outputs
JSON data that you include in the HTML file. Your mileage may vary.
I'll spare you walking through the C++ details here, as the code itself is simple. It opens an image and calculates
for each scan-line the min/max pixels that represent alpha boundaries (see Figure 5-8 ). From there, it uses a modified
QHull algorithm (which you can get at www.qhull.org ) to determine what the maximum convex hull is for the set of
spatial points.
Figure 5-8. Hull generation process. Per scan-line, you find the min-max pixels for that row and toss those at a convex
hull generator
The hull points are dumped to individual files, which for simplicity, I've manually added the hull data to the
HTML file.
var cHullData=[
{"name":"0.png", "hull":[{"x":0,"y":16}, {"x":1,"y":15}, {"x":31,"y":0}, {"x":34,"y":0},
{"x":64,"y":15}, {"x":65,"y":16}, {"x":65,"y":25}, {"x":64,"y":26}, {"x":34,"y":41},
{"x":31,"y":41}, {"x":1,"y":26}, {"x":0,"y":25}, {"x":0,"y":16}]},
//See source code for the full list of hulls defined by our tool
Once again, it's worth pointing out that this method of spitting out per-file information may not be the correct
way to handle the issue of getting hull information into your data chain (your mileage may vary). It's merely provided
as an example to help you understand the process and determine the right integration paths that best suit your needs.
Doing Picking Against the Convex Hull
To transition from per-pixel picking to hull picking, you need to make a few small changes. Firstly, a sprite prototype
needs to load the hull data, rather than fetching the image pixel data. This is an easy task, as the hull building app
will spit out the image name for a hull, so that when an image loads, you can look up the proper hull for the image
(see Listing 5-15).
 
Search WWH ::




Custom Search