I’m trying to create the UI for my game. The UI will have multiple interactive elements. I find that when my UI has more than one control, the click observers for controls seem to be lost. Below is some example code copied from the playground that illustrates the issue.
As an added bonus, the mouse over observers only trigger when way above the controls, which seems wrong.
So I discovered that adding the text blocks after the buttons is what is causing the pointer events to be hidden. I dont know if this is a bug or some quirk of babylon.js I was supposed to know about. Is there a way to cause pointer events to trigger the events of all clicked elements, or at least to pass through those that dont have triggers?
Welcome aboard!
By default, a control width/height is 100%, so take all the screen space. As the text controls are created after the other controls, they are the first ones tested for pointer clicks and trap them.
You should either set the width/height of your two text controls to better fit the texts, or set their zIndex property to be behind the other controls (a value of -1 will do it, for eg).
Ah! Of course the size and z-index. Thanks so much for the help!