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\$
    – Anko
    Mar 1, 2014 at 16:11

2 Answers 2

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\$ 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\$
    – Kromster
    Nov 30, 2016 at 18:12
  • \$\begingroup\$ Indeed, the method is exactly the same, even if the code differs somewhat. \$\endgroup\$
    – Ian Young
    Nov 30, 2016 at 19:42

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .