Search Unity

Highscore table with GUILayout ?

Discussion in 'Immediate Mode GUI (IMGUI)' started by Tom163, Dec 22, 2007.

  1. Tom163

    Tom163

    Joined:
    Nov 30, 2007
    Posts:
    1,290
    I'd like a nice highscore-table, but I can't find a way to do it well.

    Basically, I get data from WWW with the highscores, so it's a long string:

    Someone \t score \t date \n
    Someonelse \t score \t date \n

    and so on.

    What's the best way to put this into a nice table? I've tried a few, but before wasting any more time, I thought I'd ask because I'm sure someone else has solved this already.
     
  2. shaun

    shaun

    Joined:
    Mar 23, 2007
    Posts:
    728
    This is what compound controls are for - they're not anything physical in Unity, but just the concept of grouping a GUI control configuration into a static method that you can reuse.

    I suggest you create a RowItem method composed of GUILayout labels and textboxes, you can have an 'editable' switch for each RowItem that will turn the labels into textfields and that can be used for new highscore entry.
    (something like: if(isEditable){Show the TextField row}else{Show the Label row})
    Then create a basic table with headers, and fill it with your RowItem by enumerating the array of highscores.

    Here's and example of a custom progress bar compound control in C#:
    Code (csharp):
    1. public static void ctrProgressBar(float left, float top, float width, float completed)
    2.     {
    3.  
    4.         GUI.Label(new Rect(left, top, width, 29), "", GUI.skin.GetStyle("progressbar"));
    5.  
    6.         if (completed > 0.0f) GUI.Label(new Rect(left, top, (((width - 23) / 100) * completed) + 23, 29), "", GUI.skin.GetStyle("progressbarthumb"));
    7.     }
    And here's how I use the code (cllUIControls is my class containing the static method):
    Code (csharp):
    1. cllUIControls.ctrProgressBar(30, 110, 253, PercentComplete);
    Below is the resulting GUI - a progress message box.
     

    Attached Files:

  3. Tom163

    Tom163

    Joined:
    Nov 30, 2007
    Posts:
    1,290
    So in other words, I have to create GUILayout.Table() myself, essentially?
     
  4. shaun

    shaun

    Joined:
    Mar 23, 2007
    Posts:
    728
    Correct :)
     
  5. DaveyJJ

    DaveyJJ

    Joined:
    Mar 24, 2005
    Posts:
    1,558
    You could always also simply use three GUI text boxes (I'm assuming something like name, level, score) and simply align them in your view and then return out of your DB only the name row in the first one, only the level row in the second, and the score row into the third. It'll look like one if you make transparent backgrounds but be in three containers. Believe me, I'd love to be able to return high scores into a simple HTML table.
     
  6. Tom163

    Tom163

    Joined:
    Nov 30, 2007
    Posts:
    1,290
    Here's my current solution. If anyone wants to take it and improve it, please do:

    Code (csharp):
    1.  
    2. function ScoreTable(Scores) {
    3.     var win=Screen.width*0.6;
    4.     var w1=win*0.35; var w2=win*0.15; var w3=win*0.35;
    5.     for (var line in Scores.Split("\n"[0])) {
    6.         fields = line.Split("\t"[0]);
    7.         if (fields.length>=3) {
    8.             GUILayout.BeginHorizontal();
    9.             GUILayout.Label(fields[0], GUILayout.Width(w1));
    10.             GUILayout.Label(fields[1], GUILayout.Width(w2));
    11.             GUILayout.Label(fields[2], GUILayout.Width(w3));
    12.             GUILayout.EndHorizontal();                     
    13.         }
    14.     }
    15. }
    16.  
     
    megabrobro likes this.