koobas.hobune.stream
GUILayout.Label - WordWrap and FontSize issue.
Hi,
I'm trying to implement a popup code for my game (something like right clic an item, you get its stats). The idea is a script with a list of stuff to display, like a texte, an image etc.
The problem is with the text. I want to be able to choose the fontSize to have titles, and at the same time I need the words to wrap. I don't know why, but those things don't work together; When I use wordWrap = true, all entries are the same size ! I take the part of the code with the problem, so you can test it easily :
//PopUp.js //This class is a displayable element used by Popup class. It just display a text, with specific font size and color. class PopUpText { private var txt : String; private var police : int; private var color : Color; private var style : GUIStyle;
function PopUpText( s : String, p : int, c : Color, st : GUIStyle ){ txt = s; police = p; color = c; style = st; }
function Display()
{
var save_police = style.fontSize;
var save_color = style.normal.textColor;
style.fontSize = police;
style.normal.textColor = color;
GUILayout.Label( txt, style );
style.fontSize = save_police;
style.normal.textColor = save_color;
}
}
// This script contain severals elements that can be displayed one after the other. class PopUp extends MonoBehaviour { var w : int = 100; // The width of the area var h : int = 500; // The height of the area
var useFlexibleSpace = false; // Should I use a flexibleSpace at the end of the entries ?
var wordWrap = false; // Should I use wordWrap ?
private var elements : PopUpText[];
private var style : GUIStyle = new GUIStyle();
function OnGUI()
{
style.wordWrap = wordWrap;
var R : Rect = Rect( 0, 0, w, h );
GUI.Box( R, "" ); // Background
//Display all elements
GUILayout.BeginArea( R );
for( var E in elements )
E.Display();
if( useFlexibleSpace)
GUILayout.FlexibleSpace();
GUILayout.EndArea();
}
// Set up, so you can test it quickly
function Start()
{
elements = new PopUpText[4];
elements[0] = new PopUpText( "First entry", 25, Color.yellow, style );
elements[1] = new PopUpText( "Je crois que c'est vraiment le mode de vie V. Ca va tre trs intressant de voir les diffrentes dynamiques entre Lisa (Laura Vandervoort) et Erica (Elizabeth Mitchell), entre Anna et Lisa et entre Anna et sa mre. Cela va permettre de comparer diffrents exemples de maternit.", 15, Color.white, style );
elements[2] = new PopUpText( "Second entry", 25, Color.yellow, style );
elements[3] = new PopUpText( "Voici la recette de la Pte crpe que j'ai slectionn pour vous. Elle est simple raliser mme pour un dbutant en cuisine et prend peu de temps prparer. Pour vous aider j'ai essay d'tre le plus clair possible, en vous guidant tape par tape pour la prparation de vos crpes", 15, Color.white, style );
}
}
You might have accent problems, never mind the meaning of the text is not relevant (it's an interview of an actress of TV show "V", and a recipe ^^).
[ EDIT : Problem solved, the code below is fixed ]
So the problem was the shared GUIStyle. The proper way to do it seems to start from a root style for the font, aligment etc, then make a copy of it for each element so we can change the police individually. Here is the code, plus some parameters to play around with font size.
//PopUp.js //This class is a displayable element used by Popup class. It just display a text, with specific font size and color. class PopUpText { private var txt : String; private var police : int; private var color : Color; private var style : GUIStyle;
function PopUpText( s : String, p : int, c : Color, st : GUIStyle )
{
txt = s;
police = p;
color = c;
style = new GUIStyle( st ); //Copy, here is what solved the problem
}
function Display()
{
style.normal.textColor = color;
style.fontSize = police;
GUILayout.Label( txt, style );
}
function SetPolice( p : int ) { police = p; }
}
// This script contain severals elements that can be displayed one after the other. class PopUp extends MonoBehaviour { var areaRect : Rect = Rect( 0, 0, 200, 500 );
var font : Font;
var textSize0 : int = 25;
var textSize1 : int = 15;
var textSize2 : int = 25;
var textSize3 : int = 15;
private var elements : PopUpText[];
private var style : GUIStyle = new GUIStyle();
function OnGUI()
{
GUI.Box( areaRect, "" ); // Background
elements[0].SetPolice( textSize0 );
elements[1].SetPolice( textSize1 );
elements[2].SetPolice( textSize2 );
elements[3].SetPolice( textSize3 );
//Display all elements
GUILayout.BeginArea( areaRect );
for( var E in elements )
E.Display();
GUILayout.FlexibleSpace();
GUILayout.EndArea();
}
// Set up, so you can test it quickly
function Start()
{
style.font = font;
style.wordWrap = true;
elements = new PopUpText[4];
elements[0] = new PopUpText( "First entry", textSize0, Color.yellow, style );
elements[1] = new PopUpText( "Je crois que c'est vraiment le mode de vie V. Ca va tre trs intressant de voir les diffrentes dynamiques entre Lisa (Laura Vandervoort) et Erica (Elizabeth Mitchell), entre Anna et Lisa et entre Anna et sa mre. Cela va permettre de comparer diffrents exemples de maternit.", textSize1, Color.white, style );
elements[2] = new PopUpText( "Second entry", textSize2, Color.yellow, style );
elements[3] = new PopUpText( "Voici la recette de la Pte crpe que j'ai slectionn pour vous. Elle est simple raliser mme pour un dbutant en cuisine et prend peu de temps prparer. Pour vous aider j'ai essay d'tre le plus clair possible, en vous guidant tape par tape pour la prparation de vos crpes", textSize3, Color.white, style );
}
}
It seems that the problem of the fontSize came from the font. However, with an other (for instance, Time new roman), if the size of the font is ok, the size of the label displaying it don't follow, and the text is cropped (or over other label, if you use "overflow". Here is an image that show my point : http://img718.imageshack.us/i/labelissue.jpg/
Sorry if I'm misunderstanding, but you might want to consider splitting them up into 4 separate GUI panels, otherwise I'm pretty sure that putting varying text sizes in the same text box is bound to cause problems, like bigger text adhering to and getting cut off by the smallest sized text. To see what I mean, make your small text larger and I'm guessing you'll see that less of the large text gets cut off.
Yep, you might be right. The part part where I switch between fontSize seems to screw things up. I continue to look that, if anyone have a suggestion on the good way to do it, I'll be glad to take it !
Pixels answer here seems a better workaround for what is obviously a Unity bug. i.e. explicitly set the font size too.
