Flashing / Blinking Text - Unity 4.6 New GUI

It is 2015 and the first post of the new year would be a simple one. We are all still in the vacation mood. Yea, so let us just build the momentum slowly and steadily with a simple post on How to make a Blinking / Flashing Text using the Unity's new GUI.
To follow this tutorial, you should at least have Unity 4.6 version.

1. To get started, we will create an new empty scene named Blinking Text Effect.

2. Add a Text component to the scene by navigating to GameObject->UI->Text. Name this Text component as anything you would like to. I am going to name it as FlashingText so that it can be related.
You will notice that this FlashingText will be the child object of a Canvas component which Unity has automatically added along with EventSystem object.

3. Position the Text component wherever you want to. Write some text so that the blinking will be visible. Change the font settings as per your requirements.

Text - Unity 4.6 New GUI

4. Create a new Script called FlashingTextScript. Attach it to the FlashingText object and add the below code to it

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

public class FlashingTextScript : MonoBehaviour {
 
 Text flashingText;
 string textToFlash = "I AM FLASHING";
 string blankText = "";
 string staticText = "I'M FLASHING NO MORE";
 //flag to determine if you want the blinking to happen
 bool isBlinking = true;
 
 void Start(){
  //get the Text component
  flashingText = GetComponent<Text>();
  //Call coroutine BlinkText on Start
  StartCoroutine(BlinkText());
  //call function to check if it is time to stop the flashing.
  StartCoroutine(StopBlinking());
 }
 
 //function to blink the text 
 public IEnumerator BlinkText(){
  //blink it forever. You can set a terminating condition depending upon your requirement. Here you can just set the isBlinking flag to false whenever you want the blinking to be stopped.
  while(isBlinking){
   //set the Text's text to blank
   flashingText.text = blankText;
   //display blank text for 0.5 seconds
   yield return new WaitForSeconds(.5f);
   //display “I AM FLASHING TEXT” for the next 0.5 seconds
   flashingText.text = textToFlash;
   yield return new WaitForSeconds(.5f); 
  }
 }
 //your logic here. I have set the isBlinking flag to false after 5 seconds
 IEnumerator StopBlinking(){
  //wait for 5 seconds
  yield return new WaitForSeconds(5f);
  //stop the blinking
  isBlinking = false;
  //set a different text just for sake of clarity
  flashingText.text = staticText;
 }
}

Save the script and return to Unity and test the scene. You should see the blinking effect of the text just like the one in the gif below

Unity 4.6 New GUI - Flashing / Blinking Text
Wow, that was simple. Wasn't it?
Of course, this was one of the many ways in which this Flashing or Blinking of the text can be achieved. Comment below if you are aware of a simpler process than this one.

See you around.
Share on Google+

About Sujit Horakeri

Sujit Horakeri is a game freak just like any other next door guy you would come across. He is a Web Developer by Profession, Game Developer by Choice.
Connect with him on:
    Blogger
    Facebook

4 comments:

  1. Awesome! Though IMO it'd be better be done by manipulating Text.color.a field (talking about Alpha part) and set it to either 0 or 1 depending of whether text should be off or not. This way you'll save memory because you won't have to put second copy of the text's string. It will also be slightly more performant (important when you have lots of blinking objects). This also will cut down on the text complexity.

    ReplyDelete
    Replies
    1. Wow, Thank you for this. Didn't even think about that.

      Delete
  2. How would you then exit the loop so that, after n amount of time, the text disappears from the screen?

    ReplyDelete
  3. For more cool articles like this one click here guys.

    ReplyDelete