Search Unity

  1. All Pro and Enterprise subscribers: find helpful & inspiring creative, tech, and business know-how in the new Unity Success Hub. Sign in to stay up to date.
    Dismiss Notice
  2. Dismiss Notice

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

Discussion in 'Immediate Mode GUI (IMGUI)' started by theBrandonWu, Jul 11, 2010.

  1. theBrandonWu

    theBrandonWu

    Joined:
    Sep 3, 2009
    Posts:
    244
    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/

    ---------
    $Screen-shot-2010-07-10-at-4.28.09-PM.png
    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.
    $Screen-shot-2010-07-10-at-1.35.37-PM.png

    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.

    $Screen-shot-2010-07-10-at-3.32.58-PM.png

    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.

    $Screen-shot-2010-07-10-at-3.37.51-PM.png

    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.

    $Screen-shot-2010-07-10-at-3.42.46-PM.png

    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
     
    Last edited: Feb 14, 2014
  2. Enygma_6

    Enygma_6

    Joined:
    Jul 11, 2010
    Posts:
    3
    Excellent, I was just looking for how to do this. Thanks for the tips!
     
  3. theBrandonWu

    theBrandonWu

    Joined:
    Sep 3, 2009
    Posts:
    244
    No problem! Hope it works well for you. :)
     
  4. Artimese

    Artimese

    Joined:
    Nov 22, 2009
    Posts:
    794
    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?
     
  5. theBrandonWu

    theBrandonWu

    Joined:
    Sep 3, 2009
    Posts:
    244
    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.
     
  6. Artimese

    Artimese

    Joined:
    Nov 22, 2009
    Posts:
    794
    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?
     
  7. theBrandonWu

    theBrandonWu

    Joined:
    Sep 3, 2009
    Posts:
    244
  8. April

    April

    Joined:
    Dec 14, 2009
    Posts:
    62
    thanks a lot, plinan. your post really helped
     
  9. OutCyder

    OutCyder

    Joined:
    Mar 19, 2009
    Posts:
    2,184
    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!
     
  10. OutCyder

    OutCyder

    Joined:
    Mar 19, 2009
    Posts:
    2,184
    Anybody has got any idea on how to come up with this?
     
  11. chicknstu

    chicknstu

    Joined:
    May 4, 2010
    Posts:
    11
    Seconded, the script doesn't seem to work any more, because the texture can no longer be made readable through the importer, it seems.
     
  12. NRDP

    NRDP

    Joined:
    Nov 22, 2012
    Posts:
    2
    Ty 4 helpin me w/ guiText color :D
     
unityunity