Unity 3D does not have a visual GUI editor at the moment, so it isn’t always obvious how to do simple things like changing the font and adjusting font size. Here’s a quick note of how to get these basics done to get you started with in-game text!
1. How do I change the font size for the text for guiText objects?
Go to Project view and find the font you are using. There you can find the setting for font size in the “import setting”. If you are using Unity iPhone, right click on the font to find “import setting”. If you need multiple font sizes, you can duplicate the font and have different import setting on each.
Alternatively you can disable “Pixel Correct” on the GUIText object itself and adjust the scale. However the text might get blurry this way so I don’t recommend it.
2. How do I change the color of the text for guiText objects?
You change the color of the text by changing the color of its “material”. You can find the option in the Project view with your Font.
However if you change this color here, it will apply to all the GUIText object with this font. What if you want different GUIText objects to have different colors? I created a short script that can be attached to the GUIText object to change the color at run time. You can attach this script on your GUIText objects and select the color you want in the Inspector view when you select the GUIText object.
The script is simple, see below:
//this script changes the guiText color of the object and should be attached to an guiText object
//from
http://www.plinan.com
var TextColor : Color = Color.white; // define the color for this guiText object
function Start () {
guiText.material.color = TextColor;
}
3. How do I add an outline or shadow to my text with guiText?
This is a bit more complicated. I use two methods in the game to create shadows and both require a little bit of work.
The first method is to create a duplicate of the same guiText (with the same text but a darker color) and move it 1 pixel to the right and 1 pixel to the bottom of the original guiText object to create a shadow effect. Make sure the duplicate is behind the original object. (You can change the
renderQueue (
more info) of your objects to make sure the original is in front of the duplicate. ) If you want to create a border instead of a shadow around the text, use the same method, create two duplicates, and place them behind the original slightly offset to create a border.
This is what it looks like.
This is a simple solution. However it has its problems. I need a way to display moving text, and the text doesn’t look very good with this method as the two objects don’t always move at the exact same time. So I had to find another way to create shadows for the text.
The basic idea is to
1. Export the Font Texture
2. Edit the Texture so that it has your desired effects (outline, shadow, or any other effects) with Photoshop or
Gimp3. Create a Material with the new Texture you’ve created
4. Use the Material together with the
TexturedFont shader on the guiText object.
Here’s the instruction from the wiki:
Description
If you’ve ever wanted to get at the auto-generated font bitmap that Unity creates when importing vector fonts, now’s your chance. SaveFontTexture saves that bitmap as a .png file so you can edit it, add whatever whizbang effects you want to it, and then use it as a colored font, using the TexturedFont shader and a GUIText object.
Script Setup
You must place the script in a folder named Editor in your project’s Assets folder for it to work properly. When this is done, you will then have a Save Font Texture menu item in the Assets menu. Find the TrueType font you want in Unity and open the root, which reveals the auto-generated material and texture. Click once on the texture (called “font Texture”) and select the Save Font Texture menu item. Choose a file name and location in the file dialog, and hit save. (Technically this script will work for any texture in Alpha8 format, if for some reason you wanted to save it as a .png file.)
Customizing and Using Font Textures
1. Get the TrueType font that you want to modify in Unity at the desired Font Size (so that you can use Pixel Correct in the GUI_Text object that will use it for crisp rendering).
2. Use this script (installed as described above) to save the texture Unity generates automatically for the font.
3. Edit that texture file in Photoshop to use in your project.
4. Create a new Material in Unity.
5. Set the texture of the material to the modified texture.
6. Set the shader of the material to the TexturedFont Shader.
7. In any scene GUI_Text objects that will use the custom font, apply the original font to the object then change its material to the custom material created in steps 4-6.
Again, it looks like this in my game. I applied a small shadow to the text so it’s hard to see but it looks very different from text without the shadow.
Without shadow:
With shadow:
It helps to make the text more readable.
By the way, if you are looking for fonts to use, I found a few at
MyFont.com. They also have free fonts that can be used for commercial purposes.
I think that’s all I have to say about guiText for now. Cheers!
