Libgdx overlapping opaque widgets

Engines, Libraries and Tools
#1

Hello,
Let’s say I have 2 or more widgets. They all have a non integer alpha value. They’re also overlapping. Assuming the following 3 circles are my widgets, this is what we should expect to see.

However, my goal is to have them appear like so,

With the help from this, I was able to succeed doing this with shaperenderers. However, I couldn’t figure out how to do this with widgets. Unless I searched for the wrong situation, I couldn’t find a solution to this problem anywhere else either.

I hope I didn’t left anything out

@Override
public void show() {
     skin = new Skin(Gdx.files.internal("data/uiskin.json"));
     stage = new Stage(new FitViewport(1100, 640));

     Button b1 = new Button(skin, "tab");
     b1.setBounds(330, 370, 70, 40);

     Button b2 = new Button(skin, "tab");
     b2.setBounds(350, 370, 70, 40);
		
     stage.addActor(b1);
     stage.addActor(b2);
}

	public void render(float delta) {
		   Gdx.gl.glClearColor(0, 0, 0, 1);
		   Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT);
		   		  
		   stage.act(Gdx.graphics.getDeltaTime());
		   stage.draw();
}

How would I accomplish this?
Thanks in advance!

#2

Render everything to a texture (with alpha = 1.0) and then render the texture with the desired alpha.

#3

Sorry, I forgot to mention that the widgets will have different alpha values from each other. So If I put one widget with a higher alpha value underneath another widget, you should see the lower alpha value at the area where the two widgets are overlapping.

#4

Render to texture, with varying alphas, then render texture with overall alpha multiplier. Other than that, why do you need this?

#5

Is it me, or does he want to render everything so that alpha doesn’t overlap, but he forgot to mention that he wants alpha to overlap?

#6

Right now, I’m creating the UI for a lobby. The lobby includes a chatroom.

This is what I want

This is what I have

The reason I need them to overlap is because of that round corner.
I can easily fix this by making the corner sharp and do some adjustments like,

But I’m pretty dedicated to this minor issue :stuck_out_tongue:

Edit: The tabs will change alphas as I select different ones

#7

Just by the way, why don’t you just make the opened tab less transparent (=more visible) than the others?

#8

And make the panel underneath with the same alpha as the opened tab?

That won’t solve my problem. I still have the same situation.

#9

Nnnno.
The opened tab would be dark (=less transparent) and the not opened ones bright (=more transparent).
For your problem (as it looks in the pictures): Maybe you can use an offscreen texture to only store the alpha channel (overwriting, not adding!) and draw the whole thing with that alpha map?

Just a quick thought…

#10

Pretty sure you meant this

It doesn’t really matter to me, I ended up with the other way around because of the template that was given.

Either way, I couldn’t get this to work on my codes.

And tbh, I’ve been confused when you guys talk about textures. From what I know, I can load an image to a Texture. I can then have the sprite batch draw them in the render function. I could also have Image from scene2d.ui store the texture.

But I don’t understand how this can help me with my 2 Buttons and Scrollpane. They both load there skins from my .json file.