Games often need to display information to the player such as their current score, health, or their character’s level. A GUI, short for Graphical User Interface, is used to display such information.
In this intro tutorial, you’ll learn how to build a score bar along the top-center of the screen, similar to the one shown below.
To make the score bar GUI appear on the screen, you’ll first need to create a
ScreenGui object — this behaves as a 2D canvas to display visual elements on the player’s screen. It’s usually best to add this to the
StarterGui service so that it gets copied to each player’s local game session when they join.
- In the Explorer window, hover over the StarterGui object and click the button.
- Select ScreenGui from the menu. This will create a new 2D screen space in front of the 3D game world.
As you continue to build your game, additional
ScreenGui containers can be added to StarterGui, each containing GUI objects for a specific “scene” or purpose. For example, you could create one
ScreenGui for your menu screen, another for your in-game GUI elements (initially disabled), then show or hide them through scripting when appropriate.
Creating a Frame
For organization and scaling/resizing, it’s best to group related GUI elements inside a
Frame container. For instance, a basic score bar may contain both an
TextLabel inside a
To add an empty frame:
- Hover over the ScreenGui object, click the button, and select Frame. This will create a blank frame in the upper-left corner of the screen.
- As a best practice, rename the new frame according to what it will contain, for example ScoreBarFrame.
To change the size of the score bar, you’ll need to set various Size properties on the frame.
- Make sure ScoreBarFrame is selected.
- In the Properties window, locate the Size property and click the arrow to expand its tree.
For the frame to dynamically resize on various devices and screens, it’s best to use Scale properties. For this GUI, set the following:
This should resize the frame to a thin rectangle:
The current size values work nicely on larger screens, but the vertical Y scale of 0.08 (8%) may appear a bit small on a phone.
To control how a GUI scales across different screen sizes, you can use constraints. In this case, a
UISizeConstraint will prevent the frame from getting too small.
- Hover over the ScoreBarFrame object, click the button, and insert a UISizeConstraint.
Select the new constraint object and set its MinSize property to 0, 40. This prevents the frame from shrinking to less than 40 pixels in vertical size.
As you configure any GUI, it’s highly recommended that you use Studio’s Device Emulation to preview how it will appear on different screens.
- Near the upper-right corner of the 3D view, click the emulation button.
- Above the 3D view, select any device from the menu. Generally, it’s a good idea to test your GUI on at least one device within the Phone, Tablet, Desktop, and Console sections.
In Roblox games, the top-left area of the screen is typically occupied by the chat window. To move the score bar to a clearer region, adjust its AnchorPoint and Position.
Change the frame’s AnchorPoint property to 0.5, 0 so that its position will be based around its horizontal center.
Expand the frame’s Position tree and change X to 0.5, 0. This should center the frame along the top edge of the game window.
Currently the GUI frame is solid white with a thin border, but it can easily be changed.
Make the frame translucent black by changing its background properties.
Remove the border completely by setting BorderSizePixel to 0.
The frame should now look like this:
Layout objects can be used to arrange GUI elements like images or text inside the frame. Although a score bar doesn’t seem like a “list,” the
UIListLayout object lets you easily arrange child elements in a vertical or horizontal sequence.
- Hover over the ScoreBarFrame object, click the button, and insert a UIListLayout.
Change the following property values to arrange the image and score text side-by-side, vertically centered within the frame:
Next Page Images and Text