Non-Rectangle Button

talis · July 2013

Hi everyone,

I have a problem about non-rectangle button with a png image like in the attachment.
In my design there is a big circle and this circle divided into buttons. Those buttons have leaned text on them.(White leaned paint like in the attachment) In the middle of circle there is another circle sound button.

My problem is, those small buttons activating even i am pressing on transparent sides and blocking the main click on the middle sound button or other buttons.

Any ideas how to solve it? Can i define custom click points using button class somehow?

any help will be appreciated

Talis

talis · July 2013

Ok when i change the order of adding to stage i minimize the problem. I am putting the circle sound button as the last and make a invisible rectangle button in the very middle. But still not the perfect solution. Any more ideas will be appreciated.

john26 · July 2013

Normally you use hitTestPoint to test if a tap is inside a sprite. But this only works for rectangular sprites. In your case you need to replace hitTestPoint with a function of your own to test if the tap is inside your shape. And you probably can't use button class, you will need to go "back to basics" and test manually with MOUSE_DOWN events.

tkhnoman · July 2013

i'm using this one:
http://www.giderosmobile.com/forum/discussion/218/how-to-get-spritehittestpoint-to-ignore-transparent-areas-of-image

davidtse · July 2013

i'm using this one:
http://www.giderosmobile.com/forum/discussion/218/how-to-get-spritehittestpoint-to-ignore-transparent-areas-of-image

thanks a lot!

talis · July 2013

Thank you very much for the fast replies. I solved my problem by changing my design a little bit, opening the spaces between buttons.

john26 · July 2013

You shouldn't need to compromise in this way. Say the MOUSE_DOWN event is at (x,y) and you circle (picture above) is at (x0,y0). Then (x,y) is inside the circle if (x-x0)^2+(y-y0)^2 < r^2 where r is the radius of the circle.

For a ring you test

r1^2 < (x-x0)^2+(y-y0)^2 < r2^2

where r1 is the inner and r2 the outer radius.

For the button at the top left of the picture with the speaker in the middle:

r1^2 < (x-x0)^2+(y-y0)^2 < r2^2
AND xy1

where x=x1 is the vertical line terminating the dark green button and y=y1 the horizontal line.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Non-Rectangle Button

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Non-Rectangle Button

Comments