Faster Canvas Picking - HTML5 Game Development Insights - page 77

Listing 5-13. Updating the picking logic to take into account zIndex depth
if(!ps.isPixelTransparent(lclx,lcly))
{
//do depth test (if applicable)
if(pickedSprite && sp.zIndex < pickedSprite.zIndex)
continue;
pickedSprite = sp;
}
The isPixelTransparent function for the proto-sprite does very simple logic. It effectively fetches the pixel of the
image in RGBA (that is, Red, Green, Blue, Alpha) form, and tests if the alpha channel of that pixel is greater than some
threshold. The threshold is important, as most artists can add gradient falloffs, drop shadows, and other items which
increase the visual of the item, but shouldn't be considered for picking purposes; see Listing 5-14.
Listing 5-14. isPixelTransparent is an important function which determines if a given pixel should be considered for
collision or not
function SpriteProto(){
//other stuff here
this.isPixelTransparent=function(lclx,lcly)
{
var alphaThreshold = 50;
var idx = (lclx*4) + lcly * (this.imgData.width*4);
var alpha = this.imgData.data[idx + 3];
//test against a threshold
return alpha < alphaThreshold;
};
}
Results and Caveats
The results, as shown in Figure 5-4 , are quite nice. You can select the right object out of a very complex pixel coverage area.
Figure 5-4. The results of a pixel-perfect picking. Users can select sprites which may be complex or hidden under other
objects in Z-ordering