PcoWSkbVqDnWTu_dm2ix
Creating a Score Bar
Part 1 - Getting Started
Creating a Score Bar
Part 1 - Getting Started

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.
  1. 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.
  1. 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.
  1. In the Properties window, locate the Size property and click the arrow to expand its tree.
  1. For the frame to dynamically resize on various devices and screens, it’s best to use Scale properties. For this GUI, set the following:

    Size → X = 0.25, 0, Size → Y = 0.08, 0

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

  1. Near the upper-right corner of the 3D view, click the emulation button.
  1. 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.

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.

    AnchorPoint = 0.5, 0

  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.

    Position → X = 0.5, 0

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.

    BackgroundColor3 = 0, 0, 0, BackgroundTransparency = 0.6

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

    BorderSizePixel = 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.

Vertical Sequence
Horizontal Sequence
  1. Hover over the ScoreBarFrame object, click the button, and insert a UIListLayout.
  1. Change the following property values to arrange the image and score text side-by-side, vertically centered within the frame:

    FillDirection = Horizontal, VerticalAlignment = Center


Next Page Images and Text