Jump to content

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


thisisforreal
 Share

Recommended Posts

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

 

SF11dZ4.png

 

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.

 

Y0lPcZn.png

 

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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
Link to comment
Share on other sites

 

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...