Hi,
I’ve got a gui with two containers, both containing buttons. The second container has an image with transparency and overlaps the first one a little bit.
The first buttons mouse events however seem to be blocked by the second image, since they don’t trigger in the overlapping area.
Is there a way to solve this issue? I’ve tried using different z-index values and also setting isPointerBlocker, but this did not change anything.
Here’s a playground: https://playground.babylonjs.com/#C5BL8Z#1
The zIndex refers to ordering of controls in their parent containers, so since the buttons are in two different containers, their zIndexes won’t affect each other. Instead, I would make the surrounding container of the circle image a circle (by using Rectangle’s cornerRadius), and adjust the container size so that there isn’t this overlapping empty space: Babylon.js Playground (babylonjs.com)
The circle image in the playground is just an example, the real image is only half of a circle (only the outer line, with the center on the overlapping side), so I can’t use your solution in my case.
Is there any other way to solve this, or does an overlapping container always block the mouse events and I have to think of a different solution?
Edit: This is how it looks like (the dotted line shows the size of the second image) :
There (nearly) always is another way in BJS For example, you could still split the button in two parts and ‘sandwich it’ with your ‘mask container’. Let me explain:
Create the button image as an image or container (i.e. a rectangle)
Have your overlapping/mask container on top of it
Have your button with mouse event on top of all with a transparent background
Else, I believe it would be cleaner to just work your button shape as an image. You can use an svg or a 9-patch.
This could work, but since both containers are separate classes I would need another container on top it.
And the buttons are dynamic, and depending on how many buttons are visible their position also changes.
I think I’ve found a solution myself, by just setting the z-Index of the first container to a higher value, so it’s on top of container2. The first container doesn’t overlap any buttons of the second one, so this should work in my case. https://playground.babylonjs.com/#C5BL8Z#4 (the playground graphics aren’t the best choise here, since both my real images are transparent).
For example, you could still split the button in two parts and ‘sandwich it’ with your ‘mask container’. Let me explain:
I wasn’t sure about the transparency of your images so I didn’t suggest it before 
