javascript - kineticJS createImageHitRegion for sprites, not images

Question

I am using KineticJS and wish to create a precise image hit region (ignore transparent pixels) for my sprites. I see how createImageHitRegion accomplishes this for images, but I don't see how to apply this to sprites. Said another way, while method createImageHitRegion is a method which accomplishes what I want for images, there appears no similar method for sprites. If I could create an image hit region on just one image of each of my sprite that could work for me, but a big rectangular region which encompasses the entire width and height of the image of the sprite can't work. Any ideas for a workaround? Perhaps I've missed something?

Answer 1

There's no easy way hit-test non-transparent pixels on sprites.

I can think of a couple of theoretical workarounds...

If you can draw a path outlining the pixels you want to hit.

The sprite object allows a custom drawHitFunc so you could use mySprite.afterFrame to redefine a custom hit area for each of your sprite images.

mySprite.afterFrame(0, function() {
    mySprite.setDrawHitFunc(function(){
        // draw the path you want used for frame#0 
    });
});

// repeat for all frames

If you can't draw a path outlining the pixels you want to hit.

Instead of using sprites, make your own sprites using individual images.

Do that by creating a series of images (including createImageHitRegion) and sequentially making one of those images visible so it appears to be playing a spritesheet.