Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

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

Discussion in '2D' started by LoneSurvivor82, Apr 8, 2020.

  1. LoneSurvivor82

    LoneSurvivor82

    Joined:
    Aug 17, 2019
    Posts:
    41
    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
     
  2. Buck595

    Buck595

    Joined:
    Mar 24, 2019
    Posts:
    4
    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
     
    LoneSurvivor82 likes this.
  3. LoneSurvivor82

    LoneSurvivor82

    Joined:
    Aug 17, 2019
    Posts:
    41
    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..
     
  4. Olmi

    Olmi

    Joined:
    Nov 29, 2012
    Posts:
    1,553
    @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...
     
    Last edited: Apr 8, 2020
    LoneSurvivor82 likes this.
  5. LoneSurvivor82

    LoneSurvivor82

    Joined:
    Aug 17, 2019
    Posts:
    41
    @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?
     
  6. Olmi

    Olmi

    Joined:
    Nov 29, 2012
    Posts:
    1,553
    Btw, are you using some UI components for this text? I just somehow thought you have text in an image...
     
  7. LoneSurvivor82

    LoneSurvivor82

    Joined:
    Aug 17, 2019
    Posts:
    41
    Yes, it's mostly text and two images like this:

    upload_2020-4-8_19-2-37.png

    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 :)
     
  8. Olmi

    Olmi

    Joined:
    Nov 29, 2012
    Posts:
    1,553
    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.
     
  9. LoneSurvivor82

    LoneSurvivor82

    Joined:
    Aug 17, 2019
    Posts:
    41
    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.
     
  10. Fatcat-Games

    Fatcat-Games

    Joined:
    Nov 9, 2016
    Posts:
    34
    You could adjust the alpha value of the text color based on distance from the center of the screen.
     
    LoneSurvivor82 likes this.
  11. LoneSurvivor82

    LoneSurvivor82

    Joined:
    Aug 17, 2019
    Posts:
    41
    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:

    upload_2020-4-8_19-59-20.png


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

    upload_2020-4-8_20-2-50.png
     
  12. Fatcat-Games

    Fatcat-Games

    Joined:
    Nov 9, 2016
    Posts:
    34
    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.
     
    LoneSurvivor82 likes this.
  13. LoneSurvivor82

    LoneSurvivor82

    Joined:
    Aug 17, 2019
    Posts:
    41
    Thanks :D

    Do you know a tutorial for such a soft mask or the gradient texture?
     
  14. Fatcat-Games

    Fatcat-Games

    Joined:
    Nov 9, 2016
    Posts:
    34
    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.
     

    Attached Files:

    LoneSurvivor82 likes this.
  15. LoneSurvivor82

    LoneSurvivor82

    Joined:
    Aug 17, 2019
    Posts:
    41
    Thank you very much, I will have a look on it the upcoming days! :)