Questions about cool sprite effect (screenshot inside)

I’m trying to effect an effect where the an image fades in from left to right. An example screenshot is attached. I guess the first question is how the effect is achieved conceptually. I’m thinking that there are two sprites; one with the text and one with out, and then there’s a “transition” sprite responsible for the fading.

That’s about as far as I’ve gotten, and I was wondering how to achieve the effect. Do I have to write a custom shader, or can I use a combo of tricks within Unity?

497202--17538--$fade-text.jpg

You would certainly not use two complete pictures with and without text. First you would have a layer with the background image, then a layer above with the text.
There are two ‘simple’ solutions :

  1. You animate uv coordinates to scroll or stretch a black to white gradient for a secondary alpha channel which will be multiplied with the first (the one with the shape of the text). This requires to create a custom shader with a secondary alpha channel (8bit map) mapped on the second set of UVs (uv2).
  2. You animate vertex alpha on a quad divided horizontaly mapped with the text. Each column of vertices from the left to the right goes progressively from black to white.

Solution number 2 is easier if you don’t master the shader magic but you may have a harder time to make it look like you want.

I will take those into consideration. Thanks!