Making a Version Number GUI


Version numbers are important in making games as it is important to communicate and track updates to players. Updates can be assigned numbers and associated with things like patches and release notes. Displaying the version number allows the players of the game to know which version of the game they are playing. In this tutorial we will be creating and placing a Graphical User Interface, usually called a GUI, that displays the version number of our game.

StarterGui and ScreenGuis[edit]

StarterGui is a service in the Explorer for holding 2D elements you want in the player’s GUI. When a player joins the game, everything that is in the StarterGui folder will be copied to that player’s PlayerGui and drawn on the screen.

Let's see how we can use StarterGui to place an on the screen. The first thing we need is called a ScreenGui. Right click on StarterGui, mouse over Insert Object, and then click on ScreenGui.

The ScreenGui is just a holder for 2D elements, so nothing visual will have changed yet. To make text appear, we will have to use an object called a TextLabel. Right-click on the ScreenGui in the explorer and insert a TextLabel. A white box will appear in the upper left corner of the screen with default text Label. Notice how even if we move the camera the label will stay in place.

TextLabelDefaultVersion.jpg

Right now the TextLabel is showing the default text, so let's add the message we want. The easiest way to do this is to left-click on the TextLabel object you just created in the Explorer. Once that is selected scroll down the properties window until you find the Text property. Change the Text field to Version 1.0.

EditingTextLabel.JPG

Once you have typed in the text you want, it will appear instead of the default text.

NewText.JPG

Positioning the TextLabel[edit]

Now that we have our TextLabel in our game, let's learn how to reposition it. All 2D elements in Roblox have a Position property which determines where the text will be drawn in relation to the text’s parent. This position represents a point on a 2D grid with an X axis and a Y axis. X and Y are at 0,0 in the upper left hand corner of the grid. X values increase to the right and Y values increase going down. By default, the top left corner of all 2D elements starts at 0,0, which is why the TextLabel we inserted is at the top left of the ScreenGui.

PositionXYNew.JPG

So what if we want to move the element? Let's take a look at the Position property of our TextLabel in the Properties window. Notice how it actually has 4 numbers describing the position: {0,0},{0,0}. The first group of numbers inside the { } sets how the element is positioned along the X axis, and the second group of numbers set how it is positioned along Y.

Let's move the version label down and to the right on the screen. The first number for Y is called the Scale, and it represents a percentage of the parent element's height. For example, let's set the Scale field of Y to 0.5 (half the width). Let’s also set the Scale field of X to 0.5 (half the height).

PositionCenterish.JPG

The label is now being drawn from the center but is not centered. This is because elements have size and are drawn from the top left of the screen. So the top left corner of the label is at the center of the screen but the label extends some number of units down and to the left. To find those dimensions, let’s explore a property called ‘’’Size’’’.

Keeping TextLabel selected in the Explorer, scroll down the Properties window to the Size property. We see that the Size is {0,200}, {0,50}. Expand the Size property as well as the X and Y properties and we see that the Scale for X and Y are both 0. There is another property called ‘’’Offset’’’.

DefaultSize.JPG

Instead of moving an element by a percentage of the parent's size, Offset moves the element by a number of pixels. The Offset field of X is 200 and the Offset field of Y is 50. Select the Position property of the TextLabel again. Set Scale field of ‘’’Y’’’ to 1.0. Let’s also set the Scale field of ‘’’X’’’ to 1.0. Notice that the TextLabel is no longer visible. This is because elements are drawn from the top left corner. The rest of the TextLabel is offscreen.

LabelOffscreen.JPGPositionScaleFull.JPG

Using Offset to Position Correctly[edit]

In order to move the TextLabel to where we want it adjust the Position property of TextLabel. Adjust the Offset field of X to -200 to account for the width of the TextLabel. Similarly, adjust the Offset field of Y to -50 to account for the height of the TextLabel. Negative numbers are used to move the opposite direction in the X or Y direction. The version number should now be in the bottom right of the screen where we want it.

CorrectPositionValues.JPGVersionNumberFinalPos.JPG


Reference links[edit]

For the manual page corresponding to this tutorial, go here[link].

This tutorial also references the following API pages: ScreenGuis, StarterGuis, PlayerGuis, and TextLabels. It also uses an understanding of Udim2s and Vector2s to size and position the GUI.