Search Unity

  1. Engage, network and learn at Unite Austin 2017, Oct 3 - 5. Get your ticket today!
    Dismiss Notice
  2. Introducing the Unity Essentials Packs! Find out more.
    Dismiss Notice
  3. Check out all the fixes for 5.6 on the patch releases page.
    Dismiss Notice
  4. Unity 2017.1 is now released.
    Dismiss Notice
  5. Help us improve the editor usability and artist workflows. Join our discussion to provide your feedback.
    Dismiss Notice
  6. Unity 2017.2 beta is now available for download.
    Dismiss Notice

Circular Fade In/Out shader

Discussion in 'Shaders' started by nicolasjr, Jul 31, 2015.

  1. nicolasjr

    nicolasjr

    Joined:
    Mar 12, 2014
    Posts:
    11
    Hey guys,

    I need to create a shader that mimics an effect similar (or identical) to the one in this video:

    (6:56)


    To be honest, I've tried to find it, but it's hard for me to even think on how it should be called.

    Does anyone have some pointers for that?

    Thanks in advance!
     
  2. Peter77

    Peter77

    Joined:
    Jun 12, 2013
    Posts:
    929
    I created a little example project for you, find the download link at the bottom of this post.

    Here is a video that shows the effect(s) in action.


    The "Screen Transition" is implemented as an Image Effect, which is using a texture mask to describe where the effect takes place. This provides a way to author lots of different transition effects just by changing the texture and most importantly allows to create new transitions without code, so it's a perfect fit for artists.

    The texture mask has to be a grayscale texture. The pixel intensity represents the progression of the transitioning effect. For example, encoding a vertical gradient from white to black creates a vertical swipe transition. Encoding a glow provides the circle like effect you are looking for. This only gives a range of 256 steps for the transition, but this is often enough. Black pixels in the texture mask blend in first, white pixels last.

    The mask texture has to use special settings. If you add a new mask, make sure to apply the following settings in the Texture Inspector window:
    I hope it proves to be useful for you!

    Download example
    http://www.console-dev.de/bin/Unity5_Example_ScreenTransitionEffect.zip
     
    Last edited: Aug 5, 2015
    waleedmm, pixpusher2, jammyt and 2 others like this.
  3. CaptainScience

    CaptainScience

    Joined:
    Jan 26, 2014
    Posts:
    293
    That is probably how I would do it, too, and it's nice of Peter for providing an example project.

    As an aside, I'll just mention that in the shader you could replace this line:

    Code (csharp):
    1. float weight = step(_MaskValue, alpha);
    with
    Code (csharp):
    1. float weight = smoothstep(_MaskValue - _MaskSpread, _MaskValue, alpha);
    Assign the "_MaskSpread" variable in C# just like "_MaskValue" is assigned, and it will give you some more customization for the effect. You can get a much softer transition if you want it, but you will have to drive the effect past 1 (enough to compensate for the additional spread) to fully hide the screen.
     
    nicolasjr likes this.
  4. rakkarage

    rakkarage

    Joined:
    Feb 3, 2014
    Posts:
    506
  5. nicolasjr

    nicolasjr

    Joined:
    Mar 12, 2014
    Posts:
    11
    Hey @Peter77, thank you so much for your very detailed reply and for providing the whole project.
    That was really helpful.

    And thank you @CaptainScience for your tip on altering the shader!
     
  6. jammyt

    jammyt

    Joined:
    Jul 7, 2014
    Posts:
    12
    This is great, thanks for posting the sample project!

    One thing I was wondering, would it be possible to offset the effect, so for example the Mask1 (with the circular mask closing in), we could make it close in on something not at the centre of the screen. As it's a screen space effect I guess the offset would need to be done in the shader but I'm not sure how.

    If you had the time to help that would be amazing.
     
  7. vetasoft

    vetasoft

    Joined:
    Nov 15, 2013
    Posts:
    312
  8. TBruce

    TBruce

    Joined:
    Jan 18, 2015
    Posts:
    83
    Thank you Peter for the awesome effects. The shader has one undesired side effect, it rotates and mirrors everything on the screen (with the exception of the UI). This is in Unity 5.6.

    TBruce
     
  9. TBruce

    TBruce

    Joined:
    Jan 18, 2015
    Posts:
    83
    I fixed the problem by commenting out this line in the shader

    o.uv.y = 1 - o.uv.y;
     
  10. PedroRtz

    PedroRtz

    Joined:
    Jan 8, 2015
    Posts:
    2
    I have used this shader but it's flipping the Y for me as well on some devices. I would try the fix proposed by TBruce, but the issue is that I don't know beforehand in which devices this happens.

    Any idea on how can I detect it so I can flip the Y or leave it as it is?

    Thanks
     
  11. TBruce

    TBruce

    Joined:
    Jan 18, 2015
    Posts:
    83
    Hi PedroRtz,

    The fix I proposed was just a quick and dirty solution. I have since come up with a better solution per the Unity documentation.

    I have posted my fix here.
     
    Peter77 likes this.