Creating a Score Bar

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.

1. In the Explorer window, hover over the StarterGui object and click the + button.

   

2. Select ScreenGui from the menu. This will create a new 2D screen space in front of the 3D game world.

   

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 ImageLabel and TextLabel inside a Frame object.

To add an empty frame:

1. 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.

   

2. As a best practice, rename the new frame according to what it will contain, for example ScoreBarFrame.

   

Size

To change the size of the score bar, you'll need to set various Size properties on the frame.

1. Make sure ScoreBarFrame is selected.

   

2. In the Properties window, locate the Size property and click the arrow to expand its tree.

   

3. 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:

Scaling

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.

1. Hover over the ScoreBarFrame object, click the + button, and insert a UISizeConstraint.

   

2. 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.

   

Position

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.

1. Change the frame's AnchorPoint property to 0.5, 0 so that its position will be based around its horizontal center.

   

2. 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.

   

Styling

Currently the GUI frame is solid white with a thin border, but it can easily be changed.

1. Make the frame translucent black by changing its background properties.

   

2. Remove the border completely by setting BorderSizePixel to 0.

   

   The frame should now look like this:

   

Arrangement

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.

1. Hover over the ScoreBarFrame object, click the + button, and insert a UIListLayout.

   

2. Change the following property values to arrange the image and score text side-by-side, vertically centered within the frame:

   

Device Emulation

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.

1. Near the upper-right corner of the 3D view, click the emulation button.

   

2. 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.

   

Adding an Image

Images inside a GUI are typically ImageLabel objects, basic 2D images which can be resized as needed.

1. Insert an ImageLabel into the ScoreBarFrame object and select it.

   

2. To place this tutorial's crown image into the label, locate its Image property and paste in rbxassetid://5673786644.

   

3. Expand the image object's Size tree and set the following property values:

   

4. As you can see, these scaling values stretch the image beyond the full width of the frame. To make sure that only the height is considered, change the image's SizeConstraint to RelativeYY.

   

5. Elements in a UIListLayout are ordered by their LayoutOrder. Change this property to 1 since the image should be the first element inside the frame. You won't see any change since the image is the only element, but it's a good idea to set the layout order now.

   

6. Finally, change the image's background from white to fully transparent by setting BackgroundTransparency to 1.

   

Inserting Text

GUI text is often rendered through a TextLabel object which lets you choose a font, color, alignment, and more.

1. Insert a TextLabel into the ScoreBarFrame object and select it.

   

2. Change its LayoutOrder property to 2. Because the associated UIListLayout is set to horizontal, this will place the label to the right of the image.

   

3. Resize the label by setting the following property values:

   

4. Style the text by setting its font, color, and scaling.

   

5. Change TextXAlignment to Left so that the score text stays left-aligned near the crown image regardless of whether the player's score is 0, 1000, or 1000000.

   

6. Finally, make the label's background fully transparent by setting BackgroundTransparency to 1.

   

This covers the basics of GUI objects — you now have a basic score bar that adapts to both large and small screens.