GUILayout.Label - WordWrap and FontSize issue.

Question

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 );
 }

Answer 1

Best Answer

Answer by Jason B · Jan 07, 2011 at 09:01 PM

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.

Add comment · Show 2 · Share

Berenger · Jan 07, 2011 at 11:03 PM 0

Share

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 !

Berenger · Jan 07, 2011 at 11:18 PM 0

Share

Ok it works fine, thanks a lot !

Answer 2

Answer by Waz · Oct 07, 2011 at 10:28 PM

Pixels answer here seems a better workaround for what is obviously a Unity bug. i.e. explicitly set the font size too.

Add comment · Share

GUILayout.Label - WordWrap and FontSize issue.

2 Replies

Your answer

Welcome to Unity Answers

Follow this Question

Related Questions