Table of Contents
Understanding Text Labels in Roblox
Text labels are one of the simplest ways to show information on a player’s screen. In Roblox Studio they are used to display text such as level names, instructions, timers, and scores. In this chapter you will focus on how to create, place, and style text labels, and how to prepare them so they can later be controlled by scripts.
Creating Your First TextLabel
To use a text label you first need a ScreenGui. You already know that ScreenGui is the container that holds all visible UI elements on the screen. Inside a ScreenGui you can create a TextLabel.
Insert a ScreenGui into StarterGui, then select the ScreenGui and insert a TextLabel into it. The TextLabel is the object that will actually show text on the screen. When you enter Play mode you should see the default text in the top left area of your game window. If you do not see it, the label is probably too small, off screen, or fully transparent, so you will fix those issues through its properties.
Position and Size in Screen Space
Text labels do not use studs like parts in the 3D world. They use screen space coordinates. Two properties control where and how big they appear: Position and Size. Each of these has two components: a scale part and an offset part.
The pattern is:
$$\text{Final value} = \text{Scale} \times \text{Screen Size} + \text{Offset}$$
Scale is a fraction of the screen, and Offset is a pixel value.
For example, Position has X.Scale, X.Offset, Y.Scale, and Y.Offset. If you set:
$$X.Scale = 0.5, \quad X.Offset = -100$$
$$Y.Scale = 0, \quad Y.Offset = 20$$
then the label’s left edge will be at half the screen width, moved 100 pixels left, and 20 pixels down from the top.
The same structure applies to Size. If you set:
$$\text{Size}.X.Scale = 0.3, \quad \text{Size}.X.Offset = 0$$
$$\text{Size}.Y.Scale = 0.1, \quad \text{Size}.Y.Offset = 0$$
then the label will be 30 percent of the screen width and 10 percent of the screen height. For most important UI, using Scale instead of Offset helps the UI stay consistent on different screen sizes.
You can change AnchorPoint to control how the position is interpreted. AnchorPoint uses values from 0 to 1 for X and Y. If AnchorPoint is (0, 0) then the top left corner of the label is placed at the Position. If it is (0.5, 0.5) then the center of the label is placed at the Position. Centered anchor points are very useful when you want text labels in the middle of the screen, such as a “You Win” message.
Basic Text Properties
A TextLabel has a Text property that holds the string you want to show. You can type directly into Text in the Properties window to set the default value. Later, scripts will change this property at runtime. For now, treat Text as the visible content of your label.
You control how the text looks with several properties. TextColor3 sets the color using RGB values. TextTransparency controls how visible the text is. A value of 0 is fully visible and a value of 1 is fully invisible. The size of the text is controlled with TextSize, which is measured in pixels. Larger values make the text easier to read but also take more space.
You can also change the font with the Font property. Different fonts can change the mood of your game. For a beginner project it is best to use a clear, readable font so that instructions and scores are easy to understand.
Finally, TextStrokeTransparency and TextStrokeColor3 can add an outline around your text. A slight outline can make white text readable on bright backgrounds. If you want a clear outline, use a low TextStrokeTransparency like 0.1 or 0 and pick a dark TextStrokeColor3.
Important rule: Keep your UI text readable. Use a text color that clearly contrasts with the background, a font size that is large enough on most screens, and avoid setting TextTransparency too high by accident.
Background and Layout of a TextLabel
Text labels are both text and a rectangular UI element. They have a visible background controlled by BackgroundColor3 and BackgroundTransparency. A BackgroundTransparency of 0 makes the rectangle fully visible, and a value of 1 makes it invisible, which can be useful if you only want floating text.
BorderSizePixel and BorderColor3 control the border around the label. You can set BorderSizePixel to 0 if you do not want any border. Many modern Roblox UIs use no border and a slightly rounded or transparent background to look cleaner.
To control how text sits inside the label, you have alignment properties. TextXAlignment can be Left, Center, or Right. TextYAlignment can be Top, Center, or Bottom. If your text is a title in the center of the screen, you might set both alignments to Center. For a timer in the top right corner, you may use Right and Center in Y to keep it snug against the corner.
If you expect your text to have multiple lines, set TextWrapped to true. When TextWrapped is true, the label will wrap long lines instead of cutting them off. The text will use the available width inside the label. You do not need to insert new lines manually for most cases.
Using TextLabels for Game Information
In your first game you might use text labels for instructions, level names, timers, or score displays. While this chapter does not cover writing the scripts that update them, you should already design labels with those purposes in mind.
For example, you can create a label at the top center of the screen that is meant to show the player’s current stage in an obby. Give it a clear name in the Explorer, such as StageLabel. Set its Text to a placeholder like "Stage: 1" so that you can see how it looks. Later, a script will change this to match the real stage number.
For a timer, you might place a label near a corner to keep it out of the player’s main view. Again, give it a clear name like TimerLabel. You can choose a bold font and a bright color to make sure the player notices the countdown.
The key idea is that each text label should represent a specific, simple piece of information. One label for the score, one for the timer, one for messages. This makes it easier later when you connect scripts to each label.
Naming and Organization for Scripting
Even though you are not writing the update logic in this chapter, you should prepare your UI for scripting. Good naming and structure in the Explorer will save time.
Place all game HUD labels in a single ScreenGui, and give each TextLabel a unique and descriptive Name. For example, use ScoreLabel instead of TextLabel, HintLabel instead of TextLabel1. Scripts will use these names to find the labels, so avoid spaces and keep them consistent.
You should also keep related labels grouped. For example, if you are planning a main menu later, you can create a separate ScreenGui for menu text so that gameplay labels are not mixed with menu labels. You will learn about more complex UI structures in future chapters, but this basic organization already helps.
Important rule: Always give each TextLabel a clear, unique name. Scripts will access labels with something like ScreenGui.ScoreLabel, so confusing names make your code harder to write and debug.
Making Labels Adapt to Different Screens
Roblox games run on devices with very different screen sizes. If you set Size and Position using only pixel offsets, your text labels might look fine on your monitor but appear tiny or off screen on a phone or tablet. This is why using Scale values is important.
For labels that must stay in a corner, you can combine a Scale anchor and small pixel offsets. For example, set Position.X.Scale to 1 and Position.X.Offset to -20 to place a label near the right edge with a small gap. Use Position.Y.Scale of 0 and Position.Y.Offset of 20 for a little distance from the top. The label will stay in the top right corner even as the window changes size.
For centered text, set AnchorPoint to (0.5, 0.5) and Position to have X.Scale of 0.5 and Y.Scale of 0.5. This will keep the label in the center of the screen regardless of resolution.
As you adjust your text labels, test your game in different window sizes in Studio. Resize the Roblox window and enter Play mode again to see how the labels behave. If something looks wrong, adjust Scale and Offset until the layout feels stable.
Preparing TextLabels for Script Interaction
Finally, consider how scripts will interact with your labels. Even before writing code, you can think in terms of properties that are likely to change.
For labels that display changing values, such as scores or timers, the Text property will be updated frequently, while style properties like TextSize and TextColor3 will usually stay constant. Set your style once in Studio, and then leave it alone in scripts. This separation makes your code simpler because the script only needs to focus on content, not appearance.
Sometimes you may want to show or hide messages. For that, your scripts will use the Visible property. Make sure that any label you want to show temporarily is designed with the correct position and style beforehand, then it can be shown or hidden by setting Visible to true or false.
If a label should not block the player from clicking something behind it, remember that a TextLabel can capture input. Later, you will often use TextButton objects for interactive text instead of TextLabel. For non interactive information, using TextLabel is the correct choice.
By planning how your labels will be used, you make the scripting that comes later clearer and easier. In the next chapters, you will connect these labels to scripts so that they can display real game information and respond to player actions.