I'm trying to draw a filled rectangle with a horizontal gradient that goes from a color to transparent. I'm using the ShapeRenderer.filledRect() method that takes x, y, width, height, as well as 4 corner colors to create a gradient:

What I would expect is a rectangle that's red on the left, completely clear on the right, and a gradient between the two. Instead what I get is a rectangle that's red on the right and completely black (and completely opaque, not transparent at all) on the right.

I've put together a little example using the default class created by LibGDX. Here I'm using a green transparency just to demonstrate:

Actually, I just realized that no transparency is drawn at all by ShapeRenderer. Changing the above code to the following results in a completely blue rectangle being drawn, despite having an alpha value of .5.

In my actual program I'm displaying images with transparent gradients, so I know it's at least possible- and if I can't figure out how to do it using this method, I'll just use another image. But I've looked through the source code of that filledRect() method, and it seems to be applying the opacity correctly.. so why doesn't it show up?

Is there something I'm missing? I've tried googling but I can't find anything that seems to resemble my problem. Any help is very appreciated!

However, if you just want a simple gradient rectangle, it will be more performant to use SpriteBatch. This way you can include the rectangle in the same batch as the rest of your sprites and without incurring any state changes like above.

Ohh thanks a lot, I didn't realize you had to enable transparency, especially because transparent images worked automagically.

I'll have to do some profiling to see if I can use the first method you mentioned. If not, I'll probably just use a 100-pixel wide, 1-pixel tall image containing the transparency gradient and stretch that out to the height I need, since it's just a basic horizontal gradient.

Ohh thanks a lot, I didn't realize you had to enable transparency, especially because transparent images worked automagically.

I'll have to do some profiling to see if I can use the first method you mentioned. If not, I'll probably just use a 100-pixel wide, 1-pixel tall image containing the transparency gradient and stretch that out to the height I need, since it's just a basic horizontal gradient.

Thanks again for your help!

Did you see the code I posted? Your texture only needs to be 1x1 pixels. Ideally you would include this 1x1 white image inside a sprite sheet (alongside your GUI, fonts, game characters, etc) so that everything is batched in a single draw call, and no extra texture binds are needed.

java-gaming.org is not responsible for the content posted by its members, including references to external websites,
and other references that may or may not have a relation with our primarily
gaming and game production oriented community.
inquiries and complaints can be sent via email to the info‑account of the
company managing the website of java‑gaming.org