Results 1 to 5 of 5

Thread: Sprite with transparency and colorkey

  1. #1

    Thumbs up [SOLVED] Sprite with transparency and colorkey

    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:



    TIA
    Last edited by vdell; 04-21-2014 at 02:02 PM.

  2. #2
    ClanLib Developer
    Join Date
    Sep 2006
    Location
    Denmark
    Posts
    554

    Default

    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.

  3. #3
    ClanLib Developer
    Join Date
    Sep 2006
    Location
    Denmark
    Posts
    554

    Default

    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.

  4. #4

    Default

    Quote Originally Posted by Judas View Post
    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...).

    Quote Originally Posted by Judas View Post
    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.

  5. #5
    ClanLib Developer
    Join Date
    Sep 2006
    Location
    Denmark
    Posts
    554

    Default

    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!

Similar Threads

  1. Can I use Colour Key for Transparency in CL_Sprite or CL_Image?
    By chrisg in forum Official ClanLib SDK Forums
    Replies: 2
    Last Post: 02-18-2012, 12:42 AM
  2. Sprite Mask Color / ColorKey
    By Tuisto in forum Official ClanLib SDK Forums
    Replies: 3
    Last Post: 10-03-2010, 10:17 AM
  3. Color-key transparency
    By MaxEd in forum Official ClanLib SDK Forums
    Replies: 1
    Last Post: 01-18-2010, 10:46 PM
  4. Colorkey
    By andreaszdw in forum Official ClanLib SDK Forums
    Replies: 5
    Last Post: 04-16-2007, 11:03 AM
  5. Colorkey...
    By Otto (Strange) Halmén in forum Official ClanLib SDK Forums
    Replies: 0
    Last Post: 01-02-2007, 07:21 PM

Bookmarks

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •