How can I build a fade-in/fade-out effect for my credits?

Hello everyone,

I'm having built a credits-scene where text is scrolling from the bottom to the top of the screen.
Now I want to add an effect that it comes more smooth from the bottom like a gradient. I'm not sure how to describe it better than this: maybe there is some kind of mask on a small rect based on the bottom of the screen with a 100% transparency at the bottom and 0% transparency on the top.

So the text coming from bottom is not visible and while it's scrolling upwards, it gets more and more readable while fading in to become white at all. Then it scrolls upwards anymore until it gets to the top of the screen where also is a masking rect with the opposite of the bottom. The text get's any darker until its vanished.

Do you know what I mean? I don't have neither a clue what the term for this effect is nor how to build it in an elegant way...

Do you have a clue?

Greetings
Lone

 

If your text is on a black background, you could create an image with gradients and an alpha channel like you said and place it on top of everything ? This way it would cover your text

 

Yes, I thought of that. But is this not a .. cheated.. way? I thought there would be some in-house-technique that avoids me painting an image..

 

@LoneSurvivor82 If @Buck595's anwer sounds like cheating (which it is not), you could do that same in a shader, and do the fades procedurally. But texture (if used in shader) is probably a bit faster as there's less computation needed and only texture look up...

 

@Buck595 and @Olmi I think, you are right and I will do it this way with the picture. Thank you very much
Does this technique have a technical term?

Nevertheless to learn that shader-thing, how complicated is this to implement? Maybe with five steps from 0% to 100% (0%, 25%, 50%, 75%, 100%) transparency? Or could you recommend a simple YouTube-tutorial or blog-post for this?

 

Btw, are you using some UI components for this text? I just somehow thought you have text in an image...

 

Yes, it's mostly text and two images like this:



The "Credits"-gameobject has an animation which scrolls the whole thing up.

As you can see, I already added two transparency-images, which works really good

 

Ok good, since that Mask component (don't know if you already tried it) does not support alpha blending. It's just cut off at certain threshold.

 

While researching for this I just saw the mask-element in some YouTube-tutorials but had not a look at it yet because I didn't had the feeling that this would match my needs.

 

You could adjust the alpha value of the text color based on distance from the center of the screen.

 

To set the alpha value for the text would work only on whole lines. I should have said that the credits-font is a selfmade bitmap-font and should look very old-fashioned. With the transparency I want to realize such an effect:




If the word goes up further, it's complete white until it vanishes from the screen on top:

 

Ok, in that case you require a soft mask. It's not pre-built in Unity but there are several assets that can do this. Or as mentioned above just use gradient texture. I would go with gradient texture since you can batch the draw calls, and has very little memory overhead. BTW I really like your font.

 

Thanks

Do you know a tutorial for such a soft mask or the gradient texture?

 

Since you just have a black background, using a soft mask shader would be overkill. If you ever used the UI masks in Unity you will notice that it breaks batching, and requires additional shaders to be loaded. Making a transparent gradient in photoshop is fairly easy, there are many tutorials on how to do this.
Quick google search brought up this one.
https://expertphotography.com/transparent-gradient-photoshop/

To give you an idea on how to get started, I have one that I use. You are welcome to use it as well. You can change the white to black either in photoshop or in Unity. You may need to make adjustments to it based on your needs. Like if you want a longer blend.

 

Thank you very much, I will have a look on it the upcoming days!