{"id":4087,"date":"2015-12-03T02:18:40","date_gmt":"2015-12-02T23:18:40","guid":{"rendered":"http:\/\/unitycoder.com\/blog\/?p=4087"},"modified":"2022-03-24T11:55:23","modified_gmt":"2022-03-24T09:55:23","slug":"ui-text-typewriter-effect-script","status":"publish","type":"post","link":"https:\/\/unitycoder.com\/blog\/2015\/12\/03\/ui-text-typewriter-effect-script\/","title":{"rendered":"UI Text TypeWriter Effect [Script]"},"content":{"rendered":"<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"4088\" data-permalink=\"https:\/\/unitycoder.com\/blog\/2015\/12\/03\/ui-text-typewriter-effect-script\/ui_typewriter_effect\/\" data-orig-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2015\/12\/UI_typewriter_effect.gif?fit=556%2C214&amp;ssl=1\" data-orig-size=\"556,214\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"UI_typewriter_effect\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2015\/12\/UI_typewriter_effect.gif?fit=556%2C214&amp;ssl=1\" class=\"alignnone size-full wp-image-4088\" src=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2015\/12\/UI_typewriter_effect.gif?resize=556%2C214\" alt=\"UI_typewriter_effect\" width=\"556\" height=\"214\"><\/p>\n<p>Quick &amp; simple UI text typewriter effect (displays UI text 1 character at a time)<\/p>\n<p>Assign to UI text component, it grabs the text from it at Awake() and clears it,<br>\nthen starts to type out the text 1 character at a time.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"4089\" data-permalink=\"https:\/\/unitycoder.com\/blog\/2015\/12\/03\/ui-text-typewriter-effect-script\/ui_typewriter_effect_script\/\" data-orig-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2015\/12\/UI_typewriter_effect_script.jpg?fit=464%2C438&amp;ssl=1\" data-orig-size=\"464,438\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"UI_typewriter_effect_script\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2015\/12\/UI_typewriter_effect_script.jpg?fit=464%2C438&amp;ssl=1\" class=\"alignnone size-full wp-image-4089\" src=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2015\/12\/UI_typewriter_effect_script.jpg?resize=464%2C438\" alt=\"UI_typewriter_effect_script\" width=\"464\" height=\"438\" srcset=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2015\/12\/UI_typewriter_effect_script.jpg?w=464&amp;ssl=1 464w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2015\/12\/UI_typewriter_effect_script.jpg?resize=300%2C283&amp;ssl=1 300w\" sizes=\"auto, (max-width: 464px) 100vw, 464px\" \/><\/p>\n<p><style>.gist table { margin-bottom: 0; }<\/style><div style=\"tab-size: 8\" id=\"gist28571838\" class=\"gist\">\n    <div class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      <div class=\"gist-data\">\n        \n<div class=\"js-gist-file-update-container js-task-list-container\">\n      <div id=\"file-uitexttypewriter-cs\" class=\"file my-2\">\n    \n    <div itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-c  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"UITextTypeWriter.cs content, created by unitycoder on 11:08PM on December 02, 2015.\"\n    >\n\n        \n<div class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  <template class=\"js-file-alert-template\">\n  <div data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  <svg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    <path d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\"><\/path>\n<\/svg>\n    <span>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      <a class=\"Link--inTextBlock\" href=\"https:\/\/github.co\/hiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters<\/a>\n    <\/span>\n\n\n  <div data-view-component=\"true\" class=\"flash-action\">        <a href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n<\/a>\n<\/div>\n<\/div><\/template>\n<template class=\"js-line-alert-template\">\n  <span aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    <svg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    <path d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\"><\/path>\n<\/svg>\n<\/span><\/template>\n\n  <table data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"UITextTypeWriter.cs\">\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC1\" class=\"blob-code blob-code-inner js-file-line\">using UnityEngine;<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC2\" class=\"blob-code blob-code-inner js-file-line\">using System.Collections;<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC3\" class=\"blob-code blob-code-inner js-file-line\">using UnityEngine.UI;<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC4\" class=\"blob-code blob-code-inner js-file-line\">\n<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC5\" class=\"blob-code blob-code-inner js-file-line\">\/\/ attach to UI Text component (with the full text already there)<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC6\" class=\"blob-code blob-code-inner js-file-line\">\n<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC7\" class=\"blob-code blob-code-inner js-file-line\">public class UITextTypeWriter.cs : MonoBehaviour <\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC8\" class=\"blob-code blob-code-inner js-file-line\">{<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC9\" class=\"blob-code blob-code-inner js-file-line\">\n<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC10\" class=\"blob-code blob-code-inner js-file-line\">\tText txt;<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC11\" class=\"blob-code blob-code-inner js-file-line\">\tstring story;<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC12\" class=\"blob-code blob-code-inner js-file-line\">\n<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC13\" class=\"blob-code blob-code-inner js-file-line\">\tvoid Awake () <\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC14\" class=\"blob-code blob-code-inner js-file-line\">\t{<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC15\" class=\"blob-code blob-code-inner js-file-line\">\t\ttxt = GetComponent&lt;Text&gt; ();<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L16\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"16\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC16\" class=\"blob-code blob-code-inner js-file-line\">\t\tstory = txt.text;<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L17\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"17\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC17\" class=\"blob-code blob-code-inner js-file-line\">\t\ttxt.text = &quot;&quot;;<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L18\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"18\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC18\" class=\"blob-code blob-code-inner js-file-line\">\n<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L19\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"19\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC19\" class=\"blob-code blob-code-inner js-file-line\">\t\t\/\/ TODO: add optional delay when to start<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L20\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"20\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC20\" class=\"blob-code blob-code-inner js-file-line\">\t\tStartCoroutine (PlayText());<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L21\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"21\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC21\" class=\"blob-code blob-code-inner js-file-line\">\t}<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L22\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"22\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC22\" class=\"blob-code blob-code-inner js-file-line\">\n<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L23\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"23\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC23\" class=\"blob-code blob-code-inner js-file-line\">\tIEnumerator PlayText()<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L24\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"24\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC24\" class=\"blob-code blob-code-inner js-file-line\">\t{<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L25\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"25\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC25\" class=\"blob-code blob-code-inner js-file-line\">\t\tforeach (char c in story) <\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L26\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"26\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC26\" class=\"blob-code blob-code-inner js-file-line\">\t\t{<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L27\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"27\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC27\" class=\"blob-code blob-code-inner js-file-line\">\t\t\ttxt.text += c;<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L28\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"28\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC28\" class=\"blob-code blob-code-inner js-file-line\">\t\t\tyield return new WaitForSeconds (0.125f);<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L29\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"29\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC29\" class=\"blob-code blob-code-inner js-file-line\">\t\t}<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L30\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"30\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC30\" class=\"blob-code blob-code-inner js-file-line\">\t}<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L31\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"31\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC31\" class=\"blob-code blob-code-inner js-file-line\">\n<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-uitexttypewriter-cs-L32\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"32\"><\/td>\n          <td id=\"file-uitexttypewriter-cs-LC32\" class=\"blob-code blob-code-inner js-file-line\">}<\/td>\n        <\/tr>\n  <\/table>\n<\/div>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n      <\/div>\n      <div class=\"gist-meta\">\n        <a href=\"https:\/\/gist.github.com\/unitycoder\/19625fed364a39cb278f\/raw\/3ee72990b4210c08898f6fce1132a35b1b2e92cb\/UITextTypeWriter.cs\" style=\"float:right\" class=\"Link--inTextBlock\">view raw<\/a>\n        <a href=\"https:\/\/gist.github.com\/unitycoder\/19625fed364a39cb278f#file-uitexttypewriter-cs\" class=\"Link--inTextBlock\">\n          UITextTypeWriter.cs\n        <\/a>\n        hosted with &#10084; by <a class=\"Link--inTextBlock\" href=\"https:\/\/github.com\">GitHub<\/a>\n      <\/div>\n    <\/div>\n<\/div>\n<\/p>\n\n\n<p>More versions, see comments: <br><a href=\"https:\/\/gist.github.com\/unitycoder\/19625fed364a39cb278f\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/gist.github.com\/unitycoder\/19625fed364a39cb278f<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quick &amp; 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. This file [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4088,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[804,3],"tags":[807,50,189,806,808,805,650],"class_list":["post-4087","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-scripts","category-unity3d","tag-appear","tag-effect","tag-script","tag-text","tag-type","tag-typewriter","tag-ui"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2015\/12\/UI_typewriter_effect.gif?fit=556%2C214&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p1KTaT-13V","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/4087","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/comments?post=4087"}],"version-history":[{"count":2,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/4087\/revisions"}],"predecessor-version":[{"id":5520,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/4087\/revisions\/5520"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/media\/4088"}],"wp:attachment":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/media?parent=4087"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/categories?post=4087"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/tags?post=4087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}