GUI elements attached to control no alpha?

I was looking for a answer to this but could not find anything sorry if I didn’t look hard enough, I’m trying to render the text attached to a control that has a alpha of 0.3 but I can’t seem to figure out how to remove the alpha values for child controls: https://www.babylonjs-playground.com/#XCPP9Y#1317

Hi @i73

You can get a corrected alpha by dividing by parent’s alpha (does not work if parent is 0)
https://www.babylonjs-playground.com/#XCPP9Y#1318

Or you can separate the rectangle from the textblock, and put them in a shared container
https://www.babylonjs-playground.com/#XCPP9Y#1319

2 Likes

Thank you so much Weirdo, though I have one question why does dividing by the parents alpha work? I would have never come to that solution on my own.

Hi @i73
The alpha value is inherited,
So if the parent have 0.5 alpha, and child have 1.0,
the child effectively have 1 (100%) of 0.5 = 0.5.

By dividing, we can get a corrected alpha,
we want the value/effect of 1 alpha, parent have 0.5, so with the above in mind,
to get the effect of 1 alpha, it actually has to be 2, (2x parent alpha)
1 / 0.5 = 2

So now the math looks like this:
2 (200%) of 0.5 = 1