Search Unity

[Solved]How to reveal text using a wipe?

Discussion in 'UGUI & TextMesh Pro' started by Dark_Eye, Jan 25, 2016.

  1. Dark_Eye

    Dark_Eye

    Joined:
    Jan 25, 2016
    Posts:
    3
    I'm looking for a way to wipe reveal text, I have a simple "append next char after X amount of time" system at the moment but it doesn't look smooth. I am looking for a way to do something similar that is done in PowerPoint when using wipe on text. What is the best approach for this?

    Something like this but smoother:
     
  2. Dameon_

    Dameon_

    Joined:
    Apr 11, 2014
    Posts:
    542
    Easiest way would be to create the leading letter as a separate text object, and give it its own script that increases the alpha of the text's color for the fade, and increases the width of the visible text area to do a wipe effect.
     
  3. Dark_Eye

    Dark_Eye

    Joined:
    Jan 25, 2016
    Posts:
    3
    How would I go about doing that? I have looked at making a BaseMeshEffect but that only runs once
     
  4. karl_jones

    karl_jones

    Unity Technologies

    Joined:
    May 5, 2015
    Posts:
    8,297
    You could do this with a UI mask. Parent the text to the mask and animate the mask rect so it grows..use a mask texture with some feathering at the edges.
     
    Dark_Eye likes this.
  5. Dark_Eye

    Dark_Eye

    Joined:
    Jan 25, 2016
    Posts:
    3
    ... Well that was a simple solution Thanks :D
    Now to see if I can create a script to do this automatically ^^
     
    karl_jones likes this.
  6. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Instead of animating the Rect (size) which would trigger the re-layout of the UI which would not be efficient, here is an alternative way to do this using TextMesh Pro.

    This works by using a masking texture which is assigned to your material. This texture can control the shape of the masking area as well as be animated to create visual FX like wipe. Since this is done at the shader level, it is very efficient. Here are a few examples.



    This works with the Canvas system and 2D Rect Mask as well as with the normal TextMesh Pro component which uses the Mesh Renderer.

    In these example, I am simply manually changing the Wipe Control property of the material. I am also assigning different Masking Textures for the different patterns.

    The edge of the transition can also be tinted.

    This functionality will be available in the next release of TextMesh Pro.
     
  7. mentorgame1

    mentorgame1

    Joined:
    Oct 31, 2016
    Posts:
    19
    amazing. but i wonder how to do this line by line. similar to karaoke or narration applications.