koobas.hobune.stream
Fade in text one character at a time
I have written two enumerators, which I will provide. One Prints the character one at a time, the other changes the alpha of the text. However, I can't seem to wrap my head around how these two can be used in each other, and so for that I ask How can I implement the given FadeTo enumerator into the PrintText enumerator so that the characters not only print one at a time, but also fade in one character at a time?
private IEnumerator FadeTo(float aValue, float tValue)
{
float alpha = GameText.GetComponent<Text>().color.a;
for (float i = 0; i < 1.0f; i += Time.deltaTime / tValue)
{
Color alphaChange = new Color(1, 1, 1, Mathf.Lerp(alpha, aValue, i));
GameText.GetComponent<Text>().color = alphaChange;
yield return null;
}
}
private IEnumerator CharXChar(string text)
{
for (int i = 0; i < text.Length; i++)
{
yield return new WaitForSeconds(0.1f);
GameText.GetComponent<Text>().text = GameText.GetComponent<Text>().text + text[i];
}
}
I can't take credit for this so I will link to the place I received the answer, but here is the gist. While this isn't very efficient, it works for what I'm doing:
using UnityEngine;
using UnityEngine.UI;
using System.Collections;
[RequireComponent(typeof(Text))]
public class TextFade : MonoBehaviour
{
[Tooltip("Number of seconds each character should take to fade up")]
public float fadeDuration = 2f;
[Tooltip("Speed the reveal travels along the text, in characters per second")]
public float travelSpeed = 8f;
// Cached reference to our Text object.
Text _text;
Coroutine _fade;
// Lookup table for hex characters.
static readonly char[] NIBBLE_TO_HEX = new char[] {
'0', '1', '2', '3',
'4', '5', '6', '7',
'8', '9', 'A', 'B',
'C', 'D', 'E', 'F'};
// Use this for initialization
void Start()
{
_text = GetComponent<Text>();
// If you don't want the text to fade right away, skip this line.
FadeTo(_text.text);
}
public void FadeTo(string text)
{
// Abort a fade in progress, if any.
StopFade();
// Start fading, and keep track of the coroutine so we can interrupt if needed.
_fade = StartCoroutine(FadeText(text));
}
public void StopFade()
{
if (_fade != null)
StopCoroutine(_fade);
}
// Currently this expects a string of plain text,
// and will not correctly handle rich text tags etc.
IEnumerator FadeText(string text)
{
int length = text.Length;
// Build a character buffer of our desired text,
// with a rich text "color" tag around every character.
var builder = new System.Text.StringBuilder(length * 26);
Color32 color = _text.color;
for (int i = 0; i < length; i++)
{
builder.Append("<color=#");
builder.Append(NIBBLE_TO_HEX[color.r >> 4]);
builder.Append(NIBBLE_TO_HEX[color.r & 0xF]);
builder.Append(NIBBLE_TO_HEX[color.g >> 4]);
builder.Append(NIBBLE_TO_HEX[color.g & 0xF]);
builder.Append(NIBBLE_TO_HEX[color.b >> 4]);
builder.Append(NIBBLE_TO_HEX[color.b & 0xF]);
builder.Append("00>");
builder.Append(text[i]);
builder.Append("</color>");
}
// Each frame, update the alpha values along the fading frontier.
float fadingProgress = 0f;
int opaqueChars = -1;
while (opaqueChars < length - 1)
{
yield return null;
fadingProgress += Time.deltaTime;
float leadingEdge = fadingProgress * travelSpeed;
int lastChar = Mathf.Min(length - 1, Mathf.FloorToInt(leadingEdge));
int newOpaque = opaqueChars;
for (int i = lastChar; i > opaqueChars; i--)
{
byte fade = (byte)(255f * Mathf.Clamp01((leadingEdge - i) / (travelSpeed * fadeDuration)));
builder[i * 26 + 14] = NIBBLE_TO_HEX[fade >> 4];
builder[i * 26 + 15] = NIBBLE_TO_HEX[fade & 0xF];
if (fade == 255)
newOpaque = Mathf.Max(newOpaque, i);
}
opaqueChars = newOpaque;
// This allocates a new string.
_text.text = builder.ToString();
}
// Once all the characters are opaque,
// ditch the unnecessary markup and end the routine.
_text.text = text;
// Mark the fade transition as finished.
// This can also fire an event/message if you want to signal UI.
_fade = null;
}
}
P.S. $$anonymous$$ake sure you create a new Canvas and attach this directly. It will automatically create a text component from which it will use. Don't modify anything except, I believe you can change the color (except alpha channel) and it will still work.
Edit
You can change everything except do not un-check RichText and don't change the alpha.
You're going to need to make a new text object for each new letter, in order to adjust its color separately to the rest of the string. Currently the CharXChar function is just adding characters to the same text object.
Then the FadeTo function should take the text object as an input and can then be called within the CharXChar function after the creation of each new character.
If you don't want to end up with an object for each character at the end, then you will need to combine the letters once they have finished fading in, and destroy the old objects.
Is, there any other way to do this? If not could you kindly provide and example? I work better seeing examples, even if they are pseudo.
I don't know of any other way that wouldn't be more complicated. Unless you can find someone elses code or asset on the asset store.
Some untested and unfinished code would look something like this:
private IEnumerator FadeTo(float aValue, float tValue, Text character)
{
float alpha = character.color.a;
for (float i = 0; i < 1.0f; i += Time.deltaTime / tValue)
{
Color alphaChange = new Color(1, 1, 1, $$anonymous$$athf.Lerp(alpha, aValue, i));
character.color = alphaChange;
yield return null;
}
}
private IEnumerator CharXChar(string text)
{
for (int i = 0; i < text.Length; i++)
{
yield return new WaitForSeconds(0.1f);
//create the character object
GameObject character = Instantiate(Resources.Load("Single Character") as GameObject);
//set the position of the character object here (this may be a little difficult once you start considering kerning)
Text characterText = GameText.GetComponent<Text>();
characterText.text + text[i];
StartCoroutine(FadeTo(aValue, tValue, characterText));
}
}
Add this Class toObjects with Renderer component.
using UnityEngine;
using System.Collections;
using System;
public class BlinkColor : MonoBehaviour {
public Color colorIni = Color.white;
public Color colorFin = Color.red;
public float duration = 3f;
private Color lerpedColor = Color.white;
private float t=0;
private bool flag;
private Renderer _renderer;
void Start () {
_renderer=GetComponent<Renderer>();
}
void Update() {
lerpedColor = Color.Lerp (colorIni, colorFin, t);
_renderer.material.color = lerpedColor;
if (flag == true) {
t -= Time.deltaTime/duration;
if (t < 0.01f)
flag = false;
} else {
t += Time.deltaTime/duration;
if (t > 0.99f)
flag = true;
}
}
}
