Button Transparency

Questions
1

Hey everyone,

I am trying to make a button that has the background to be 50% transparent, however, i dont want the the whole button to be 50% transparent. Here is a playground i made:
https://www.babylonjs-playground.com/#XCPP9Y#836

So i made a seperate rectangle to simulate a background, that is able to change without impacting the whole button. However even when i add that background to the button through button.addControl(buttonBackGround) it doesnt follow the button click animation.

Any idea what im doing wrong or how to fix it? :slight_smile:

2

so i just put this code into my game and it just worked. Not sure whats up with that. But glad it worked…

version “4.0.0-alpha.8” of babylonjs

3

Hi Rah.

Um, you have no button observers. I added a few.

https://www.babylonjs-playground.com/#XCPP9Y#837

Also, button is not a container, so you can’t add a control to it. But rectangle IS a container.

So, I put the button INTO the rectangle, and put the rectangle into the advancedTexture.

I removed the height/width from button, and instead set a width/height on the rectangle.

I have 4 (actually 5) observers attached to the button. They all change the color of the RECTANGLE background (leaving button color alone). I just used rectangle’s background color… as a way to show that all 4 observers are working.

The onPointerMoveObservable IS working, too… but it does nearly nothing, just like me. :slight_smile:

None of the observations attached to the button… are being blocked by rectangle… so you have good z-index setting… which might be removable.

Anyway… yeah, buttons ARE containers… but… only at a real low/private layer. They are not designed to be used as containers. Rectangles, stackpanels, grid cells, all much better containers. :slight_smile: Hope I’ve been helpful.

1 Like
4

Button extends rectangle. Rectangle extends container. So Button is a subclass of Rectangle which is a subclass of container. :smiley:

I dont see why they wouldnt be designed this way, as they are very modular. You could add your own images, and other gui elements. I could see how adding more containers could cause problems (like adding a button to a button).

Anyway, for some reason this is NOT a problem in my game, the way i set it up at least.

Thanks though i appreciate the help!

Also i bet it would be super cool if everything was a container! :smiley:
But its not :frowning:

1 Like
5

Yeah, you are absolutely right.

Think about the text-with-image button, or is it the image-with-text button?

All in all, it is a button acting like a container. That button actually has an image control and a text control… inside it… and you can move stuff around… putting the image on the right of the text, or the left.

You can even add another image/icon, so there is one on each side of the text.

Digging around deep… in GUI land… is pretty darned fun! Lots of area for demented experimenting. :slight_smile:

And, as you likely know, if you cannot reproduce the home-issue… in a playground… we’re going to have a difficult time helping you with it. I highly suggest that you TRY to follow the containment procedures that I used, though. If you keep putting rectangles into buttons, I fear there’s going to be an explosion. heh.

2 Likes
6

If anyone else finds their way back to this old thread, I learned you can can simply do this as well:

const button = new BABYLON.GUI.Button('my-button-name')
button.background = 'rgba(0, 0, 0, 0.3)'
2 Likes