koobas.hobune.stream
Text with outline
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!
Is the problem that the borders are too small when the font-size grows? If so, could shift by fontSize/12 ins$$anonymous$$d of always 1 and 2.
that example generates 5 GUI elements pr. text. Thats how it was done with old HT$$anonymous$$L and CSS, but I am not sure this is the best approach in a realtime environment as Unity. You can provide your own FONTS too.
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
But if width of outline is get high, with the code above won't make outline text. That is not outline.
So, could you tell me how to handle it with outline's width? Help.
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.
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.
