Babylon GUI alpha of container overriding alpha of children controls


#1

Not sure if this is actually a bug, but when I make a container in Babylon GUI and make it transparent, anything added to that gets the same alpha value even if I set it to be fully opaque. Strangely, the children can have different alpha values if I make them lower than the parent, just not vice versa. The use case is that I wan transparency in the background but fully opaque text. I can make a PG if you need proof or an example, but it’s a pretty straight forward thing. Is this some kind of technical limitation or is there a way to do this already? If not then is this something that should be fixed/changed?

Thanks.


#2

The alpha value is inherited as you mentioned. In your case (like in CSS or XAML) you can create a container, add a rect in the container and make that rect transparent with the color you want.

Example: https://www.babylonjs-playground.com/#XCPP9Y#829


#3

https://www.babylonjs-playground.com/#1KFAAH
Not bug. I think.
Two displays. Choose according to your demand.
Just like : Closing one of the multiple screens. Or turning off the computer, all screens closed. :slight_smile:


#4

Thank again Deltakosh. I wasn’t aware the rectangles can be used that way as just a background.


#5

Actually, I don’t think this works with stack panels. I can’t add the background rect to the stack panel without it pushing everything else down, and any other container seems to need a defined height and width (hence I am using stack panels). Is there something I am missing?


#6

Nevermind, I discovered the adaptive sizing section in the documentation. Thanks.


#7

Glad it worked


#8

The adaptive sizing didn’t work out for me… it seems to have some issues and was taking up the entire width or height of the window. I ultimately decided to calculate the proper width and height and just set it explicitly though, so I won’t have to use it. I may have been doing something wrong, but this is probably better anyway.