Animating the drawing of text?

Started by
4 comments, last by blueshogun96 7 years ago

One thing that I want to do for my game is animate the drawing/writing of text, to give the visual effect of my game's title being hand drawn, sort of. I'm not 100% sure how I would approach this. If you need to know what I'm talking about from a visual example, check out this stackoverflow question as it gives a great example on what I'm trying to do (Javascript): http://stackoverflow.com/questions/29911143/how-can-i-animate-the-drawing-of-text-on-a-web-page

So, what I am trying to do is achieve this using your run of the mill 3D API (in this case, OpenGL ES). One idea that I came up with would be to animate it using splines running along a texture somehow. Adobe Illustrator does this. To be frank, it's not the OpenGL side I can't figure out, but the overall implementation or where to begin. I already have spline code for my game as splines are heavily used in my title's art style already. After a while of googling, I haven't found any one else document how they have achieved this, as I know it has been done before.

The implementation doesn't have to be perfect, as I can improve it later on as needed. Any ideas? Thanks.

Shogun.

Advertisement

First suggestion that comes to mind...

For each character in your font, generate a alpha texture. Let the alpha value be essentially time. A value of 0.0f would be "draw this at frame 0 and onwards (i.e. always draw)", while a value of 0.5f would be "draw this at duration_of_character_write/2 and onwards"

When drawing, increase time per update. If it's a previously written character, just draw with the full alpha, if not, use the time alpha value as a mask.

Not sure if that makes sense or not, but I'm going to bed. Good luck =)

Hello to all my stalkers.

I would go with the simple artistic approach: draw the final result first, then make a mask (that shows the title) for each frame, progressively covering the whole title.

A mask as described above is likely a good approach. Additionally, if you really require high precision (or have a really long title) a single mask might not suffice, so you could do each letter or something alike. Expensive, but I doubt performance is going to make a difference in your title screen.

Disadvantage will probably be the authoring of that animation. You can always opt to look for an existing tool that does this for you and record that instead

First suggestion that comes to mind...
For each character in your font, generate a alpha texture. Let the alpha value be essentially time. A value of 0.0f would be "draw this at frame 0 and onwards (i.e. always draw)", while a value of 0.5f would be "draw this at duration_of_character_write/2 and onwards"
When drawing, increase time per update. If it's a previously written character, just draw with the full alpha, if not, use the time alpha value as a mask.

Not sure if that makes sense or not, but I'm going to bed. Good luck =)

This is the best way. Make a timeline for each character via the alpha channel. Draw with a progressively increasing alpha-test value, uncovering parts of the lines, making them appear to be drawn in real-time.


L. Spiro

I restore Nintendo 64 video-game OST’s into HD! https://www.youtube.com/channel/UCCtX_wedtZ5BoyQBXEhnVZw/playlists?view=1&sort=lad&flow=grid

First suggestion that comes to mind...
For each character in your font, generate a alpha texture. Let the alpha value be essentially time. A value of 0.0f would be "draw this at frame 0 and onwards (i.e. always draw)", while a value of 0.5f would be "draw this at duration_of_character_write/2 and onwards"
When drawing, increase time per update. If it's a previously written character, just draw with the full alpha, if not, use the time alpha value as a mask.

Not sure if that makes sense or not, but I'm going to bed. Good luck =)

This is the best way. Make a timeline for each character via the alpha channel. Draw with a progressively increasing alpha-test value, uncovering parts of the lines, making them appear to be drawn in real-time.


L. Spiro

Ohhhhhhhhh, now I get it! L. Spiro's response put it into perspective that I could understand. Thanks.

Shogun.

This topic is closed to new replies.

Advertisement