- Home /
Smooth text disappear after erased like in old monitors.
Hello, I wanted to create an effect like in this video.
I'm talking about text smooth disappearing after it was erased. So I want to create the same effect for TMPro or some other text that when I erase one letter it will remain on the background and smoothly disappear.
Is this possible?
Answer by exploringunity · Jun 04, 2020 at 06:46 PM
Hey @AlexTuh,
Yes, this is possible. My idea is to have two text fields on top of each other -- one is the one you are currently writing to, the other is the one that is fading/invisible, and you swap them out on each new line of dialogue. Below is a simple, but complete example demonstrating the concept -- press spacebar a few times to test it. First a couple screenshots showing the setup:
And the settings for TMP Text 2 (TMP Text 1 is the same, but without any initial text):
Finally, the code:
Assets/DialogueManager.cs
using TMPro;
using UnityEngine;
public class DialogueManager : MonoBehaviour
{
public TMP_Text txt;
public TMP_Text txt2;
TMP_Text activeTxt;
TMP_Text fadingTxt;
public float secondsPerChar = 0.03f;
public float secondsToFade = 1.0f;
int messageIdx; // Which message is displayed
int charIdx; // Which character of the message is being typed
float timeSinceLastChar;
float fadingTxtAlpha; // 0 = invisible, 1 = visible
bool waiting = true; // Are we waiting for the user to advance the dialogue?
void Start()
{
activeTxt = txt;
fadingTxt = txt2;
}
void Update()
{
if (waiting) { WaitForUserInput(); }
else { DisplayMessage(); }
FadeBackgroundMessage();
}
void WaitForUserInput()
{
if (messageIdx == messages.Length - 1) { return; } // No more messages
if (Input.GetKeyDown(KeyCode.Space))
{
AdvanceDialogue();
waiting = false;
}
}
void AdvanceDialogue()
{
// Reset the message/char indices for the new message
messageIdx++;
charIdx = 0;
// Clear out the last faded text and reset its alpha
fadingTxtAlpha = 1f;
fadingTxt.text = string.Empty;
fadingTxt.alpha = fadingTxtAlpha;
// Swap out the active and fading text boxes
var tmpTxt = activeTxt;
activeTxt = fadingTxt;
fadingTxt = tmpTxt;
}
void DisplayMessage()
{
var message = messages[messageIdx];
// Allow user to skip typing animation
if (Input.GetKeyDown(KeyCode.Space))
{
activeTxt.text = message;
charIdx = message.Length;
}
// Are we done typing this message?
if (charIdx >= message.Length)
{
waiting = true;
timeSinceLastChar = 0f;
return;
}
// Type the next character if we've waited long enough
while (timeSinceLastChar >= secondsPerChar)
{
activeTxt.text = message.Substring(0, charIdx + 1);
charIdx++;
timeSinceLastChar -= secondsPerChar;
}
timeSinceLastChar += Time.deltaTime;
}
void FadeBackgroundMessage()
{
if (fadingTxtAlpha > 0f)
{
fadingTxtAlpha -= Mathf.Clamp01((1 / secondsToFade) * Time.deltaTime);
fadingTxt.alpha = fadingTxtAlpha;
}
}
string[] messages = new[] // Some test messages to display
{
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"Suspendisse venenatis quam id ante viverra, et suscipit purus posuere.",
"Nam non iaculis purus, a varius arcu.",
"Integer fermentum molestie turpis, sit amet pulvinar est viverra in.",
"Morbi pretium enim eu pellentesque aliquet.",
};
}
It's not what I wanted, I meant if I erase one letter from the big text for example I have text like this: "lorem ipsum" and I erase one letter and I have this: "lorem ipsu" so letter "m" need to fade out like in that video.
Sorry, I misunderstood what you were looking for. It sounds like you should be able to achieve the effect you're describing by changing the alpha property of multiple strings with some timer(s) -- similar to the code sample I provided, but fading characters one-by-one ins$$anonymous$$d of typing them one by one. What sort of things have you tried so far?
I tried applying render texture to a material and making layers behind the text so then I will have a slight delay between text and background, I used C# scripts and It was pretty bad because it was super inefficient.
Your answer
Follow this Question
Related Questions
Shader Material in Game view 0 Answers
Visual Effect Graph strange problem 0 Answers
Freezing effect on camera 0 Answers
Post-Effects & Shaders issue 0 Answers
Material is not visible in android build but works fine in editor? 0 Answers