Trying to figure out how to make a Button's hitArea defined as the non-transparent png portion

[thisisforreal]

I have a button that looks something like a trapezoid (with a few curved parts  with the rest of the png transparent:

 

 

I would love to make just the non transparent portion of the image behave as a button.  That is, if the mouse or finger hovers/touches/clicks the transparent portion nothing would happen.  Is there an easy way to make this happen?  Or a difficult way?  I'll take either at this point.

 

I'm a complete beginner - but have tried to scour the web for a while the past 2 days but with no luck.  I've seen some documentation, but I'm new enough this is greek to me.

 

 

If anyone out there has done something like this in the past and can provide an answer, or some clues to get me going in the right direction, I'd be most grateful.  I don't have a background in OOP, so methods and classes and the like are all still fairly new concepts to me, but when I see example code, I can put two and two together quickly.  Much obliged!

[chongdashu]

Disclaimer: This is just going off what I saw in the docs. I've not done this before

 

What you need to do is first define the polygonal shape. Since you have a trapezoid, it'll probably be something like;

//    (0, 0)//    *  //    |    *//    |         * (10, 4)//    |         |//    |         * (10, 8)//    |    * //    *//    (0, 12)var vertices = [    0, 0,   10, 4,   10, 8,   0, 12];var polygon = new Polygon(vertices);var sprite = this.game.add.sprite(0, 0, "button");sprite.hitArea = polygon;

I didn't go into too many details - I'm not sure whether the polygon is in local space or in world space (I suspect local space). But this should be what you need to get started. You'll need to adjust accordingly depending whether your anchor is in the center, etc. The above is assuming the anchor is in the top-left corner.

[jmp909]

chongdashu.. gotta read through the examples! there's a simpler way... although possibly more expensive as maybe polygon means less pixel checking than this method. in fact I didnt' even know about your method so thanks!

 

http://phaser.io/sandbox/CcWEiIOO/play

http://phaser.io/examples/v2/input/pixel-perfect-click-detection

 button.input.pixelPerfectOver = true

[chongdashu]

 

chongdashu.. gotta read through the examples! there's a simpler way... although possibly more expensive as maybe polygon means less pixel checking than this method. in fact I didnt' even know about your method so thanks!

 

http://phaser.io/sandbox/CcWEiIOO/play

http://phaser.io/examples/v2/input/pixel-perfect-click-detection

 button.input.pixelPerfectOver = true

 

Aha! Nice find, @jmp909. Didn't think that Phaser had a pixelPerfect thingum!  Thanks too!

[thisisforreal]

Thank you all so much for your help!  This community is such a blessing for novices like myself.