In this post, I’ll be talking about using coroutines in Unity 3D. The video below shows a step-by-step process for creating a fading splash screen using UI Elements and Coroutine scripting. In the video, I use C# for all the scripting. If you are not familiar, a coroutine is like a function that you can pause for a set amount of time.

Why Use a Coroutine to Create a Fading Effect?

In programming, there are a seemingly endless number of ways to come up with a solution to a problem. In the tutorial video above, I utilize coroutines to accomplish a fading effect between an array of UI Image elements. If you’re unfamiliar with coroutines, you might be wondering why I don’t just accomplish the fading effect in the Update() function using an if statement, for loop, or some other conditional statement. The reason is largely because of performance. Coroutines are very similar to a function except they allow you to pause execution for a frame or a set amount of time. Ultimately, this reduces the number of things that are happening within a single frame. Beyond performance, a coroutine allows you very precise control over the execution of the coroutine’s code. A function will execute all of its code in a single frame, whereas you dictate the execution of a coroutine.

The Difference Without a Coroutine:

As a quick example, say we want to execute a transparency fade on an UI Image’s color. Without a coroutine, we could do something like this inside of Update() (pseudo-code):

While this code would work, it is more performance-heavy than a coroutine because every time Update() runs, if the statement is true, all of the code inside the statement gets executed in a single frame. So, even though this will achieve a fading out effect, it may not look as smooth as we would like. Likewise, it is inefficient when it comes to performance.

Vs. With a Coroutine:
We could accomplish the same thing with a Coroutine:

Using the FadeOut() Coroutine allows us to tell the compiler to wait a frame after every iteration of the for loop. That is what yield return null does; it tells the compiler to wait a frame before executing the next line of code in the coroutine. This allows us to create a smoother fade effect and it means that less calculations are occurring per frame, which helps our performance. Note that in the above example, I set the transparent Boolean to true at the beginning of the Coroutine. This is because I have the StartCoroutine() function running in Update() under an if statement whose condition is based on the transparent Boolean. If I keep transparent false until after the fade has happened, then every time Update() gets called, my program will be starting another Coroutine thread. This is not ideal in most situations. To ensure that I only run a single thread of FadeOut(), I set transparent to true at the very beginning of the FadeOut() Coroutine.

Conclusion
This is just a rough example of what you can do with coroutines. If you want to see a more in-depth example with commentary, check out the video I posted above. It covers coroutines in greater detail and complexity. Likewise, I highly recommend reading Unity’s manual on coroutines. That manual is incredibly informative and explains everything you need to know to use coroutines in both C# and JavaScript.

Hopefully you found this interesting. Thanks!

Blogger: Mark Philipp, Application Engineer at Studica