Displaying Text

In this lesson you will learn how to create UI that displays text on the screen.

Adding a Screen GUI

The most common GUI in Roblox is a screen GUI.

  • GUI stands for Graphical User Interface and is a way of showing information to a player visually. Examples of GUI include health bars, inventories and more.

    We can add a screen GUI to the StarterGUI service, so each player starts with their own GUI.

    Items in the StarterGUI will be added to each player when they enter the game.

    Find the StarterGUI in the Explorer window and add a Screen GUI.

Adding a Text Label

The Screen GUI is empty, so we need to add UI items to it. Let's add a Text Label.

  • Hover over the new ScreenGUI object and click the + button. Then find TextLabel in the popup menu and click on it.
  • You will now see a basic text label in the top left corner of the game view.

Editing with Properties

We need to edit the label so it displays what we want and looks nice.

We can edit the text label by changing its properties.

  • Properties change how an object looks and works.

    When you select an object, you can see its properties in the Properties Window
  • If you cannot see the properties window you can open it by going to the View tab and clicking on Properties.

Text Label Properties

There are many properties that give the text label different effects.

We will only look at a few common properties. Make sure the TextLabel is selected to see its properties.

  • Background Color

    Find the BackgroundColor3 property and click on the square.

    Select any color and click OK to change the background color of the text label.

    Colors on screens are made of a mixture of red, green and blue. The 3 numbers represent how much of each to use.
  • Text Content

    Find the Text property and click on it.

    Type in whatever you want your label to say and press Enter.
  • Text Font

    Find the Font property and click on the name of the font.

    Click the arrow to open the drow-down box and select a font to change the style of the text.
  • Text Color

    Find the TextColor3 property and change the text color by clicking on the square.
  • Text Size

    Find the TextSize property and increase the number to make the text size bigger.
  • Other Common Properties to Try
    • Property Description
    BackgroundTransparency How transparent the label is.
    0 = Opaque, 1 = Transparent.
    BorderColor3 The color of the label border.
    BorderSizePixel How thick the label border is.
    TextStrokeColor3 The color of the text outline.
    TextStrokeTransparency How transparent the text outline is.
    0 = Opaque, 1 = Transparent.
    TextTransparency How transparent the text is.
    0 = Opaque, 1 = Transparent.

Moving and Resizing

Lets move the label to a better position.

  • With the TextLabel selected in the Explorer, you can drag the label in the game view to move it.

    Move it to the top center of the screen.

    You can also drag the squares on the corners or sides of the label to resize it.
  • Now click play and move around. Notice that the label stays in the same place.

    The text label exists on your screen, not in the 3D world.

    Each player has their own ScreenGUI and cannot see each other's.