Handwriting

This post will be in English because, unlike other posts, this one may contain useful thingy’s.

At the end of the post we will be able to replicate the effect seen on a movie. For this tutorial I will use schoolbell font.

Step 1. Export the font.

After importing the *.ttf file into Unity, set the correct size (usually really big, 150px or more) and create the editable copy, as shown in the following screenshot. If you can not be bothered with tracing that many letters for tutorial purpose, limit your options to only upper or lower case. I did that.

createEditableCopy

Step 2. Trace the letters in gimp/photoshop

Open the exported file in gimp, and then trace the files with gradient ranging from red to black. Do it as if you were writing those letters by hand. The more red parts will be rendered first, the more black ones second. In the end you should end up with something like this:

Schoolbell_handwriting

Step 3. Part of the shader

First of all, we need to find the shader unity uses for UI fonts. After getting the build-in shaders from unity website, we see that UI/Unlit/Text shader falls back on UI/Default Font shader which then falls back on UI/Default one. Let’s just copy-paste this one and add the possibility to multiply the alpha by a value from an external map.

Step 4. Keeping track of the current letter

After the following steps, we are able to get this:

handwriting1

The letters write themselves just fine, but there is no way yet to tell the shader which letter should be animated, and which one is already written.

My first idea was to pass to the shader the coordinates of the current letter in world space view. That proven unsuccessful, as the letters may overlap.

Another idea is to use color variable associated with each vertex of the final text mesh. Normally, each vertex gets the same color as the color of the text. The code below colors the vertices of a text mesh accordingly, so that only the letter with index lettersShown is colored.

Step 5. Final modifications of the shader.

Step 6. Animation coroutine

Uszy – podejście drugie. Wrzucanie własnych obrazków.

Po roku wracam do projektu który próbowałam nieśmiało wykonać rok temu. Tym raqzem zamiast na skończonym projekcie skupię się na poszczególnych elementach, moze wystarczy mi motywacji na kolejne 4-5 wpisów. Będzie to pewien sukces. Poniżej film z tematem pierwszego wpisu, a jutro wpis o tym jak takowy efekt osiągnąć.