How to create slowly revealed text in a Unity 3d game

I'm sure you have seen games that have text slowly appear on screen. This tutorial will show you how to achieve that look in your game. This will be done using the C# language and using a Coroutine.

Here is what you are going to learn to create:

Depending on how you want to display the text you can do it 2 ways.
1. The first way is to slowly display each letter of the text. This can be achieved using a Coroutine with a set time in-between each letter.
Ex:
IEnumerator TextSlower(float time)
{
    foreach (char ch in theText)
    {
        textBox.text += ch;
        // wait between each letter
        yield return new WaitForSeconds(time);
    }
    StopCoroutine(TextSlower(0.0f));
}

2The second way is to display each word in the text. This can be achieved using a Coroutine as described above but using String.Split to create an array of words.
Ex:
// create an array of words
strArray = theText.Split(' ');

IEnumerator TextSlower(float time)
{
    for (int i = 0; i < strArray.Length; i++)
    {
        // dont forget to add a space inbetween each word
        textBox.text += strArray[i] + " ";
        yield return new WaitForSeconds(time);
    }
    StopCoroutine(TextSlower(0.0f));
}

Combining the 2 ways can also be used to achieve an even smoother effect.
Ex:
// create an array of words
strArray = theText.Split(' ');

IEnumerator WhyNotBoth(float charTime, float wordTime)
{
    for (int i = 0; i < strArray.Length; i++)
    {
        foreach (char ch in strArray[i])
        {
            bothTextBox.text += ch;
            yield return new WaitForSeconds(charTime);
        }
        // add a space after each word
        bothTextBox.text += " ";
        yield return new WaitForSeconds(wordTime);
    }
    StopCoroutine(WhyNotBoth(0.0f, 0.0f));
}

The full script I created is below, it is fully commented and is ready to be copy/pasted then attached to any GameObject. If you have any comments or questions please let me know! Thank you for reading and I hope this helps you out!
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
// For demonstration purposes this script is attached to an empty GameObject in the scene
public class SlowTextScript : MonoBehaviour
{
    public Text textBox;
    public Text bothTextBox;
    [Tooltip("If this is checked there will be a time gap between words. Other wise there is a time gap between each character.")]
    public bool isTimeBetweenWords;
    public float timeBetweenWords, timeBetweenChars;
    string theText;
    // if each word is wanted to be slowly displayed an array will need to be used
    string[] strArray;
    // Use this for initialization
    void Start()
    {
        if (textBox == null || bothTextBox == null)
            Debug.LogError("There is no TextBox assinged!");
        // String should be set to whatever you want to display
        theText = "This is example text! This is example text! This is example text! " +
            "This is example text! This is example text! This is example text!";
        // create an array of words
        strArray = theText.Split(' ');
    }
    // This is public to be used when pressing a button(OnClick()) in the UI but it can be setup however you want
    public void StartSlowText()
    {
        if (isTimeBetweenWords)
        {
            // start the coroutine
            StartCoroutine(TextSlower(timeBetweenWords));
        }
        else
        {
            // start the coroutine
            StartCoroutine(TextSlower(timeBetweenChars));
        }
        // the numbers will need to be played with in order to get what looks good
        // WhyNotBoth(0.1, 0.33) seems a good starting point
        StartCoroutine(WhyNotBoth(timeBetweenChars, timeBetweenWords));
    }
    IEnumerator WhyNotBoth(float charTime, float wordTime)
    {
        for (int i = 0; i < strArray.Length; i++)
        {
            foreach (char ch in strArray[i])
            {
                bothTextBox.text += ch;
                yield return new WaitForSeconds(charTime);
            }
            // add a space after each word
            bothTextBox.text += " ";
            yield return new WaitForSeconds(wordTime);
        }
        StopCoroutine(WhyNotBoth(0.0f, 0.0f));
    }
    IEnumerator TextSlower(float time)
    {
        if (isTimeBetweenWords)
        {
            for (int i = 0; i < strArray.Length; i++)
            {
                // dont forget to add a space inbetween each word
                textBox.text += strArray[i] + " ";
                yield return new WaitForSeconds(time);
            }
            StopCoroutine(TextSlower(0.0f));
        }
        else
        {
            foreach (char ch in theText)
            {
                textBox.text += ch;
                // wait between each letter
                yield return new WaitForSeconds(time);
            }
            StopCoroutine(TextSlower(0.0f));
        }
    }
}

Comments

  1. This code is really helpful for developing unity 3D games. Unity Application Development Company is one of the unity 3D game development company who helps to create the 3D games.

    ReplyDelete

Post a Comment

Popular posts from this blog

How different data structures can be used in game coding: List, Queue, and Stack

Tips on Improving the performance (fps) for your Unity game. (General topics)