Faster Canvas Picking - HTML5 Game Development Insights - page 81

Listing 5-15. Updating the SpriteProto definition to support convex-hull picking
function SpriteProto(){
//...
this.load= function(filename,w,h)
{
var targetSpriteProto = this;
this.size.w = w;
this.size.h = h;
var img = new Image();
img.onload = function(){
targetSpriteProto.imgHandle = img;
for(var u =0; u < cHullData.length; u++)
{
var thull = cHullData[u];
if(thull.name == filename)
{
targetSpriteProto.hullData = cHullData[u].hull;
break;
}
}
}
img.src = filename;
};
})
To determine if a mouse click (i.e. point) is inside your new convex polygon hull, you utilize a method of
point-in-polygon testing known as ray casting , which performs its test by casting a line through the 2D polygon,
through the point in question (see Figure 5-9 for an example). For each line that your ray intersects, you toggle a
Boolean value to determine if you're in or out of the polygon; see Listing 5-16.
Figure 5-9. An example of ray casting to determine if a point is in a polygon. The line runs through the polygon an even
number of times, signaling that the point is not inside the polygon boundaries