Non-Rectangle Button

talis

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

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

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

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

davidtse

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

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

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.