Author Topic: Fading Text per Character Example  (Read 4055 times)

Stephan B.

  • Administrator
  • Hero Member
  • *****
  • Posts: 5603
Fading Text per Character Example
« on: August 04, 2016, 03:49:47 PM »
Here is an example where the text is faded per character with control over the number of characters the fade occurs over + tint control.



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

Stephan B.

  • Administrator
  • Hero Member
  • *****
  • Posts: 5603
Re: Fading Text per Character Example
« Reply #1 on: August 04, 2016, 04:12:39 PM »
Revised example image.


Talos

  • Newbie
  • *
  • Posts: 1
Re: Fading Text per Character Example
« Reply #2 on: September 04, 2016, 11:16:41 PM »
Hey Stephan. That's exactly the type of animation i was looking for with TextMesh Pro.

I do want your advice on how to intergrate some VFX with it in a proper way. I've tried to find any reference for you to use but basically if you can explain to me how to add even simplest VFX i think i can pick it up from there.

FOr example: Covering the words in Ice or burning them out with fire.

Stephan B.

  • Administrator
  • Hero Member
  • *****
  • Posts: 5603
Re: Fading Text per Character Example
« Reply #3 on: September 06, 2016, 01:37:49 AM »
The challenge in trying to create some visual FX like covering characters with Ice or Fire is that the geometry of the text and character is limit to 4 vertices and (1) Quad. So we don't have access to the actual shape of the characters since those are part of a texture.

Knowing this, and using a script or modified script similar to the one posted in this thread, we can still use particles or sprite or both in Unity and position these at some position per character like the center and run some particle FX / Animated Sprite while at the same time fade the text behind.

I am not really familiar with Unity's Particle system but I will try to create some example of this.

gumboots

  • Jr. Member
  • **
  • Posts: 77
Re: Fading Text per Character Example
« Reply #4 on: May 18, 2018, 12:47:10 AM »
Hi Stephan,

I hope it's OK to revive this as it's directly relevant to it. Do you have any pointers for making this run at the current framerate? Obviously instead of yielding an amount of time at the end I just yield a single frame, however then the whole mesh basically updates at the same time (because currentCharacter is increased almost instantly).

I've tried to figure it out myself, but I'm at a loss. I like the smooth effect but I want it to run with the framerate as currently it looks a bit stuttery at high frame rates.

Thanks!