koobas.hobune.stream
Animate Text letter by letter
How would I animate text letter by letter such that a line of texts fades in from left to right? Every tutorial online seems to just add each letter to the text in a coroutine, but this does not have my intended effect. I want each letter to fade in, rather than display instantly. I of course could do this if I make a text object for each letter, but this seems like a horrible solution, and doesn't scale well if I want to change the text dynamically.
Any help would be appreciated.
I can think of a couple of ways you could do this, depending on exactly what effect you're trying to get.
You could write a fragment shader for the text which controls the alpha based on the screen coordinates. I think you can download the source for Unity's normal text shader as part of their shader source bundle on the website, which you could edit to do this.
The other options is to render the text to a render target, and then draw that onto geometry where you want the text to appear, using a shader that fades it on in the way that you want.
I think the first option is probably the most sensible in most cases.
EDIT
I think there's a better way. Unity lets you do tags for colour changes for individual letters. Assuming you know the colour of what's behind the text (which may not be the case). So what you could do is put arrange it so that all of the text that's already faded is within a tag for the foreground colour, the currently fading in character has a tag that lerps from background->foreground, and the remaining text is tagged with the background colour.
So you'd end up with something like...
[Tag]This text is at the start and already faded in. The next character is currently fading[/Tag][Tag]C[/Tag][Tag]This text is currently invisible because it's the same as the background.[/Tag]
(Actual tags look different to that, but the website gets confused if I use the real ones. Here's the docs: http://docs.unity3d.com/Manual/StyledText.html)
You'd need to update the text every frame, and do a bunch of logic to keep track of the current character and manage the lerp, but I reckon it'd work. (Again, assuming the background colour is know. According to the docs, the alpha that you pass in is ignored).
Luckily for my game, the background color is solid black, so this should work. I am curious how to get this to work with any background though, but this isn't needed for my game. Thanks for you help!
Even with Rob's answer, I just don't see how this can be done, consistently, with a shader, or a even single object. The problem is that you cannot apply an alpha- transparency to only one letter of a text object, and shader-wise each letter is a different width. So, I would also suggest you do indeed use a separate game object for each letter (at least during the fade in-out period). If you store a countdown-timer with each letter, you can use this timer to set each letter's materials' color's ALPHA value (let me know if you need more details on how to access that value). Using a alpha of 0 will make it invisibly-transparent, and value of 1 will make it opaque. Values in between make for partial transparency.
Regarding scalability: suggest you create a FadeText class, and within THAT class implement the fading and creation of individual letter objects. That way, your "game" code need only adjust the FadeText values (font, size, etc..), and this class can set then values appropriately on, or create as needed, each letter-gameobject.
EDIT: Rob's edited answer, to use internal tags is great. I'd do that.
You could do it with no code by creating an animation clip that animates the alpha channel coming on in the material for each letter .
