How to touch a ui button without touching the background behind?

[Leo56765]

Hi,
how can I touch a UI element without touching the grass behind the ui? The touch event for the grass catches the events, any ideas?
When I check for the “id”, it will still trigger the event on the grass before the event on the ui button is triggered.
If I check the x,y inside the bounds, unfortunately, depending on the phone I am using, the coordinates are different (for example, the 0,0 point is different from the event.x,y and the location of the ui button)

[sentryarchlabs]

return true in tthe tap/touch event to prevent the touch from propogating through.

[Leo56765]

Thanks, can you explain how you would do it? I have got the grass rect with a listener, and the jump button with a listener, the grass will catch the event separately from the jump button.

[XeduR]

You can look at the documentation for examples:

Solar2D Documentation — API Reference | Events | touch

[Leo56765]

Yeah … thanks but I checked the doc and I would appreciate a little bit of help
If I add a listener to each object, it works fine but since I have 2 listeners for 2 objects, the two are triggered.
if I follow an example in the doc, with the “object:” function and “self.id”, the problem is, that it is in a scene, so if I first load the scene functions, and if I declare object:myFunction, it says the object is “nil”.
Then to avoid that, if I put the code right before the function, I don’t use the scene: functions anymore, and there are variables related to the object so it’s a mess.

here is some code to see how I do :

function scene:create( event )
    sceneGroup = self.view --I need sceneGroup to add the grass ("gazon")
end


function scene:show( event )
    sceneGroup = self.view
    local phase = event.phase
    if ( phase == "will" ) then
        sceneUI = composer.loadScene( "sceneUI", false)
    elseif ( phase == "did" ) then
        initGame()


function initGame()
    initTilesArray()
    …
    initDecor() --here , I need this function after initTilesArray


function initDecor()
    local scale = 2
    infoWidthWorld = display.actualContentWidth*scale
    gazon = display.newRect(display.contentCenterX, display.contentCenterY, infoWidthWorld, display.actualContentHeight*scale)
    gazon:setFillColor(0.47, 0.86, 0.2) 
    gazon.id = "gazon"
    gazon:addEventListener("touch", gererAjoutTileSurGazon)
    sceneGroup:insert(gazon)

function gererAjoutTileSurGazon(event)
    local x = math.round(event.x / wTile) * wTile 
    local y = math.round(event.y / hTile) * hTile

    if ( event.phase == "began" ) then

and if I declare the function with :

function gazon:gererAjoutTileSurGazon(event)

it triggers a “nil” error.

[napolimatiase]

Hi Leo56765. Did you refactor your code to have a similar structure as the documentation one? If that the case, you are not bound to do so. The only thing you had to add to your code is return true to the listener, so tap won’t propagate to underlying objects.

If you already had the last issue you are pointing, then you should’ve posted it in a different thread, for the sake of forum’s organization. To solve it, you should structure your code in a way you don’t call undeclared functions and you don’t use nil variables as references.

[Leo56765]

Thanks for the answer.
I finally found why! It does not work if you use a “tap” function on the ui button, and a “touch” function on the object behind. The two objects must have a “touch” listener, or a “tap” listener, so that the “return true” works.
Man…
Thanks for the answers though, it helped!