How do I make a progress bar with letters that get “filled in”?

Question

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

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

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?

Answer 1

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.

Answer 2

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.