Creating a GUI

Creating a GUI

Players in roblox battle royale with on screen display showing time and player count

Learning Objectives Students will be able to:
  • Create a graphical user interface to display the current game status and match information.
  • Practice modular coding by scripting a module script that pulls information from other scripts and displays it through a GUI.

Displaying Information with a GUI

So players can see the timer and game status, create a graphical user interface (GUI). For this game a text label will display the current game status as well as the remaining player count and time.

During Intermission
During a Match

Set Up the Screen GUI and Label

First, create a Screen GUI object to hold the different text elements. When the player moves the camera, the screen GUI stays in the same place on their screen.

To ensure all players see the same display, place the GUI in the StarterGUI folder. At game startup, this folder is copied to all players.

  1. In the StarterGUI folder, create a new ScreenGUI. Then in ScreenGUI, add a new TextLabel named StatusText.
  1. To move the label, in the Explorer, select StatusText. Then, in the game view, drag the label where you would like it. Your numbers may differ from the video. The label can also be resized using the anchor points on the corners.
Can't Move or Click the Label?

Make sure that the label is selected in the Explorer.

Depending on how a GUI element is sized and positioned, it may look differently on different devices, like a computer or phone. To ensure GUI elements are consistent across all devices, always use the Scale options for an element’s Size and Position properties. Learn more in this Intro to GUI article.

Scripting GUIs with Local Scripts

Game status messages to be displayed will be stored in StringValue objects and updated using local scripts.

Compared to scripts and module scripts which run Roblox servers, local scripts run on a player’s device. They’re often used for coding GUI elements like the timer or player input, like mouse or keyboard actions.

Setup the Script and Values

  1. In ReplicatedStorage, create a folder named DisplayValues. In that folder, add a StringValue named Status. To test the value later, give it a temporary value, like "Welcome to the Battle!".
ClassName StringValue
Name 0
Parent Display Values
Value Welcome to the Battle!
Why Replicated Storage?

Because local scripts only run on a player’s device, they can’t be stored in Server folders like ServerStorage. ReplicatedStorage is a folder that’s available both to the client (device) and server.

  1. In StarterGUI > ScreenGUI > Status, add a new local script named StatusDisplay. Scripts that affect the GUI are often parented to that GUI element.
  1. Open StatusDisplay and define the following variables:
  • ReplicatedStorage service
  • DisplayValues folder
  • Status StringValue
  • TextLabel - use script.Parent.

Change the Text Label

To change the text in the label, use a Changed event so whenever the Status StringValue is changed by another script, the text label will be updated.

  1. Code a new function named updateText(). In that function, set the Text property of textLabel to the status.Value.
  1. Connect the function to the Changed event.
  1. So players see the most up to date status when starting the game, run updateText() at the end of the script.
  1. Run the game and confirm that you see the temporary value in the display.

If the label is blank, check that the Status StringValue (in ReplicatedStorage) has it’s Value property set to some text.

Creating a Display Manager

During a game, the text label will need to get information from GameManager, MatchManager, and possibly other scripts. So these different scripts can update the text label when needed, create a module script named DisplayManager.

Set Up the Module Script

  1. In ServerStorage > ModuleScripts, create a new module script named DisplayManager. Rename the module table to match the script name.
  1. Add local variables for the following:
  • Replicated Storage, DisplayValues folder, Status
  1. Create a new module function named updateStatus() that updates the string in Status StringValue. Other scripts will be able to call this function.
  • Add a parameter named newStatus, which will be the updated message.
  • In the function, set the value of status to newStatus.

Show Player Status for Intermissions

With the Display Manager set up, it can be used in other scripts to update the GUI text label. As the first message in the GUI, show the start and end of the intermission through the GameManager script.

  1. In ServerScriptService > GameManager, create a variable named displayManager and require the DisplayManager module in ServerStorage.
  1. As the first line after the while true do statement, call displayManager > updateStatus() and pass in a message about waiting for players.
  1. After the end of the repeat loop for the intermission, call updateStatus() and pass in a string announcing the match is starting. Since you’ll be testing with the GUI, delete the two print statements for noting the start and end of the intermission.
  1. Test the game with and without your minimum players. The message should read the following:
  • Without the minimum: "Waiting for Players".
  • With the minimum: "Get ready".

Issue: The text label doesn’t display the first message (E.g. "Waiting for Players) or displays “Label”.

  • Make sure in the StatusDisplay local script that updateText() is called at the bottom of the script. This ensures that the player gets the most up to date message.
  • Check that the Status StringValue is in ReplicatedStorage. Due to the unique nature of client-server relations, if it’s in ServerStorage, a local script won’t be able to find it.

Displaying the Match Status

During a match, the GUI will display two numbers: remaining player count and time. As these numbers change, the text label will change as well.

Set Up Values and a Function

  1. In ReplicatedStorage > DisplayValues, create two IntValues named PlayersLeft and TimeLeft.
  1. In DisplayManager, add variables to store PlayersLeft and TimeLeft.
  1. Create a local function named updateMatchStatus().
Then, set the value of status to display the number of players left and the remaining time.
  1. For both IntValue variables, connect updateRoundStatus() to the Changed event.
Don't Test Yet

Nothing has updated the PlayersLeft or TimeLeft values, so the status won’t be changed once a round starts.

Display Players

Next, add the code for displaying the number of players at the start of a game. Later lessons will update the PlayersLeft value as players are eliminated from the game.

  1. In PlayerManager, add local variables for:
  • ReplicatedStorage service, DisplayValues folder and PlayersLeft IntValue.
  1. Show the starting player count by setting the value of playersLeft to the size of the active players array. In sendPlayersToMatch(), under the for loop, type:
playersLeft.Value = #activePlayers

Display the Timer

Remember that module scripts are used to centralize similar code. Since the timer is tracked in MatchManager, update the TimeLeft value using functions from the Timer script. The display manager will listen for changes to the TimeLeft, and update to match the new value.

  1. In MatchManager, create variables to store the ReplicatedStorage service, DisplayValues folder and TimeLeft IntValue.
  1. Find the startTimer() function. After the timer’s Finished event, copy and paste the whole, highlighted while loop below.
  • This runs a loop to update the timeLeft value as long as the timer is still active.
  1. Run the game with the minimum players. Check that the status text displays:
  • The correct amount of starting players. Remember, this number won't change until additional code is added in a future lesson.
  • Time decreases each second until it stops at 1.
Test For Minimum and Without Minimum Players

Because the game has multiple conditions, check both to ensure your code changes affect everything as intended. For instance, check the game where there aren’t enough players for an intermission to see that everything runs as expected.

Take time to customize the text label with different colors, fonts, and sizes. To learn how to customize the on screen GUI, such as change the color and other features, check out the Intro to GUI article on the Developer Hub.

Finished Project Sample

Project File

Download the finished project.

Finished Scripts

Previous Timers and Custom Events Next Ending Matches