Unity 3D Game Engine – Custom Bitmap Fonts

Inside Unity3D When dealing with text in a project, there are 2 choices: GUIText and TextMeshes.

a. MAIN TOP MENU> GameObject> Create Other> GUIText is a HUD (head-up display) element drawn on top of everything else, it is a vector text.
It use only standard Fonts

b. MAIN TOP MENU> GameObject> Create Other> 3D Text is a real 3D Text with bitmaps mapped over some planes.
It can use custom bitmap fonts made with Photoshop

Create a Text Mesh and style it

1. MAIN TOP MENU> GameObject> Create Other> 3D Text
2. Inspector> Text Mesh> Text> use html tags, examples: 

This is <b>bold</b>
Nested <b>tags <i>are</i> aloowed</b> yeah!
We are <color=green>green</color> with envy
We are <size=50>largely</size> unaffected

Official docs at http://docs.unity3d.com/Manual/StyledText.html

Remove bad low res pixel effect

1. Creare Text Mesh with a large size: Score Text
2. Reduce it with Transform Tool

Import New Fonts

Unity 3D supports .ttf .dfont .otf files.

1. MAIN TOP MENU> Assets> Import New Asset…> YourTruetype.ttf, you will see the font into Project window
Unity 3D will create: – Font Name
– Font Material (color + texture)
– Font Texture (if you type a word, a bitmap texture of letters will be created here)

2. Hierarchy> select> your 3D Text> from Project DRAG AND DROP the font over Text Mesh> Font

Dynamic Fonts

1. Select the Font> Inspector> Character> Dynamic / Unicode / ASCII default set / ASCII lower case / ASCII upper case / Custom Set

When you set the Characters drop-down in the Import Settings to Dynamic, Unity will not pre-generate a texture with all font characters. Instead, it will use the FreeType font rendering engine to create the texture on the fly.

This has the advantage that it can save in download size and texture memory, especially when you are using a font which is commonly included in user systems, so you don’t have to include the font data, or when you need to support asian languages or large font sizes (which would make the font textures very large using normal font textures).

Convert Dynamic Fonts for iOS/Android

iOS/Android device does NOT support Dynamic font, which means you cannot adjust font’s size, style in TextMesh component or GUIText component.

1. MAIN TOP MENU> Assets> Import New Asset…> YourTruetype.ttf
Unity 3D will create: – Font Name
– Font Material (color + texture)
– Font Texture (if you type a word, a bitmap texture of letters will be created here)

2. Select Font Size: 32 -> maggiore è la dimensione del font, maggiore sarà la dimensione della texture finale del punto 3.
Font Name> Character> Unicode or ASCII

3. Select Font Texture> Unapplied Import Setting> ‘Apply’> it creates a texture 128x128px or over with ALL CHARACTERS, they are already packed.

4. Drag the font into TextMesh, 3D Text or GUIText component.
For TextMesh and 3D Text don’t forget to drag font material (you can find it when collapse font asset) into MeshRender.

5. In TextMesh, 3D Text or GUIText, set Font Size to 0, Font Style to Normal. The font size and style will be determined by the font asset.
Build to your device.

Official Docs at:

– http://docs.unity3d.com/Manual/class-Font.html

– http://wiki.etc.cmu.edu/unity3d/index.php/Unity_font_issue_on_iOS/Android

Create Custom TTF Fonts

You can create your own TTF Font using a software as ‘Font Forge’ at http://sourceforge.net/projects/fontforge/files/latest/download?source=files

Create an editable texture from Dynamic Fonts

1. MAIN TOP MENU> Assets> Import New Asset…> YourTruetype.ttf
Unity 3D will create: – Font Name
– Font Material (color + texture)
– Font Texture (if you type a word, a bitmap texture of letters will be created here)

2. Select Font Size: 32 -> maggiore è la dimensione del font, maggiore sarà la dimensione della texture finale del punto 3.
Font Name> Character> Unicode or ASCII

3. Select Font Name> Inspector> LMB over TOP RIGHT small gear icon> Create Editable Copy
It will create a bitmap font with:
– Font Name_copy -> con le coordinate di ritaglio delle singole lettere
– Font Material_copy -> il materiale
– Font Texture_copy -> png con la mappa alfa

4. Open your Project Folder/Assets/Texture_copy.png> open and edit it with Photoshop.
Now you can create Font_new_color.png, with color and alpha in the same file.
A working sample here:

Font_new_color.png

3D Text

5. MAIN TOP MENU> GameObject> Create Other> 3D Text

6. Hierarchy> 3D Text> Inspector
> Mesh Renderer> Materials> DRAG AND DROP Font Material_copy, è il materiale di mapping
> TextMesh> Font> DRAG AND DROP Font Name_copy, è la mappa di ritaglio in forma testuale per identificare le lettere

7. Project> Font Material_copy> Inspector> Shader: Unlit/Transparent -> Texture DRAG ANd DROP Font_new_color.png

8. :) DONE!!!!!!!!!!!!

GUI Text

5. MAIN TOP MENU> GameObject> Create Other> GUI Text

6. Hierarchy> GUI Text> Inspector
> Mesh Renderer> Font> DRAG AND DROP Font Name_copy

7. :) DONE!!!!!!!!!!!!

NOTICE that at the end YOU CAN NOT STYLE TEXT with:

This is <b>bold</b>
Nested <b>tags <i>are</i> aloowed</b> yeah!
We are <color=green>green</color> with envy
We are <size=50>largely</size> unaffected

Convert TTF Fonts to Bitmap Fonts

Bitmap fonts, which consist of a Texture atlas (atlante) containing all of the required letters from the font, and a text data file describing the location and size of each letter on that texture atlas.

Download the software ‘Hiero’ at https://code.google.com/p/libgdx/downloads/detail?name=hiero.jar

Open Hiero
1. Font> File> load your TTF
2. Rendering setup Page Width and Page Height
3. Padding
4. File> Export

The result will be 2 files:
1.myfont.fnt -> a text file with the atlas -> rename myfont.txt
2.myfont.png -> a bitmap image font -> edit with Photoshop if you want

Use Bitmap Fonts inside Unity 3D

1. MAIN TOP MENU> Assets> Import New Asset…> Import myfont.txt and myfont.png
2. Project Window> RMB> Create> Material, name it myfontBMP
3. Project Window> RMB> Create> Custom Font, name it myfontBMP
4. Select the Material> assign the texture myfont.png
5. Follow the instruction inside this tutorial: http://sysmagazine.com/posts/212587/

Creation of bitmap fonts in Unity is very uneasy :(
In my opinion there are a lot time-saving plugins inside the Asset Store to easily manage custom font…

Custom Fonts Plugins

Text Box
https://www.assetstore.unity3d.com/en/#!/content/2877

SpriteText / Custom Bitmap Fonts
https://www.assetstore.unity3d.com/en/#!/content/3095

Advance Text Animations Plugins

TextFX
It is a text animation plugin for the Unity 3D game engine.
It is really time saving, see in action at: http://www.codeimmunity.co.uk/TextFx/index.php