Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice

Question How to create a fill effect (like in image) for TMP text?

Discussion in 'UGUI & TextMesh Pro' started by Gunner22, Feb 24, 2022.

  1. Gunner22

    Gunner22

    Joined:
    Jan 15, 2020
    Posts:
    57
    How can I animate a TMP text with a fill effect. I took a look at some examples from TMP package but I can't figure out how to do it is it even passible?
     
  2. homer_3

    homer_3

    Joined:
    Jun 19, 2011
    Posts:
    117
    This sounds like what I was just trying to do the other day. To achieve it, I changed the shader of the TMP object to TextMeshPro/Mobile/Distance Field - Masking. Then in the debug settings, you can play with the clip rect values to find your boundaries. For me, I just wanted to do a vertical fill and I found my boundaries in the T field were -1.25 to 1.25. Then I just made a script to set the _ClipRect parameter in the shader to do the fill.
     
  3. Gunner22

    Gunner22

    Joined:
    Jan 15, 2020
    Posts:
    57
    I doesn't seem to work. It changes the preview of font asset but it is not doing anything to the font itself.
     
  4. Gunner22

    Gunner22

    Joined:
    Jan 15, 2020
    Posts:
    57
    Can you maybe share picture of your material preset.
     
  5. homer_3

    homer_3

    Joined:
    Jun 19, 2011
    Posts:
    117
    My attached image shows the shader, debug settings, text field, and result. In the result at the bottom there are 2 TMP text objects. The one in black uses a regular Distance Field shader. The one in blue is doing the fill effect. I set T in Clip Rect to 1 to get it to not fill all the way to the top.


     
  6. Gunner22

    Gunner22

    Joined:
    Jan 15, 2020
    Posts:
    57
    I changed my shader setting and the preview shows change on font asset but nothing is really happening to the text itself. When I add a mask texture and change wipe possition there is some amsking but I don't know what the right texture for horizontal fill should be.
    Here are shader settings:
    upload_2022-3-2_12-52-17.png
     
  7. Gunner22

    Gunner22

    Joined:
    Jan 15, 2020
    Posts:
    57
    I ended creating a simple gradient texture like you can find in TMP examples and extras (wipe pattern for example) just made it horizontal for the mask texture in debug settings. Than I added rect mask 2d to text parent so it override the text rect and I control the mask amount by changing wipe position.

    If anybody needs more details maybe this forum post can help:
    https://forum.unity.com/threads/tmp-mask-shader.673696/
     
    Last edited: Mar 3, 2022