[Text] Possible effects?

Hello,

I am making my first mobile game and I've one question: is possible to replicate this text effect in Unity3D? I am using Unity UI.

Thank you for your reply

 

I do recommend TextMeshPro! https://www.assetstore.unity3d.com/en/?gclid=CO#!content/17662

 

Isn't possible to do it without costs? :/

Thank you for your reply

 

If you make the shaders yourself.

 

Is that hard to learn? I've read docs from shaders and don't quiet understood

 

Probably. Have you tried searching? Game dev isn't the easiest thing if you don't want to pay anything. You can try searching for shaders. Some are free. I haven't seen any specifically text ones for free (these are transparent shaders, typically).

 

Hmm, okay, thank you for your reply. I'll take a closer look!

 

What font (ttf) is used in the example you posted?

 

Hello, thank you for your reply.

I am using komika.

I think I downloaded it from http://www.dafont.com/pt/komika-axis.font

Have a nive day!

 

Update:

I've found that Unity has now a Shadow and a Outline component:
http://docs.unity3d.com/Manual/script-Shadow.html
http://docs.unity3d.com/Manual/script-Outline.html

For Gradient I used this solution: http://pastebin.com/4E8w9nyw

So right know I just need Blur effect... Ideas?

 

Just be mindful those FX duplicate the geometry several times and as a result have a significant performance impact.

P.S. I still owe you an example using that font.

 

What can I do to reduce that impact?

I don't understood your P.S.

Thank you for your reply.

 

Nothing really as those FX are designed that way.

I wanted to create an example of that visual style / FX using TextMesh Pro just to see how close I could get to matching it. It is good testing



For this example, I created a font asset using the font (ttf) you referenced. The same font asset is used in these 4 examples where I simply have different material presets assigned to the text objects. The first (top) is plain text without any material tweaks. The second uses a material with an outline. The third has a material with a soft shadow and the last one using beveling and soft shadow. In all 4 cases, the geometry is the same which is 2 triangles per character.

The blur effect could be done by using an Environmental map on the text object.

 

That last visual effect with the highlight looks very nice.

 

Can those characters still be animated like in this example you posted before?

 

can you recommend anything to read - how to write shaders for UI elements like Text ?

 

Yes. The visual style of the previous example of text is just done by adjusting the material properties whereas these dangling letters are achieved by simply adjusting vertex positions using an extra script. In this example the position of the vertices if offset to the top middle before applying a matrix rotation to create the dangling FX. See the following video which in the explains how these types of things are done.

In order to do these types of things you'll need to learn about shaders but also about Signed Distance Field which is what makes doing these types of visual fx possible. Instead of using a bitmap to represent the shape of individual characters, this data is encoded into a texture using Signed Distance Field.

There is lots of information on the internet about Signed Distance Field which is what TextMesh Pro uses to render the text but not really any resources in the context of how to write shaders for text leveraging signed distance field in Unity.

The whole Signed Distance Field thing has been used in the medical field for decades but Valve was the first company to use it in the context of text rendering for games. Here is a link to their white paper.

The shaders certainly play a significant role in TextMesh Pro but the layout engine with improved text formatting capabilities is as significant. Then the overall performance is key as well as it also matches or out performs Ui.Text in all aspects while providing much greater functionality.

 

Is there a source code of the original UI.Text renderer shader? That would be a good start coz all I want is to write a frag shader effect. I'd just modify a standard UI.Text renderer shader but I cant find it.

 

When you go to the Unity Download section, there is the pull down for Additional Downloads. In there you will find the built-in shaders.

 

thank you. i downloaded them. do you know which one is responsible for ui.text rendering ?
i found UI-Unlit-Text.shader and UI-Unlit-TextDetail.shader . Can I just modify them and add to the UI.Text Element? or there's some more magic ?)

 

You would create your own Shader based on any of the Unity shaders and then create a new material to which you would assign your shader. You would then assign the material to the text object.

 

yea. this i know. i just was wondering are these shaders are the right ones to modify to make text effect or not.

 

also, in the source code , there's not vert/frag parts. can i just add them? unity shaders are sometimes confusing)

 

ok, i made it work. i found out that i have to modify UI-Default.shader.
but it seems like it modifies each character separately.
How can I make the whole text effect?
Which shader is responsible for that ?
Maybe I can start with modifying Text Shadow Effect? but I can't find a shader for that :<