Converting GUI script to UI

Questions & Answers
1

Hi everyone. Can someone help me Convert this scrip into UI? I already know the how to put UI in the unity, i just need this script. but its GUI… Please help

using UnityEngine;
     
    public class LeaderboardTestGUI : MonoBehaviour {
        private string _nameInput = "";
        private string _scoreInput = "0";
     
        private void OnGUI() {
            GUILayout.BeginArea(new Rect(0, 0, Screen.width, Screen.height));
     
            // Display high scores!
            for (int i = 0; i < Leaderboard.EntryCount; ++i) {
                var entry = Leaderboard.GetEntry(i);
                GUILayout.Label("Name: " + entry.name + ", Score: " + entry.score);
            }
     
            // Interface for reporting test scores.
            GUILayout.Space(10);
     
            _nameInput = GUILayout.TextField(_nameInput);
            _scoreInput = GUILayout.TextField(_scoreInput);
     
            if (GUILayout.Button("Record")) {
                int score;
                int.TryParse(_scoreInput, out score);
     
                Leaderboard.Record(_nameInput, score);
     
                // Reset for next input.
                _nameInput = "";
                _scoreInput = "0";
            }
     
            GUILayout.EndArea();
        }
    }
2

To convert old GUI to new Unity UI you first need to create your game object structure with the correct elements. If my memory serves right the above code creates (tell me if I missed something):

  • full screen background area → this converts into a game object with a RectTransform and an optional Image component on it, child of a Canvas

  • a list of labels → this converts into game object with text components. I would recommend using a VerticalLayoutGroup to help with this, or possibly even a ScrollView

  • space → you just leave that space, or create an empty game object

  • 2 input fields for name and score → these will become InputFields

  • record button → will become a record button

Now for the logic within this script, I would separate it into different parts. The easy part is the button. In a script that will handle the input from the UI add:

// make sure you assign the InputFields to the control script!
[SerializeField] private InputField _nameInputField = null;
[SerializeField] private InputField _scoreInputField = null;

public void OnRecordButton () {
    int score;
    if (!int.TryParse(_scoreInputField.text, out score)) { /* invalid score entered */ return; }
    if (string.IsNullOrEmpty(_nameInputField.text)) { /* no name entered */ return; }
    Leaderboard.Record(_nameInputField.text, score);
    _nameInputField.text = "";
    _scoreInputField.text = "0";
}

After this you go to the Editor and add to the Record button’s OnClick() event to call this function.

The not so easy part is the list of entries. You will need to create the “labels” at runtime and manage them (meaning Destroy() them when not needed anymore). I would create a prefab from an instance of a label (a game object with RectTransform and Text component), then add this to the control script:

 [SerializeField] RectTransform labelListHolder = null; // this is an empty game object holding the labels
 [SerializeField] Text entryLabelPrefab = null; // make sure you assign the prefab to the script!

 private void CreateLabelListUI () {
      while (labelListHolder.childCount > 0) { Destroy(labelListHolder.GetChild(0).gameObject); } // destroy previous list
     for (int i = 0; i < Leaderboard.EntryCount; ++i) {
          Text newLabel = Instantiate(entryLabelPrefab, labelListHolder);
          // you might need to set position of your newLabel here, unless you use a ScrollView or VerticalLayoutGroup
          var entry = LeaderBoard.GetEntry(i);
          newLabel.text = "Name: " + entry.name + ", Score: " + entry.score;
     }
 }

And then you call this function whenever the entries in Leaderboard are updated.

BTW, I really like the the C++ style increment in the for loop :slight_smile:

3

Harinezumi
Hello and thank you for your answer. this is exactly what i am looking for.
I always get the error:
error CS0117: Leaderboard' does not contain a definition for EntryCount’, Clear', GetEntry’
and so on.
what am i doing wrong … please help me,> Harinezumi
Hello, thank you for your answer. this is exactly what i am looking for.
I always get the error:

error CS0117: Leaderboard' does not contain a definition for GetEntry’, Clear', Record’ and so on.
what am i doing wrong … please help me