1. Unity 5.6 is now released.
    Dismiss Notice
  2. We've introduced thread tags, search within a thread and similar thread search. Read more here.
    Dismiss Notice
  3. Learn how you'll soon be able to publish your games to China in four simple steps with Xiaomi. Sign up now for early access.
    Dismiss Notice
  4. Get further faster with the Unity Plus Accelerator Pack, free for new Unity Plus subscribers for a limited time. Click here for more details.
    Dismiss Notice
  5. The launcher is currently pulling earlier versions of the content packages which may have errors, see post.
    Dismiss Notice
  6. We've released our first Timeline Experimental Preview, our new tool for creating cutscenes and more! To check it out click here.
    Dismiss Notice
  7. Check out all the fixes for 5.5 in patch releases 1 & 2.
    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:
    536
    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
  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:
    504
  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:
    10
    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:
    279