Typogenic Documentation

Introduction

Typogenic is a new high quality and high performances 3D font rendering system for Unity. It's based on a technique called "signed-distance field rendering" used in Team Fortress 2 and documented in this Valve paper.

Requirements

Typogenic requires Unity 4.3+ and works with the free version. It works on desktop as well as mobile platforms.

The shaders included make use of Shader Model 3.0 features : NVIDIA cards since 2004 (GeForce 6), AMD cards since 2005 (Radeon X1300), Intel cards since 2006 (GMA X3000), OpenGL ES 2.0, Xbox 360, PS3.

Usage

Creating a New Font

At the moment, creating a font with Typogenic is a two steps process : generating the font data and importing it into Unity.

To generate the font data you'll need to use a free external tool called Littera. No installation is needed, it works in the browser assuming you have Flash enabled.

Let's start with the global settings :

Make sure the Format is set to XML and Round Values is disabled or you'll get precision errors. The default Padding value of 2 is good, don't go any lower to avoid texture bleeding.

Size settings are up to you but it's always a good idea to work with Power of 2 textures, specially if one of your target is a mobile device.

On to the font settings :

These are the only three panels you'll need to generate the font. Good all-around settings :

Although these settings generally give good results with most typefaces, they might not work in every case scenario. See the Tips & Tricks section.

Forget about Letter Spacing for now, it can be changed dynamically via Typogenic in Unity3D.
Keep the background transparent !

Depending on your computer speed, Littera will take a few seconds to generate the font (a progress bar can be seen in the bottom right corner). Once it's done, Export it. Littera outputs a .zip file containing both .fnt and .png files. Copy these two into your Unity project.

Assuming you've already imported the Typogenic package into Unity, go to Assets -> Create -> Typogenic Font to open the font wizard.

Drag the font texture from the project panel into Atlas and the .fnt file into Font XML and click the Create. By default, the wizard will automatically create a material and change the import settings for the font texture. You can choose to disable both these options.

Your font is ready to use !

Back to top

Text Component

To put a new text object on the scene, go to Game Object -> Create Other -> Typogenic Text. Drag the font material onto the object and add the font asset file generated by the wizard into the Font field of the Typogenic Text component.

Most of the settings are self-explanatory. To enable word wrapping, set Word Wrap to the desired width. A visual indicator will appear in the scene view to give you an idea about where the text will wrap. Set it to 0 or less to disable it.

Using the Fill Mode you can add a horizontal, vertical or quad gradient to every character or use a texturing method (don't forget to use a textured material).

All the settings in this component are, of course, available via scripting as well.

If you don't need lighting on your text, disable Generate Normals to save some memory at runtime.

If you don't need Click Support, disable it to improve performances. If you need click support and your text object isn't going to be moved/rotated around the scene, make sure Static is checked to avoid unnecessary bounds calculations.

Back to top

Font Materials

Typogenic comes with a few shaders : lit, unlit, texture & shadow caster variants. By default, the font wizard generates an unlit untextured material but you can swap it to another shader depending on your needs. Make sure you set Generate Normals on every Typogenic Text that makes use of one the lit shaders.

The Smoothness parameter allows you to sharpen or slightly blur the text borders. A value between 0.85 and 1.0 should give the best result.

Thickness controls the font weight to make the text bolder or thinner, up to a certain point.

You can also enable Outlines and control their Thickness and Color. The Thickness parameter will be limited by the spread amount used in the Distance Field panel of Littera. You can offset the Outlines by playing with both Thickness values.

Like the outlines, the Glow spread will be limited by the spread amount used in the Distance Field panel of Littera.

The Global Color Multiplier can be used to quickly change the text color or alpha without rebuilding the mesh, which can be useful to do quick animated color or fade effects. It applies to the outlines as well, if any. Set it to full-white full-opaque to disable it.

If you chose a textured Fill Mode make sure you switch to a textured shader. It will add a Fill Texture field to the material which works the same way any other textured material does in Unity.

When working with a shadow casting material you'll also get the ability to adjust the shadow cutoff. The default value should be fine but you can tweak it to get thinner or larger shadows.

Back to top

Mixed Materials

You can mix up to nine materials within the same text component using a simple formatting trick.

Assign a bunch of materials into the Materials array of your Mesh Renderer component. Keep track of each material index in the list (Element 0, Element 1, etc) and use them with an back-slash to activate them where you need them. Like so :

\0Nice \1and \2colorful !

Assuming material 0 is red, 1 is green and 2 is blue, it will display a red, green and blue line of text.

Back to top

Scripting Support

Typogenic comes with a full public interface to interact with the component at runtime.

Unless you set AutoRebuild to false the component will automatically detect any change in the text settings and rebuild the mesh at the end of the frame.

var component = GetComponent<TypogenicText>();
component.Text = "Lorem ipsum";
component.Size = 24f;

You also set most of the settings in one-go using the Set() method with named parameters :

var component = GetComponent<TypogenicText>();
component.Set(
  text: "Lorem Ipsum",
  alignement: TTextAlignment.Center,
  size: 24f
);

Take a look at the TypogenicText.cs file for a list of public methods and properties, or use your favorite IDE with auto-completion.

If your text is static or rarely changed it's recommended to set AutoRebuild to false so the component doesn't have to keep track of its current state and call RebuildMesh() when you need it.
About the colors, TypogenicText comes with four color fields which are used in the following ways depending on which TFillMore you choose :

  • Single : ColorTopLeft.
  • Vertical Gradient : ColorTopLeft & ColorBottomLeft.
  • Horizontal Gradient : ColorTopLeft & ColorTopRight.
  • QuadGradient : All four fields.

Back to top

Interactivity

Typogenic lets you detect individual character clicks. To do so, make sure your text has a collider (a simple box is fine, no need for a complex mesh collider). Typogenic will then broadcast a OnGlyphClicked message along with a TypogenicGlyphClickEvent.

using UnityEngine;

public class ClickHandler : MonoBehaviour
{
	void OnGlyphClicked(TypogenicGlyphClickEvent e)
	{
		Debug.Log(string.Format(
			"Clicked {0} at character index {1}",
			e.source.name,
			e.index
		));
	}
}

Once you've got the character index you can easily extract which character, word or line has been clicked. See Demo 9 and ClickHandler.cs in the /Typogenic/Demo folder for a more complete example.

Back to top

Tips & Tricks

Back to top

Contact & Support

If you have any questions or feedback, you can contact me at :

Quick links :