Sign in to follow this  
MisterHeadache

Alpha blending again...

Recommended Posts

MisterHeadache    122
I have a progress bar which I'm drawing from two quads. The bottom quad is the base and it has black letters on it. The bar quad is drawn over the bottom and varies in color from red to green depending on its length. What I would like to do is have the black letters on the bottom quad show through the bar quad. How should I set alpha blending of the bar quad to get this to work?

Share this post


Link to post
Share on other sites
Murcielago    126
Hey wait. I thought about your question again minutes ago. You want the blending effect,right? So set the material of the quad as the color from red to green. And set the texture of quad as the black letters. Then blending them. You will see the same effect as you said

Share this post


Link to post
Share on other sites
ET3D    810
One way to go about this would be to add an alpha channel to the first texture (assuming it doesn't already have one), describing where to apply the colour to it. Then when you draw the second rectangle over it, use that alpha channel as the alpha of what you're drawing, i.e., the second texture (you'll need to play with the texture coordinates to get it right).

This way you should not only be able to not overlay the text, but to have your bar in any shape you want, not just a pure quad.

Share this post


Link to post
Share on other sites
ET3D    810
Quote:
Original post by Murcielago
That sounds good! But is that means you need 2 textures in different quads?

That'd depend on how many textures you needed in the first place. You don't need an extra texture unless you're already using the alpha of the bottom quad's texture. You do need two quads, but you probably need them already.

Let's assume that you're using one texture, and drawing the top with a fixed colour, and using texture stages. What you'd do is:

- SetTexture with the single texture you have
- Disable alpha blending
- Draw the bottom quad (predefined quad)
- Update the size and texture coords of the topmost quad to cover the area you want
- Set the texture factor to the colour you want (if the quad's vertex structure has colour, you can use that instead)
- Enable alpha blending
- SetTextureStageState to use the alpha from the texture but colour from the texture factor.
- Draw the second quad

Share this post


Link to post
Share on other sites
MasterWorks    496
Also be aware that you rarely need additional textures for small sprites like this; just double the width (or height) of your texture and have both images (and both alpha channels, etc) in one texture. Use texture coordinates in your vertices to reference which part you want to render. This is much more efficient because you can then batch these vertices, ie render them with one DrawPrimitive because you don't have to device.SetTexture in between.

Also consider writing some more general sprite-type classes so you don't have to do this type of thing manually, as any game is going to have a ton of 2D 'quads' in it for all kinds of GUI functionality. You don't really want to write code to draw it all and set it all up (coordinates, size, rotation, etc) for every single 2D/GUI element in the game (and future games!)

Share this post


Link to post
Share on other sites
MisterHeadache    122
Thanks guys, but I found a way that will work better for me. I'm drawing 3 quads - the bottom quad, the bar quad, and then the text quad, which has its alpha channel set to transparent for every pixel that isn't part of a character.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this