Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Outlined Text

Discussion in 'Immediate Mode GUI (IMGUI)' started by pgartside, Mar 16, 2010.

  1. pgartside

    pgartside

    Joined:
    Feb 15, 2010
    Posts:
    7
    Is it possible to get outlined text in Unity?
     
  2. cerebrate

    cerebrate

    Joined:
    Jan 8, 2010
    Posts:
    261
    Yeah, this question has been posted before. Just draw the text five times, offset by one pixel, and in a different color. I made a helper script that does this for me:

    Code (csharp):
    1.  
    2. //EGUI.js
    3. //draw text of style color, with a specified outline color
    4. public static function DrawOutline(position : Rect, text : String, style : GUIStyle, outColor : Color){
    5.     var backupStyle = style;
    6.     var oldColor = style.normal.textColor;
    7.     style.normal.textColor = outColor;
    8.     position.x--;
    9.     GUI.Label(position, text, style);
    10.     position.x +=2;
    11.     GUI.Label(position, text, style);
    12.     position.x--;
    13.     position.y--;
    14.     GUI.Label(position, text, style);
    15.     position.y +=2;
    16.     GUI.Label(position, text, style);
    17.     position.y--;
    18.     style.normal.textColor = oldColor;
    19.     GUI.Label(position, text, style);
    20.     style = backupStyle;   
    21. }
    22.  
    23. //draw text of a specified color, with a specified outline color
    24. public static function DrawOutline(position : Rect, text : String, style : GUIStyle, outColor : Color, inColor : Color){
    25.     var backupStyle = style;
    26.     style.normal.textColor = outColor;
    27.     position.x--;
    28.     GUI.Label(position, text, style);
    29.     position.x +=2;
    30.     GUI.Label(position, text, style);
    31.     position.x--;
    32.     position.y--;
    33.     GUI.Label(position, text, style);
    34.     position.y +=2;
    35.     GUI.Label(position, text, style);
    36.     position.y--;
    37.     style.normal.textColor = inColor;
    38.     GUI.Label(position, text, style);
    39.     style = backupStyle;
    40. }
    example use:
    Code (csharp):
    1.  
    2. //draws the word 'laser' at 5 pixels in, 103 pixels up from bottom. Text area is 50 pixels wide, 25 pixels tall
    3. //in white, with a black outline
    4. EGUI.DrawOutline(Rect (5, Screen.Height - 103, 50, 25), "Laser", skin.GetStyle("medium"), Color.black, Color.white);
    5.  
    result looks like this:

    It looks even better with larger fonts actually.
     
  3. pgartside

    pgartside

    Joined:
    Feb 15, 2010
    Posts:
    7
    Cheers for that :)
     
  4. Ony

    Ony

    Joined:
    Apr 26, 2009
    Posts:
    1,977
    Another way you could do it without so many label calls would be to use the "Save Font" script from the wiki and edit your font in Photoshop to have an outline. This way you can do font gradients, colors, outlines, all kinds of cool stuff.
     
  5. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,401
    That doesn't work with OnGUI though, only GUIText (and 3D text).

    --Eric
     
  6. Ony

    Ony

    Joined:
    Apr 26, 2009
    Posts:
    1,977
    Ah, good point, so yeah if you need it in an OnGUI then the other way works. :)
     
    dpw likes this.
  7. SoundGuy32

    SoundGuy32

    Joined:
    Oct 30, 2009
    Posts:
    17
    1. any ideas on how would i go about to use outlines fonts with GUILayout.Label() funcions?
    2. alternatively is there any way to make the guiskin use the modified PNG texture like is the savefont example?
     
  8. theBrandonWu

    theBrandonWu

    Joined:
    Sep 3, 2009
    Posts:
    244
    Last edited: Mar 13, 2012