Chasing Lights in unity with UI image fade helper

In this article we gonna create two very simple image fading functions that are completely indispensable if you want to create a vibrant lively UI for your game or app. In this example we will be animating "chasing lights" such as seen on slots machines, and the exchange sign in the image above.

The helper functions

These two functions can be used in a lot of situations, I have personally used them to simulate light bulbs, flashing tutorial guide arrows, ghosting game characters etc. Let's get started.

using System.Collections;
using UnityEngine;
using UnityEngine.UI;

public class ImageHelper {
	
	public static IEnumerator FadeOutAlpha(Image image, float fadeTime) {
		float elapsedTime = 0.0f;
		Color c = image.color;
		while (elapsedTime < fadeTime) {
			yield return new YieldInstruction();
			elapsedTime += Time.deltaTime;
			c.a = 1.0f - Mathf.Clamp01(elapsedTime / fadeTime);
			image.color = c;
		}
	}

	public static IEnumerator FadeInAlpha(Image image, float fadeTime) {
		float elapsedTime = 0.0f;
		Color c = image.color;
		while (elapsedTime < fadeTime) {
			yield return new YieldInstruction();
			elapsedTime += Time.deltaTime;
			c.a = Mathf.Clamp01(elapsedTime / fadeTime);
			image.color = c;
		}
	}

}

I have created a class called ImageHelper, this class usually contains a few more helper functions but I have trimmed it down to just the two that we will be focusing today. FadeInAlpha and FadeOutAlphe, both takes an Image component and a fade time value as arguments.

Apply the helper functions to images

In the following script I have used the two helper functions to make two functions, one for turning light off and one for turning light on. Notice that the turn off function have twice as much fade time, this is to create the effect of and old incandescent bulb that keeps emitting light shortly after it is turned off due to the heat in the filament.

Now that I can turn on and off light bulbs it is time to create a routine that will turn on a light and turn off the one before it, then do the same all over again for the next bulb in the line and repeat. Let's create a Image[] that we can reference our target images (our lights) from the unity editor, and then also build a looping routine function "ChasingLights".

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Exchange : MonoBehaviour {

    [SerializeField]
    private Image[] lights;

    private bool running = false;

    void Start() {
        StartCoroutine(ChasingLights());
    }

    private IEnumerator ChasingLights() {
        int index = 0;
        int iterations = (int) System.Math.Floor((float) lights.Length / 2);
        foreach (Image light in lights) {
            TurnLightOff(light);
        }

        while (index <= iterations && running) {
            yield return new WaitForSeconds(0.035f);
            TurnLightOff(lights[index]);
            TurnLightOff(lights[index + iterations]);
            TurnLightOn(lights[index]);
            TurnLightOn(lights[index + iterations]);
            index = (index >= iterations) ? 0 : index + 1;
        }
    }

    private void TurnLightOn(Image img) {
        StartCoroutine(ImageHelper.FadeInAlpha(img, 0.1f));
    }

    private void TurnLightOff(Image img) {
        StartCoroutine(ImageHelper.FadeOutAlpha(img, 0.2f));
    }

}

I have my exchange sign with a lot of turned off light bulbs, I have then added 26 children (lights), these are then added to the Lights list in the exchange script and the routine in the script will take care of the rest and fading in/out these lights according to the routine.

Looking for a way to fade your sprites?