ui buttons with images overlapping

Hello,

Using ui.lua I face an issue when two buttons (images) boundaries overlap. Although the overlapping area is transparent, the latest image always takes precedence, even when it is not the desired situation.

Is there a way to set the clickable boundaries of a button?

in my experience it will always make the boundries of the image be clickable, if it is transparent anyways, why not crop the image and chop off the transparent part? If you are setting a button's alpha to 0 (so its transparent) then you can do: object.isHitTestable = false. This means while its totally transparent, it cannot receive touch events.

Whenever is possible, i do the same (crop images). however there are some scenarios this is not possible (for example, you may have a bird on the shoulder of a man - both bird and man are buttons).

in that case you will need to make them both separate buttons(and images), and they can both call the same event when clicked. Then its just a matter of moving both objects together, if you are moving them, you could put both inside the same display group to make it easy to move them both at the same time and keep them together.

Not the case. Bird must call a different function than man. :(

oh well thats ok, its the same setup. for example you have two buttons like so

1
2
3
4
5
6
7
8
9
local manBtn = ui.newButton{
                    default = "man.png",
                    onEvent = manFunction
                 }
 
local birdBtn = ui.newButton{
                    default = "bird.png",
                    onEvent = birdFunction
                 }

I think I wasn't clear (sorry), I can easily create the code for the 2 different buttons. the issue here is the fact there is a particular are what the boundaries of each image cross. with that, the button in the back never fires.

ah sorry i see what you are saying... im not sure what to tell you except for a few ideas that might or might not work. when you are building your button you can give it an id. you might be able to have a single function, and then use the id to determine which has been pushed.

for example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
local thisFunction = function( event )
 
if event.phase == "release" and event.id == "man" then
 
--do whatever
 
elseif event.phase == "release" and event.id == "bird" then
 
--do whatever
 
end
end     
 
local manBtn = ui.newButton{
                    default = "man.png",
                    onEvent = thisFunction,
                    id = "man"
                 }
 
local birdBtn = ui.newButton{
                    default = "bird.png",
                    onEvent = thisFunction
                    id = "bird"
                 }

you have some very good explanations in there, I'll try to just say in simple terms,

if you were to spill water on some pages randomly placed on each other with slight overlap, the page on the top will be the wettest and the page on the bottom the least.

So the touch will always first go to the object on the top, if you do not want it to handle, do not handle it or move that object to the below the object you want handling the touch first on top.

If you handle the touch, return "true" signifying that you have handled the event so that it does not get passed on to the other objects.

cheers,

?:)

views:1816 update:2011/10/18 8:54:01
corona forums © 2003-2011