Dec
3
2015

UI Text TypeWriter Effect [Script]

An article by mgear

UI_typewriter_effect

Quick & simple UI text typewriter effect (displays UI text 1 character at a time)

Assign to UI text component, it grabs the text from it at Awake() and clears it,
then starts to type out the text 1 character at a time.

UI_typewriter_effect_script

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

	// attach to UI Text component (with the full text already there)

	public class UITextTypeWriter.cs : MonoBehaviour
	{

	Text txt;
	string story;

	void Awake ()
	{
	txt = GetComponent<Text> ();
	story = txt.text;
	txt.text = "";

	// TODO: add optional delay when to start
	StartCoroutine (PlayText());
	}

	IEnumerator PlayText()
	{
	foreach (char c in story)
	{
	txt.text += c;
	yield return new WaitForSeconds (0.125f);
	}
	}

	}

view raw UITextTypeWriter.cs hosted with ❤ by GitHub

More versions, see comments:
https://gist.github.com/unitycoder/19625fed364a39cb278f

Tags: appear, effect, script, text, type, typewriter, ui

About the Author:

.fi

15 Comments + Add Comment

Rachel 16/03/2016 at 12:04

LifeSaver. thank you

Reply
jzq 12/05/2016 at 14:30

Then where the link ? how can i download it??

Reply
- mgear 12/05/2016 at 15:12
  
  Full script source is ^up there in the post,
  but also here (someone has actually made improved version there with more options, see the comments on that page)
  https://gist.github.com/unitycoder/19625fed364a39cb278f#file-uitexttypewriter-cs
  
  Reply
UI を作成する方法 (uGUI) [Unity] – Site-Builder.wiki 01/12/2020 at 15:35

[…] UI Text TypeWriter Effect | Unity Coding (unitycoder.com) […]

Reply
ZZMax 05/02/2021 at 19:04

Really useful! Thanks!

Reply
テキストを表示する方法 [Unity] – Site-Builder.wiki 10/02/2021 at 01:47

[…] UI Text TypeWriter Effect | Unity Coding (unitycoder.com) […]

Reply
sam 30/05/2021 at 17:27

hey, i want to make if u press a mouse button the whole text appears, how do i make that happen?

Reply
- kimathi 24/03/2022 at 11:49
  
  you could probably just have a var for the entire text and then make that show instead when the player presses a button
  
  Reply
2gold 10/10/2021 at 09:10

Thank!

Reply
FunFoxRR 25/03/2022 at 03:00

THANKS SO MUCH! I’ve been searching for hours to find this simple solution. Thanks!

Reply
RoxFever 30/12/2022 at 01:17

Thank you, worked like a charm!

Reply
Spider 04/04/2023 at 17:54

LoL, nice start, but reading the github code suggestion/improvements makes me facepalm a lot.

Any delay can be added inside the coroutine, no need for multiple calls, no need to convert commas or dots, just compare the char dirrectly…

Reply
thaFoxy 23/05/2023 at 22:07

thank you! you’re the only one who made a script that actually works!

Reply
Diego Pellacani 23/05/2023 at 22:08

oh ohh ohhohoh it works.

Reply
Asker 24/02/2024 at 02:41

How do I take away each character, doing a -= operator does not work.

Reply