Implementing the ‘Making Stuff Look Good in Unity’ Fancy Transition Shader in Unity

Using a noise texture
Another transition with a different texture

First up, you should know I intend this for complete newbies.

It wasn’t immediately obvious to me how to implement this shader since my technical skills are pretty lacking, and I figured others might have the same problem. This also isn’t all my own code. I’m using a shader that the Youtube channel Making Stuff Look in Unity threw together. Their video is pretty great, so you should give it a watch before you begin here. That’s also how you download the scripts, so go give them the love. All I’m doing is showing you how to get it working in my game if you’ve never dealt with this type of thing before, like I hadn’t. Okay, so with that out of the way, lets begin.

How it works

You have a material with a simple shader on it. I’m not going to explain exactly how it works because the video does a much better job of it and honestly, I probably don’t understand it that well myself. The material has several variables exposed: Screen Color, Cutoff, Distort, and Fade. They’re pretty self-explanatory.

On the right you’ll see the variables Cutoff, Fade and Distort.

Making Stuff Look in Unity also included a simple script for dealing with these variables, SimpleBlit. The script is as simple as it sounds. The important part is that it takes a material.

By sticking SimpleBlit on your camera and passing in the BattleTransitions material, by altering the material’s variables you can control the transition effect.

So, how to do that? I wrote a simple script to handle it:

public class testTransition : MonoBehaviour {
//public Material battleTrans;
SimpleBlit blit;
float val = 1;
public string fadeState = "none";
// Use this for initialization
void Start () {
blit = GetComponent<SimpleBlit>();
fadeState = "out";
}
// Update is called once per frame
void Update () {
if (fadeState == "out")
{
Debug.Log("Fadeout cutoff: " + val);
val -= Time.deltaTime*0.5f;
val = Mathf.Clamp01(val);
blit.TransitionMaterial.SetFloat("_Cutoff", val);
blit.TransitionMaterial.SetFloat("_Fade", Mathf.Clamp01(val*2));
}else if (fadeState == "in")
{
Debug.Log("Fadein cutoff: " + val);
val += Time.deltaTime * 0.5f;
val = Mathf.Clamp01(val);
blit.TransitionMaterial.SetFloat("_Cutoff", val);
blit.TransitionMaterial.SetFloat("_Fade", Mathf.Clamp01(val*1.8f));
}
if(val == 0 || val == 1)
{
fadeState = "none";
}
}
}

The key part you see up there is the line:

blit.TransitionMaterial.SetFloat("_Cutoff", val);

Blit is the variable storing the Simpleblit script. I get the TransitionMaterial property we set to BattleTransitions, and then we use the SetFloat function to set the value. It’s formatted like you would a coroutine, though you have to add the “_” before the variable. I don’t actually know why, and that took me a bit to find out, which is why I decided to write this.

To control the fade, all I have to do is reference the testTransition script and change the fadeState variable to “in” or “out” and it fades the screen. Easy peasy. Hope this helps someone!

Like what you read? Give Zachary Williams a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.