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?

  • \$\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 '14 at 16:11

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.

  • \$\begingroup\$ I understand the idea behind this, thanks for the link. I should be able to get it going now. \$\endgroup\$ – Alex_Hyzer_Kenoyer Mar 15 '12 at 13:30

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.