2D GUI and Actions

Noobie question. Is it possible to combine the 2D GUI buttons with mouse actions on meshes? I get that (at least in default case) the GUI intercepts clicks. But is it possible for the 2D GUI to intercept only when a button area is clicked and let other clicks (that are not over any button) to pass through to the mesh objects?

@khkannisto welcome to the forum!

Do you have a playground link that reproduces where the GUI blocks pick events on meshes?

Welcome, K. Yes, easily possible. You can click on mesh itself… in ANY place where label/button doesn’t block. Often, GUI builders will use linkOffsetY property… to place button/label slightly ABOVE (or below) the actual mesh. When label/button is above mesh, it helps prevent the GUI control from blocking on-mesh clicks. linkOffsetX is available, too.

There’s some powerful properties on GUI controls, too… like button.isHitTestVisible and isPointerBlocker that can provide even MORE tools/customizing.

Here’s a test playground for we and Drigax to play-with. https://www.babylonjs-playground.com/#4PLF3P#7 (lots of click-info sent to console)

The green rectangle container (rect1)… is acting like a button here, because of the onPointerDownObservable in lines 34-39. It SHOULD change the rect1 background color every click on the button, but you must mouse off-canvas, and back onto canvas… between clicks. Not sure why.

In line 33, you see rect1 isPointerBlocker set to false. The sphere has an actionManager attached (lines 58-74)… so if you click on the sphere, the label will toggle visibility. Notice that you CAN click the sphere… THROUGH the rect1 background color. If you set line 33 to false, then you CANNOT click the sphere… through the button.

Lines 77-106 is ANOTHER kind of scene picking. It lets you pick sphere, or empty space, or ground (even though ground has no actionManager attached).

So, three types of picking… happening. GUI button picking, sphere actionManager picking, and scene-level pointer observer picking. Wow, huh? Lots of fun experiments and learning can happen in THAT playground. Lines 53-56 might also look familiar… I spoke of those earlier.

Feel free to edit it, press RUN arrow again, make more saves, ask more questions, tell us what you learn. You can’t hurt ANYTHING in our playground… just have fun, learn stuff, and ask stuff… we’re here to help.

1 Like

Perfect, thanks! That example got me going in the right direction.

1 Like