Posts Tagged ‘GUIStyle’

Working With Fonts In Unity3D

2 Comments »

OK, so you’re sick of the default font in Unity3D and want to use something different in your game? How do you go about using fonts in a script with C#? How do you change the font colour? How do you make it bold and change the font size? I recently came across this issue when trying to output scrolling text above the head of my game’s protagonist.

I was hoping for a simple way of creating a font, something like:

new Font(“Arial”, 16, FontStyle.Bold, Color.Red);

It turned out to be a surprisingly convoluted process involving importing a True-Type Font file (*.ttf) in to the editor and loading it as a resource before assigning it to a GUIText component.

1. Importing a True Type Font in to Unity3D

This is the easy bit. Simply create a sub-folder in “Resources” for storing your fonts (i.e. “Resources/Fonts”). You then drag a TTF file from your computer in to this folder and Unity will automatically import it for you. You can get free TTF files online and also from your PC (e.g. C:\Windows\Fonts).

Say you click and drag the “Broadway.ttf” file in to the “Fonts” folder you created in Unity. Once you have a font file imported in to Unity you can load it in a C# script as follows:

Font BroadwayFont = (Font)Resources.Load("Fonts/Broadway");

2. Using the Font with GameObject and GUIText

The first thing to realise here is that although you can now associate your font with a GUIText object, you must associate the GUIText object with a GameObject (or derived subclass). This makes sense when you think about it. Everything in Unity is derived from a GameObject. A GameObject contains the transformation information etc. GUIText is actually a component of GameObject and is instantiated as in the following code:

// Create an instance of GameObject for the text
GameObject TextObject = new GameObject();
 
// Add a GUIText component to the above GameObject (cast in to GUIText
// reference)
GUIText GText = (GUIText)TextObject.AddComponent(typeof(GUIText));

You can then associate the font and set other parameters of the GUIText accordingly:

// Set text, font and default properties of the text item
GText.text = "Test Text!";
GText.font = BroadwayFont;
GText.material.color = Color.white;
GText.transform.position = Vector3.zero;

3. Changing the Font Size, Color and Style

Assuming your GUIText component is set up as above, you can then change the font size, color and style (i.e. bold, italic or both) through a C# script too. It is simply a case of changing the properties in the GUIText component:

// Change the font size to 48 points
GText.fontSize = 48;
 
// Make the font bold
GText.fontStyle = FontStyle.Bold;
 
// Change the font color to Green
GText.material.color = Color.Green;

4. Setting the Position of the Text

Finally the position of the text would usually be set in screen space (i.e. on the X and Y axis). Unity uses normalised screen space coordinates where the top-left is (0,0) and the bottom-right is (1,1). Say your screen resolution is 800×600 and you want to put some text starting at the centre of the screen (i.e. at position (400,300))? The positions would be calculated as follows:

XPos = 400.0f / Screen.width;  // 0.5f
YPos = 300.0f / Screen.height; // Also 0.5f

And you set the position as follows:

GText.transform.position = new Vector3(XPos, YPos, 0.0f);

5. Calculating the Text Width and Height

How can you calculate the text width and height using your font? GUIStyle comes to the rescue here with it’s CalcSize() method. You have to instantiate a GUIStyle object, set the appropriate Font, Size and FontStyle parameters and then call CalcSize() as per below:

GUIStyle GStyle = new GUIStyle();
 
// Set the relevant style parameters for calculating size
GStyle.font = BroadwayFont;
GStyle.fontSize = GText.fontSize;
GStyle.fontStyle = GText.fontStyle;
 
// Calculate the text width and height
float TextWidth = GStyle.CalcSize(new GUIContent(GText.text)).x;
float TextHeight = GStyle.CalcSize(new GUIContent(GText.text)).y;

Linked below is a class I wrote called CTextItem. It is a wrapper class around a GameObject with GUIText component and has methods for adjusting text, color, font size, style and position. The position can be set in screen space or world space (for example if you wish to make text appear above an object’s head in your game world). It assumes you know how it import TTF files in to your project and load a font resource as per above. I hope you find it useful.

CTextItem