Sign in to follow this  
utilae

Prorgress Bar - Graphics

Recommended Posts

Hi, I am gonna make a progress bar. And I was wondering how the graphics for this would be done. Basically my method is going to be to have two rects, the foreground and the background. If you could imagine a tube filled with green liquid, the background will be the glass tube and the foreground will be the liquid. Now I was thinking of doing this by having a texture for the foreground and one for the background. I would then resize the foreground texture, shrinking the rect, to make it appear like the progress bar is loosing liquid. The only problem is that this would work well for square progress bars, but for bars with corners, stetching such textures has bad results. It wouldn't look too good. So, I was wondering if anyone knows a good way to do this. I would prefer that I only have two textures (background and foreground), and I use alpha in my textures. Any ideas.

Share this post


Link to post
Share on other sites
Instaed of stretching the liquidtexture, use texture coordinates instead.

Lets say the game is 50% loaded. Now you would have a quad with texture coordinates

(0, 0)----------------(0.5, 0)
| |
| |
| Liquid-quad |
| |
(0, 1)________________(0.5, 1)

which you render on top of the background.

I hope that wans't too fuzzy...

Share this post


Link to post
Share on other sites
This is correct, if you increase the size of the quad and increase the texture coordinates at the same pace, it will just look like you are revealing the texture instead of stretching it. But, this still doesn't look as good as just using a prerendered 3d animation or something for the progress bar, since the 'chopped off texture' doesn't look that great.

Share this post


Link to post
Share on other sites
note: i havent tested this, and its also something i'd like to ask if anyone has any opinions.

I was thinking, would you be able to have 3 textured quads:
-background
-foreground
-alpha mask

just render the background and foreground as normal, then use the alpha mask quad to cover/uncover parts of the progress bar.

Would this work?

Share this post


Link to post
Share on other sites
here's the geometry you want for the filled green liquid:

+--+-------------+--+
| | | |
+--+-------------+--+

have the texture coords so the quads on the end map to the left and right end of your gel cap and the center stretches. you could also drop aditional quads in the center and have the center art tile, it just depends whether you want it to look lame like the tiled apple osx gel caps or cool like a stretched gel cap. (no bias here really ><)

be sure to have rounded edges in your source art! square progess bars are like some lame 90's throw back.

Share this post


Link to post
Share on other sites
Quote:

Original post by deathtrap
note: i havent tested this, and its also something i'd like to ask if anyone has any opinions.

I was thinking, would you be able to have 3 textured quads:
-background
-foreground
-alpha mask

just render the background and foreground as normal, then use the alpha mask quad to cover/uncover parts of the progress bar.

I have a better idea.

You have a foreground, midground and background. The foreground will be the glass tube with the bit where the liquid is meant to be all alpha transparent 100% or even 50%. The background is the liquid. And the midground, which is drawn in the middle, is a texture that is a color representing the empty glass tube, it could even be black. When the tube is full of liquid, the midground is not rendered. When the tube is partially empty, the midground is stretched to the left.

This has a nice effect since the tube is never covered, but only the liquid is.



In the case of a rounded edge for the liquid, the best idea might be to have it into three sections. Each end (the round end) is not stretched, only moves. The middle is stretched.

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