Applying alpha gradient to an image

Started by
10 comments, last by MarkS_ 8 years, 10 months ago

I have an image that's dynamically generated. I need to apply an alpha gradient to this image so that it 'fades out' at the edges. How can I do this?

To illustrate things a bit here are some pictures. Let's say I have an image and a background;


1T2hJqW.png

Tl5zwoM.png

I need to fade in the edges of the image, and then draw it onto the background. If the background were, say, entirely white, then I could 'fake' this fading effect by drawing a pre-created white quad with a linear gradient over the image at each end, like this:

CwmGb6V.png

If the background is another image however then I obviously can't do this, because I end up with something like this:

DXUOA6g.png

What I'd like to be ending up with is this:

u7ARH4q.png

...but I don't know how I can manage that. I'm using LibGDX if that matters, but I suppose this is a framework-agnostic question really?

Advertisement

Use an image editor that lets you save your image with an alpha channel.

Most graphic libraries have FOUR channels of color: Red, Green, Blue, and Alpha.

If your image format supports alpha (like .png, but NOT jpg), and your image editor supports editing alpha (like Paint.NET (free), Photoshop (costs an arm and a leg), Paint Shop Pro (costs two fingers or a rib), or Gimp (free), but NOT Microsoft Paint), and your API supports alpha (which LibGDX does, if I'm reading the docs right), then you have no problem.

Instead of drawing the image to fade to white, you draw the image not changing in color, but draw the alpha fading from opaque to invisible.

Use an image editor that lets you save your image with an alpha channel.


He's generating the image dynamically, but your point is still valid. Generate the alpha channel while generating the image.

Generate the alpha channel while generating the image.

I'd welcome suggestions as to how I can do that with LibGDX/OpenGL, if you have any. I understand in theory that that's what I need to do, the reason I'm asking the question is because I don't understand how to actually effect it sad.png

Generate the alpha channel while generating the image.


I'd welcome suggestions as to how I can do that with LibGDX/OpenGL, if you have any. I understand in theory that that's what I need to do, the reason I'm asking the question is because I don't understand how to actually effect it sad.png


You need to look into blending. Alpha information is ignored be default. Also, how are you generating the image? Are you setting each channel manually? We need more information. If you are generating an RGB image instead on an RGBA image, you'll never get alpha blending to work.

chiranjivi, don't down vote someone because they misread your post. Servant of the Lord is correct in principle and was helpful to you. Nothing he wrote was incorrect, only the file information didn't directly apply.
chiranjivi, don't down vote someone because they misread your post. Servant of the Lord is correct in principle and was helpful to you. Nothing he wrote was incorrect, only the file information didn't directly apply.

The tooltip for the downvote button says 'this response is not useful', which I didn't find it to be. It seems to me like I was using it appropriately, but whatever you say, I guess.

I don't mind the downvote - my rating balances out in the end.

I'm still not sure what you are wanting though - are you wanting specific details for how to use GDX to generate an alpha channel? Or do you already have an alpha channel in your image and are wanting to know how to make it affect the result when drawing?

I don't mind the downvote - my rating balances out in the end.

Thank you for being reasonable about it. I didn't realise it was considered bad form to take the tooltip literally, I'll be less liberal about it in future if it upsets people (not you personally, just in the general sense).

I'm still not sure what you are wanting though - are you wanting specific details for how to use GDX to generate an alpha channel? Or do you already have an alpha channel in your image and are wanting to know how to make it affect the result when drawing?

Well, what I've actually done so far is draw a number of sprites onto a LibGDX framebuffer; having done that I'm trying to figure out how take that framebuffer and to 'fade out' its left and right edges, after which I was intending to render it onto the screen over the background. The framebuffer already contains an alpha channel, I'm just unsure how to manipulate it in order to achieve the desired effect.

Can you use custom shaders in your project?

You can have a basic shader that, given the framebuffer and another greyscale image that you create and load, uses the greyscale image as the framebuffer's alpha channel. This is easy to do. You'd use the custom shader momentarily when rendering the framebuffer over the screen, and then switch back to the regular shader afterward.

Alternatively, without shaders, you can make an image that has the alpha channel you want, and draw it onto the framebuffer with a blending mode that basically copies the alpha channel into the framebuffer without harming the RGB channels... But I wouldn't know the proper blend equation to set up for that.

Can you use custom shaders in your project?

In theory I can use shaders, yes - in practise though I've shied away from them because they seem pretty complex, and I barely have a tenuous grasp on the basics at present.

Alternatively, without shaders, you can make an image that has the alpha channel you want, and draw it onto the framebuffer with a blending mode that basically copies the alpha channel into the framebuffer without harming the RGB channels... But I wouldn't know the proper blend equation to set up for that.

This is the kind of thing I was hoping for - some functionality that would allow me to draw another texture over the top of what I currently have, but overwriting only the alpha channel and not touching the RGB. I'll have a look at the gl documentation about blending functions and see if anything looks particularly enlightening.

This topic is closed to new replies.

Advertisement