C# script to fade in UI text letter by letter.

Content not available.
Please allow cookies by clicking Accept on the banner

Updated Script:

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

// © 2017 TheFlyingKeyboard and released under MIT License
// theflyingkeyboard.net

public class FadeInTextLetterByLetter : MonoBehaviour {
    [SerializeField] private Text textToUse;
    [SerializeField] private bool useThisText = false;
    [TextAreaAttribute(4, 15)]
    [SerializeField] private string textToShow;
    [SerializeField] private bool useTextText = false;

    [SerializeField] private float fadeSpeedMultiplier = 0.25f;
    [SerializeField] private bool fade;

    private float colorFloat = 0.1f;
    private int colorInt;
    private int letterCounter = 0;
    private string shownText;

    private void Start()
    {
        if (useThisText)
        {
            textToUse = GetComponent<Text>();
        }

        if (useTextText)
        {
            textToShow = textToUse.text;
        }

        if (fade)
        {
            Fade();
        }
    }

    private IEnumerator FadeInText()
    {
        while (letterCounter < textToShow.Length)
        {
            if (colorFloat < 1.0f)
            {
                colorFloat += Time.deltaTime * fadeSpeedMultiplier;
                colorInt = (int)(Mathf.Lerp(0.0f, 1.0f, colorFloat) * 255.0f);

                textToUse.text = shownText + "<color=\"#FFFFFF" + string.Format("{0:X}", colorInt) + "\">" + textToShow[letterCounter] + "</color>";
            }
            else
            {
                colorFloat = 0.1f;
                shownText += textToShow[letterCounter];
                letterCounter++;
            }

            yield return null;
        }
    }

    public void Fade()
    {
        StartCoroutine(FadeInText());
    }
}

Old Script:

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

// © 2017 TheFlyingKeyboard and released under MIT License
// theflyingkeyboard.net

public class FadeInTextLetterByLetter : MonoBehaviour {
    [SerializeField] private Text textToUse;
    [SerializeField] private bool useThisText = false;
    [TextAreaAttribute(4, 15)]
    [SerializeField] private string textToShow;
    [SerializeField] private bool useTextText = false;

    [SerializeField] private float fadeSpeedMultiplier = 0.25f;
    [SerializeField] private bool fade;

    private float colorFloat = 0.1f;
    private int colorInt;
    private int letterCounter = 0;
    private string shownText;

    private void Start()
    {
        if (useThisText)
        {
            textToUse = GetComponent<Text>();
        }

        if (useTextText)
        {
            textToShow = textToUse.text;
        }
    }

    private void Update()
    {
        if (fade)
        {
            if (letterCounter < textToShow.Length)
            {
                if (colorFloat < 1.0f)
                {
                    colorFloat += Time.deltaTime * fadeSpeedMultiplier;
                    colorInt = (int)(Mathf.Lerp(0.0f, 1.0f, colorFloat) * 255.0f);

                    textToUse.text = shownText + "<color=\"#FFFFFF" + string.Format("{0:X}", colorInt) + "\">" + textToShow[letterCounter] + "</color>";
                }
                else
                {
                    colorFloat = 0.1f;
                    shownText += textToShow[letterCounter];
                    letterCounter++;
                }
            }
        }
    }

    public void Toggle()
    {
        fade = !fade;
    }

    public void StartShowing()
    {
        fade = true;
    }

    public void StopShowing()
    {
        fade = false;
    }
}

 



Unity UI C# Fade In Text Letter By Letter
Tagged on:         

2 thoughts on “Unity UI C# Fade In Text Letter By Letter

  • September 11, 2018 at 10:37 am
    Permalink

    I think you should control the class name.

    Reply
    • September 11, 2018 at 6:26 pm
      Permalink

      Thanks for pointing that out, fixed it 🙂

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. You can read more about it the Cookies&Privacy Policy Section Above. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this. You can read more about it the Cookies&Privacy Policy Section.

Close