Text with outline

[Dreeka]

Hello,

I am looking for a way to create GUI text with outlines. While searching, I have found the following method:

public static function DrawOutline(position : Rect, text : String, style : GUIStyle, outColor : Color, inColor : Color){
	var backupStyle = style;
	style.normal.textColor = outColor;
	position.x--;
	GUI.Label(position, text, style);
	position.x +=2;
	GUI.Label(position, text, style);
	position.x--;
	position.y--;
	GUI.Label(position, text, style);
	position.y +=2;
	GUI.Label(position, text, style);
	position.y--;
	style.normal.textColor = inColor;
	GUI.Label(position, text, style);
	style = backupStyle;
}

It works well on smaller text, but my text size is raging between 22 and 56, and I dont know how to change the code to work with those size’s aswell.

Can someone help me to undersand the code, so I can make a function from it?

Thanks!

[BerggreenDK]

First of all, it IS ALREADY a function, but I guess you want to know how to use it then?

Try something like:

   // this first part initializes what font, size etc you want to use. 
   // Read Script reference on how to use GUIStyle.
   gsText: GUIstyle = new GUIStyle();

   // then the actual function is called.
   // 1st parameter is the Rectangle of where to put / generate/ 
   // show the text on the screen. You have Screen.width and Screen.height
   // if you need to align to sides or center.

   // 2nd parameter is the actual text you want to show 

   // 3rd is GUIStyle which is the stylesheet for your text. 
   // Including alignment, font-size, padding etc.

   DrawOutline ( Rect(10,10,200,30, "Hello World", gsText);

The function does it like this:

First we have a “center”, then we go north west of this (-1,-1) and plot the first version (black outline?)

Then it moves +2 on either direction. Lets take east, then plot once more.

Then move +2 south, plot again

Then move -2 west again. Now we are in the bottom corner. Plot last part of 4 corners of the outline/shadow.

Finally. Move into center. +1,+1 and plot in “white” ontop of the other 4. Then we have a text surrounded by 4 other texts that are “outlining” the inner text.
Hench the two variable names for textcolors: in/out

[Praesidium]

void DrawOutline(Rect r,string t,int strength,GUIStyle style){
GUI.color=new Color(0,0,0,1);
int i;
for (i=-strength;i<=strength;i++){
GUI.Label(new Rect(r.x-strength,r.y+i,r.width,r.height),t,style);
GUI.Label(new Rect(r.x+strength,r.y+i,r.width,r.height),t,style);
}for (i=-strength+1;i<=strength-1;i++){
GUI.Label(new Rect(r.x+i,r.y-strength,r.width,r.height),t,style);
GUI.Label(new Rect(r.x+i,r.y+strength,r.width,r.height),t,style);
}
GUI.color=new Color(1,1,1,1);
}

There u go ,an outline function with width. Even though the draw calls get higher the bigger the outline, at least it only draws (width*2)+((width-2)*2) times.

[nateonguitar]

The previous answers only work for smaller fonts and borders (except for Praesidium’s, that answer’s code is just not very easy to understand). This method is a little less performant than the simpler answers but will get you the border you want. It should be commented so you understand what’s going on.

void OnGUI()
{
        drawScore(score);
    }
}

public void drawScore(int score)
{
    Rect scoreRect = new Rect(10, 10, 300, 100);
    if (score > 0)
    {
        GUIStyle style = new GUIStyle();
        int borderWidth = 15;

        style.fontSize = 150;
        style.fontStyle = FontStyle.Bold;
        DrawTextWithOutline(scoreRect, score.ToString(), style, Color.black, Color.white, borderWidth);
    }
}

void DrawTextWithOutline(Rect centerRect, string text, GUIStyle style, Color borderColor, Color innerColor, int borderWidth)
{
    // assign the border color
    style.normal.textColor = borderColor;

    // draw an outline color copy to the left and up from original
    Rect modRect = centerRect;
    modRect.x -= borderWidth;
    modRect.y -= borderWidth;
    GUI.Label(modRect, text, style);

        
    // stamp copies from the top left corner to the top right corner
    while(modRect.x <= centerRect.x + borderWidth)
    {
        modRect.x++;
        GUI.Label(modRect, text, style);
    }

    // stamp copies from the top right corner to the bottom right corner
    while (modRect.y <= centerRect.y + borderWidth)
    {
        modRect.y++;
        GUI.Label(modRect, text, style);
    }

    // stamp copies from the bottom right corner to the bottom left corner
    while (modRect.x >= centerRect.x - borderWidth)
    {
        modRect.x--;
        GUI.Label(modRect, text, style);
    }

    // stamp copies from the bottom left corner to the top left corner
    while (modRect.y >= centerRect.y - borderWidth)
    {
        modRect.y--;
        GUI.Label(modRect, text, style);
    }
        
    // draw the inner color version in the center
    style.normal.textColor = innerColor;
    GUI.Label(centerRect, text, style);
}

This stamping motion can be modified for better performance if you know your font widths will be wider by changing all of the increments to += someNumber, like so:

. . . . . .
    // stamp copies from the top left corner to the top right corner
    while(modRect.x <= centerRect.x + borderWidth)
    {
        modRect.x += 2;
        if(modRect.x > centerRect.x + borderWidth){
            modRect.x = centerRect.x + borderWidth;
        }
        GUI.Label(modRect, text, style);
    }
. . . . . .

but smaller font widths will break this as it skips pixels.