Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
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.) – Anko Mar 1 '14 at 16:11
up vote 5 down vote accepted

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.

share|improve this answer
I understand the idea behind this, thanks for the link. I should be able to get it going now. – Alex_Hyzer_Kenoyer Mar 15 '12 at 13:30

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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