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? [import]uid: 4883 topic_id: 15973 reply_id: 315973[/import]

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. [import]uid: 19620 topic_id: 15973 reply_id: 59165[/import]

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). [import]uid: 4883 topic_id: 15973 reply_id: 59170[/import]

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. [import]uid: 19620 topic_id: 15973 reply_id: 59172[/import]

Not the case. Bird must call a different function than man. :frowning: [import]uid: 4883 topic_id: 15973 reply_id: 59178[/import]

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

  
local manBtn = ui.newButton{  
 default = "man.png",  
 onEvent = manFunction  
 }  
  
local birdBtn = ui.newButton{  
 default = "bird.png",  
 onEvent = birdFunction  
 }  

so each can easily call a different function no problem. If you have a common display group, you can insert both buttons into it.

  
local localGroup = display.newGroup()  
  
localGroup:insert(manBtn)  
localGroup:insert(birdBtn)  
  
--Then i can do anything to the local group and it will affect the two buttons as well  
  
localGroup.x = localGroup.x + 25  
  

[import]uid: 19620 topic_id: 15973 reply_id: 59207[/import]

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. [import]uid: 4883 topic_id: 15973 reply_id: 59220[/import]

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

  
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"  
 }  

besides that, maybe you could somehow use the “object:toFront()” or “object:toBack()” api’s to find a way to make it work. sorry i wasnt of much help! [import]uid: 19620 topic_id: 15973 reply_id: 59223[/import]

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,

?:slight_smile: [import]uid: 3826 topic_id: 15973 reply_id: 59230[/import]