2
\$\begingroup\$

I want to make a progress bar made of text! I have two images: One with the text in gray, the other coloured:

gray progress bar colored progress bar

As my game is loading, I want the letters to "fill up" with color:

filling-up progress bar

They would start out gray, then fill in.

I was thinking of overlaying a transparent rectangle over the gray image, then stretching the transparent rectangle to match the progress. But then the background will be coloured too. I want only the letters to be coloured!

How can I do this?

\$\endgroup\$
1
  • \$\begingroup\$ I wrote an answer a month ago on creating a "world healing wave" effect with a clip region. (Might be useful due to the similarities.) \$\endgroup\$ Commented Mar 1, 2014 at 16:11

2 Answers 2

Reset to default
6
\$\begingroup\$

I don't know how this feature would be implemented in your specific development environment, but the solution to the problem you describe is masking.

Basically, apply a mask to the progress bar in the shape of your letters and then the stretched rectangle won't be rendered outside the mask.

\$\endgroup\$
1
  • \$\begingroup\$ I understand the idea behind this, thanks for the link. I should be able to get it going now. \$\endgroup\$ Commented Mar 15, 2012 at 13:30
2
\$\begingroup\$

If your ui system uses a layering concept you can do this:

  1. Have an image with the letters having alpha of 0 (front layer).
  2. Have a quad which is the "unloaded" colour, scaled to the same dimensions as your front image(back layer)
  3. In the middle layer, have a quad with the "loaded" colour, scaled to some suitably small value on the x axis, then scale it up as the percentage of loaded resources increases up to 100% of the width of the front image.

Note, if you are doing this with opengl, you will need to do some translation work too.

Hope that helps.

\$\endgroup\$
2
  • \$\begingroup\$ +1, but doing this with modern OpenGL does not really differ from D3D. \$\endgroup\$ Commented Nov 30, 2016 at 18:12
  • \$\begingroup\$ Indeed, the method is exactly the same, even if the code differs somewhat. \$\endgroup\$ Commented Nov 30, 2016 at 19:42

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.