Sign in to follow this  
blueshogun96

Animating the drawing of text?

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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 =)

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this