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).
Oh, using zIndex in the container is a great solution I wasn’t sure about the transparency of your images so I didn’t suggest it before
Luv it when people find the answer to their own issue
Have a wonderful day