Adventures in Unity – 1.7d Highscores (Display)

Official_unity_logo

 

The backbone of the highscore system is in place – But theres still no method for the program to display highscores.

Neither of the two sources I’d used to far were able to help me here – The unify community code was more involved with the back-end of things & the YouTube guide [Unity Tutorial] Online Highscores 01 (dreamlo) only demonstrated a very basic method for displaying the top ten scores.

I’d intended to show the top fifty scores; which was clearly going to be too many to display all at the same time on a single screen. I figured the game needed the ability to list the highscores, and let the player scroll through them.

I thought this would be pretty easy to implement – unfortunately there’s currently not a lot of elements in Unity’s UI for handling this kind of thing – At least, not without putting in a lot of effort first.

Ultimately I was able to put something together, which I think does the job pretty well, but still isn’t quite as flexible as I’d liked.


 

Highscore display is made up of three main elements;

1. HighScorePanel prefab

HighscorePanel

This is a panel with three text components attached (position, Name, Score). Used to display the details of one highscore entry.

2. ScrollView component

HighscoreDisplay

This contains a list HighScorePanel objects & is used to display the top 50 scores.

3. HighScoreDisplay script

The meat of the highscore display process – This code requests highscore data and uses it to fill the scrollview component with the current data to display.

 


 

 

The HighScoreDisplay script,  run at startup, calls the function refreshHighScores, which every 30 seconds, (by way of the HighscoreController script), requests an updated list of highscore data;

    
IEnumerator refreshHighScores()
{
     while (true)
     {
          highScoreController.DownloadHighscores();
          yield return new WaitForSeconds(30);
     }
}

 

Once the HighscoreController refreshes the highscore list, it passes control back to the HighScoreDisplay script – By calling the OnHighScoresDownloaded function along with a list of all current highscores. OnHighScoresDownloaded uses the highscore data to populate the ScrollView with HighscorePanel prefabs, each of which containing one highscore entry;

 

public void OnHighScoresDownloaded(HighScore[] highScoreList)
{

     ClearList();

     for (int counter = 0; counter < highScoreList.Length; counter++)
     {

          //---

          GameObject go = Instantiate(hsPanel) as GameObject;
          go.transform.SetParent(hsContent.transform);
          go.transform.localScale = go.transform.localScale * canvas.scaleFactor;
          Text[] children = go.GetComponentsInChildren();
          children[0].text = (counter + 1).ToString();
          children[1].text = highScoreList[counter].userName;
          children[2].text = highScoreList[counter].score.ToString();

          //---

          if (counter == HighscoreController.lastHighScore)
          {

               string currentColour = "ff0000";

               children[0].text = "<color=#" + currentColour + ">" + children[0].text + "";
               children[1].text = "<color=#" + currentColour + ">" + children[1].text + "";
               children[2].text = "<color=#" + currentColour + ">" + children[2].text + "";

          }

     }

}

 

OnHighScoresDownloaded loops through each highscore entry, & for each it creates instance of a HighScorePanel prefab; adding the name, score and position in highscore to the prefabs attached Text components.

for (int counter = 0; counter < highScoreList.Length; counter++)
{

     //---

     GameObject go = Instantiate(hsPanel) as GameObject;
     go.transform.SetParent(hsContent.transform);
     go.transform.localScale = go.transform.localScale * canvas.scaleFactor;
     Text[] children = go.GetComponentsInChildren();
     children[0].text = (counter + 1).ToString();
     children[1].text = highScoreList[counter].userName;
     children[2].text = highScoreList[counter].score.ToString();

     //---
}

Setting the prefabs parent to the content component of the HighScorePanel component.
This attaches it to the scroll object allowing it to be displayed,

     go.transform.SetParent(hsContent.transform);

Also scaling the text, so that it will look approximately the same no matter what screen res is used;

     go.transform.localScale = go.transform.localScale * canvas.scaleFactor;

 

& Finally, If a new highscore has been achieved, after the new high score entry added the game displays the highscore table, highlighting the new entry by changing its colour;

 

if (counter == HighscoreController.lastHighScore)
{

     string currentColour = "ff0000";

     children[0].text = "<color=#" + currentColour + ">" + children[0].text + "";
     children[1].text = "<color=#" + currentColour + ">" + children[1].text + "";
     children[2].text = "<color=#" + currentColour + ">" + children[2].text + "";
}

 


 

Now I have a way display highscores list – But no method to allow players to add new highscores to the table.

 


 

Play this build (WebGL)

 


 

Grab a copy of the project here

 


 

 


 

Next post: 1.7e Highscores (Add)

Last post: Adventures in Unity – 1.7c Highscores (In-Game Backend)

Contents page.