Text (guiText): Font Size, Color, Shadow, and Outline

Hi everyone,

It took me a while but I finally figured out how to make changes on my text with GUIText and add shadows to it. I posted a post on my blog about how to get it done and would like to share with everyone here on the forum.

Hope this helps!

from http://www.pepwuper.com/unity3d-for...changing-font-size-color-on-the-text-unity3d/

---------

After toying with a few different methods of creating in-game text, I decided to use guiText for it's simplicity and for all the GUI scripts you can use from Unity Wiki.

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:

Code (csharp):

1.  
2. //this script changes the guiText color of the object and should be attached to an guiText object
3.  
4. //from [url]http://www.plinan.com[/url]
5.  
6. var TextColor : Color = Color.white; // define the color for this guiText object
7.  
8. function Start () {
9.  
10.    guiText.material.color = TextColor;
11.  
12. }
13.  

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.

Fortunately Unity Wiki provided a solution to do this with these two scripts: SaveFontTexture and TexturedFont.

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 Gimp
3. 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:

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!

-Brandon Wu

 

Excellent, I was just looking for how to do this. Thanks for the tips!

 

No problem! Hope it works well for you.

 

I never knew that small script could change the gui color to any color you want, thanks a ton

And also, do you know a way to change the font size using a script? Just wondering if its possible?

 

resizing the text through "scale" in a script is possible, but scaled text doesn't usually look very sharp in the game. You can have fonts of different sizes and dynamically switch them in a script. I saw a script doing exactly that in the forum the other day. I'll post the link here if I find it.

 

Yeah thats what im trying to do, switching the fonts, but i just dont know how to actually code it, do you know how to do that?

 

try
http://www.unifycommunity.com/wiki/index.php?title=GuiRatioFixer2

and

http://forum.unity3d.com/viewtopic.php?t=6237&highlight=script+guitext+size

I haven't tried them before but they look promising

 

thanks a lot, plinan. your post really helped

 

This method does not seem to work anymore, because the font texture looks intrinsecally part of the font and can't be exported with that script.
If anyone has a workaround for this it would be nice to know, I would like to add an outline to my font. Thank you!

 

Anybody has got any idea on how to come up with this?

 

Seconded, the script doesn't seem to work any more, because the texture can no longer be made readable through the importer, it seems.

 

Ty 4 helpin me w/ guiText color