PDA

View Full Version : Sprite with transparency and colorkey



vdell
04-18-2014, 08:27 AM
Greets,

I have a menu sprite that is transparent in the middle and there are also two corners that are transparent. Now I want to draw a gradient to fill the middle space but keep the corners transparent. I was thinking that maybe the corners should be painted with a colorkey and tell Clanlib that they should be painted with transparency. How should I do this? Here's the current sprite in all of its glory:

http://s21.postimg.org/ivavclep3/main_menu.png

TIA

Judas
04-19-2014, 02:07 PM
The best way is to use an alpha channel in the image. Then simply make the transparent areas transparent in the image itself. Color keys is mainly a method from the palette days of the 1990's where full alpha blending was too expensive.

Judas
04-19-2014, 02:17 PM
Okay reading this once again, maybe you already knew this and just wanted to render a gradient on part of the sprite? In that case your easiest option is probably to draw the gradient first (only covering the center transparent area) and then the sprite afterwards. The corners shouldn't get the gradients because it was never rendered in those regions.

Alternatively, you can attempt to use a mask image to mark which areas the gradient should cover. You probably would need a custom fragment shader or blending mode for doing this. You'd also need two independent pictures - the image as you already have it and a mask image marking the regions the gradient should cover. Since your image already looks like you could just draw the gradient so it never touches those corners, I wouldn't try this approach as it is far more work.

vdell
04-19-2014, 02:41 PM
Okay reading this once again, maybe you already knew this and just wanted to render a gradient on part of the sprite? In that case your easiest option is probably to draw the gradient first (only covering the center transparent area) and then the sprite afterwards. The corners shouldn't get the gradients because it was never rendered in those regions.


Yes, that's exactly what I want and I'm currently doing what you described (= draw the gradient first and the sprite on top). So I'm guessing the easiest solution would be to use the height/width of the sprites' top/bottom parts to get the rect of the middle transparent part. The problem with this solution is that it's not flexible because if the size of the sprite changes then the hard coded height/width will be incorrect (I probably don't need such flexibility but just thinking out loud...).



Alternatively, you can attempt to use a mask image to mark which areas the gradient should cover. You probably would need a custom fragment shader or blending mode for doing this. You'd also need two independent pictures - the image as you already have it and a mask image marking the regions the gradient should cover. Since your image already looks like you could just draw the gradient so it never touches those corners, I wouldn't try this approach as it is far more work.

I checked the blending examples but I think it will be a bit too hard to implement this solution with my very limited knowledge.

Judas
04-20-2014, 12:29 AM
If you do not need the extra flexibility (i.e. it is a single case where you draw this gradient made just for that sprite), I would stick to the approach you are already using.

The blend mode alternative is to render the result into a new texture and then use a blend mode to erase the masked areas. This method is annoying because it requires you to deal with multiple textures and so on.

The other alternative is to use a fragment shader that renders it all in a single pass (base texture + gradient + mask texture). This is by far the most fancy solution but has the downside that the ClanLib sprite batcher doesn't support custom fragment shaders. You would therefore have to do your own sprite batching - something that would make blend modes seem simple in comparison!