Prorgress Bar - Graphics
Author
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.
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
which you render on top of the background.
I hope that wans't too fuzzy...
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...
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.
Another idea could be to use 3 quads for the foregound. One to stretch and one for each end of the stretched one...
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?
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?
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.
+--+-------------+--+
| | | |
+--+-------------+--+
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.
Author
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.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
