Search Unity

TextMesh Pro Have words fade in one by one

Discussion in 'Unity UI (uGUI) & TextMesh Pro' started by MKrohn, Apr 5, 2018.

  1. MKrohn

    MKrohn

    Joined:
    Apr 5, 2018
    Posts:
    8
    Hi,

    what I am trying to achieve is a text animation where every word fades in individually, one after the other.

    Seemingly, there is a way to access words alpha value individually like this:
    Code (CSharp):
    1. GetComponent<TextMeshPro>.textInfo.wordInfo[0].textComponent.alpha
    So I tried looping through all words and tweening their alpha-values one after the other.
    Sadly, what happens is that always the whole text (all words) is alpha-tweened, most likely because "textComponent" always references the same shared component, or just because all words share the same material.

    Does anybody know of a way to access alpha values of words, individually?
    Or would I need to create a new TextMeshPro-object-instance for each word?
     
  2. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    3,187
    See the following post http://digitalnativestudios.com/forum/index.php?topic=1182.msg8986#msg8986

    In that example the fading occurs per character so to achieve a similar result per word, you would iterate over each word. For each word, you would still have to apply the vertex attribute change to each of the characters of the word.

    When working with the TextInfo and the data it contains, remember that it is the resulting output of the text processing. Changing the TextInfo or data contained within has no impact on the text object.
     
    Last edited: Apr 5, 2018
    Laniemme likes this.
  3. MKrohn

    MKrohn

    Joined:
    Apr 5, 2018
    Posts:
    8
    Awesome!! That worked! Many thanks!
     
    Stephan_B likes this.
  4. Pimpace

    Pimpace

    Joined:
    Sep 21, 2017
    Posts:
    23
    Hello Stephan! I know it's an old topic but I'm trying to achieve the opposite of your script. Fade IN char by char with alpha + color. But I couldn't figure out how can I modify your script to do this. I tried
    Code (CSharp):
    1. m_TextComponent.maxVisibleCharacters = currentCharacter;
    and tried to reverse the for cycle, but didn't get to work... :( Or do I need to set all characters's alpha to zero one by one first? Can you point out to me where do I need to modify the script?
     
    Goat-Boy likes this.
  5. su9257

    su9257

    Joined:
    Jun 13, 2017
    Posts:
    16
    Hey, I also encountered the same problem as you. How did you finally solve it?
     
    Goat-Boy likes this.
  6. Pimpace

    Pimpace

    Joined:
    Sep 21, 2017
    Posts:
    23
    I didn't :( Finally I made an ugly workaround with a gradient sprite masked with TMP UGUI object, so it "looks" like it faded out.
     
  7. Marijn_Kiwi

    Marijn_Kiwi

    Joined:
    May 15, 2013
    Posts:
    9
    I slightly modified the script so it would reveal instead of hide. Make sure your
    Code (CSharp):
    1. public Color ColorTint;
    is set to alpha max alpha, otherwise it will never trigger the next char
    Code (CSharp):
    1. if (alpha == 255)
    Code (CSharp):
    1.  
    2. using System.Collections;
    3. using TMPro;
    4. using UnityEngine;
    5.  
    6. public class RevealText : MonoBehaviour
    7. {
    8.  
    9.     private TMP_Text m_TextComponent;
    10.  
    11.     public float FadeSpeed = 1.0F;
    12.     public int RolloverCharacterSpread = 10;
    13.     public Color ColorTint;
    14.  
    15.  
    16.     void Awake()
    17.     {
    18.         m_TextComponent = GetComponent<TMP_Text>();
    19.     }
    20.  
    21.  
    22.     void Start()
    23.     {
    24.         StartCoroutine(AnimateVertexColors());
    25.     }
    26.  
    27.  
    28.     /// <summary>
    29.     /// Method to animate vertex colors of a TMP Text object.
    30.     /// </summary>
    31.     /// <returns></returns>
    32.     IEnumerator AnimateVertexColors()
    33.     {
    34.         // Need to force the text object to be generated so we have valid data to work with right from the start.
    35.         m_TextComponent.ForceMeshUpdate();
    36.  
    37.  
    38.         TMP_TextInfo textInfo = m_TextComponent.textInfo;
    39.         Color32[] newVertexColors;
    40.  
    41.         int currentCharacter = 0;
    42.         int startingCharacterRange = currentCharacter;
    43.         bool isRangeMax = false;
    44.  
    45.         while (!isRangeMax)
    46.         {
    47.             int characterCount = textInfo.characterCount;
    48.  
    49.             // Spread should not exceed the number of characters.
    50.             byte fadeSteps = (byte)Mathf.Max(1, 255 / RolloverCharacterSpread);
    51.  
    52.  
    53.             for (int i = startingCharacterRange; i < currentCharacter + 1; i++)
    54.             {
    55.                 // Skip characters that are not visible
    56.                 //if (textInfo.characterInfo[i].isVisible) continue;
    57.  
    58.                 // Get the index of the material used by the current character.
    59.                 int materialIndex = textInfo.characterInfo[i].materialReferenceIndex;
    60.  
    61.                 // Get the vertex colors of the mesh used by this text element (character or sprite).
    62.                 newVertexColors = textInfo.meshInfo[materialIndex].colors32;
    63.  
    64.                 // Get the index of the first vertex used by this text element.
    65.                 int vertexIndex = textInfo.characterInfo[i].vertexIndex;
    66.  
    67.                 // Get the current character's alpha value.
    68.                 byte alpha = (byte)Mathf.Clamp(newVertexColors[vertexIndex + 0].a + fadeSteps, 0, 255);
    69.  
    70.                 // Set new alpha values.
    71.                 newVertexColors[vertexIndex + 0].a = alpha;
    72.                 newVertexColors[vertexIndex + 1].a = alpha;
    73.                 newVertexColors[vertexIndex + 2].a = alpha;
    74.                 newVertexColors[vertexIndex + 3].a = alpha;
    75.  
    76.                 // Tint vertex colors
    77.                 // Note: Vertex colors are Color32 so we need to cast to Color to multiply with tint which is Color.
    78.                 newVertexColors[vertexIndex + 0] = (Color)newVertexColors[vertexIndex + 0] * ColorTint;
    79.                 newVertexColors[vertexIndex + 1] = (Color)newVertexColors[vertexIndex + 1] * ColorTint;
    80.                 newVertexColors[vertexIndex + 2] = (Color)newVertexColors[vertexIndex + 2] * ColorTint;
    81.                 newVertexColors[vertexIndex + 3] = (Color)newVertexColors[vertexIndex + 3] * ColorTint;
    82.  
    83.                 if (alpha == 255)
    84.                 {
    85.                     startingCharacterRange += 1;
    86.  
    87.                     if (startingCharacterRange == characterCount)
    88.                     {
    89.                         // Update mesh vertex data one last time.
    90.                         m_TextComponent.UpdateVertexData(TMP_VertexDataUpdateFlags.Colors32);
    91.  
    92.                         yield return new WaitForSeconds(1.0f);
    93.  
    94.                         // Reset the text object back to original state.
    95.                         m_TextComponent.ForceMeshUpdate();
    96.  
    97.                         yield return new WaitForSeconds(1.0f);
    98.  
    99.                         // Reset our counters.
    100.                         currentCharacter = 0;
    101.                         startingCharacterRange = 0;
    102.                         //isRangeMax = true; // Would end the coroutine.
    103.                     }
    104.                 }
    105.             }
    106.  
    107.             // Upload the changed vertex colors to the Mesh.
    108.             m_TextComponent.UpdateVertexData(TMP_VertexDataUpdateFlags.Colors32);
    109.  
    110.             if (currentCharacter + 1 < characterCount) currentCharacter += 1;
    111.  
    112.             yield return new WaitForSeconds(0.25f - FadeSpeed * 0.01f);
    113.         }
    114.     }
    115. }
     
  8. Pimpace

    Pimpace

    Joined:
    Sep 21, 2017
    Posts:
    23
    You're the man! Thanks!