Intro to GUIs

In the Building tutorials we covered how to build 3d environments and models in ROBLOX. Games use many 2D elements as well, and ROBLOX has a system to draw these to the screen. In this tutorial we will cover how to draw a static image on the screen.

StarterGui and ScreenGuis[edit]

Just like how the Workspace is where you can find the 3D elements in your game (such as terrain, parts, characters, etc), there is a service in the Explorer called StarterGui for 2D elements. Everything that is parented to this service will be copied when a player joins the game and drawn on the screen.

Let's see how we can use StarterGui to draw an image on the screen. The first thing we need is called a ScreenGui. There are actually several ways 2D elements can be used in ROBLOX. For now we are just interested in displaying a static image which requires a ScreenGui. Right click on StarterGui, mouse over Insert Object, and then click on ScreenGui.

The ScreenGui itself won't draw anything to the screen, so nothing visual will have changed yet. This is because the ScreenGui is just a holder for 2D elements. Let's insert a picture. Right click on the ScreenGui in the explorer and insert an ImageLabel. Now a picture will appear in the upper left corner of the screen. Notice how even if we move the camera the picture will stay in place.

GUI Intro ImageLabel.png

Right now the ImageLabel is showing a placeholder image, so let's add a custom image. The easiest way to do this is if the place you're working in has been published. Open the File menu and Publish to ROBLOX As... (or Publish to ROBLOX if it is already published). Now click on the ImageLabel in the Explorer, and in the Properties window find the property called Image. It will have a value like rbxassetid://133293265. Click on that value and then click on Add Image.... This will let you pick an image from your computer.

Once you have selected an image, it will appear instead of the placeholder image.

GUI IntroImage.png

Positioning the image[edit]

Now that we have a picture in our game, let's learn how to reposition it. All 2D elements in ROBLOX have a Position property which determines where it will be drawn in relation to it'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, all 2D elements start at 0,0, which is why the ImageLabel we inserted is at the top left of the ScreenGui.

So what if we want to move the element? Let's take a look at the Position property of our ImageLabel 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 just look at Y for now to move the image down 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, lets set the Scale field of Y to 0.5. Notice how the top left corner of the image is now half way down the screen.

GUI Intro YScale.png GUI Intro YScale3Dview.png

Scale has the advantage that it will change if the parent element's size changes. Right now our image is halfway down the screen. If we change the size of our Studio window, the image will shift as the screen moves to always stay in the center. This is very useful when designing interfaces that work with screens of varying sizes and shapes (such as different monitors, mobile devices, etc).

The second number in the set is called the Offset. Instead of moving an element by a percentage of the parent's size, it moves it by a number of pixels. Let's move our image a little to the right. Set the Offset field of X to 20. The image will now shift to the right. Notice that if you resize the Studio window, the distance between the ImageLabel and the edge never changes.

GUI Intro XOffset.png GUI Intro XOffset3Dview.png

Resizing the image[edit]

Using the Position property we can put 2D elements anywhere we need to on the screen. We can also change the size of any 2D element using it's Size property. If we look at the Size of the ImageLabel we inserted, we can see that it is {0, 100},{0,100}. These numbers work the same way Position does. The first number in each set represents a percentage of the parent object, and the second number represents a pixel value. For our image, the second number for both X and Y are both 100. This makes the image a square measuring 100pixels x 100pixels. If we resize the screen, the size of the image doesn't change.

Let's try changing the offset value for the X and Y of the size. Change the Size of the ImageLabel to {0, 300},{0,200}. Notice how this makes the image larger and rectangular.

GUI Intro OffsetSize3Dview.png

Now let's play around with the scale to see how that works with size. Change the Size to {.5,0},{0,200}. The image is now the same height as it was before, but now it is stretched to fill half the screen's width. If you resize the screen, the image will stretch as well.

GUI Intro ScaleSize3Dview.png

Keep in mind you can use both the Scale and Offset values at the same time! For example, lets make our image fill the entire screen, but have a small margin of 20 pixels around the edge. Let's first set the Position to {0, 20},{0, 20}. This will put the image in the upper left corner with a bit of room. Since we didn't set the scale, this distance will never change when the window resizes. Now, set the Size to {1, -40},{1,-40}. Setting the Scale to 1 makes the image stretch to fill the whole screen. Since we want 20 pixels on both sides of the image for the margin, we put -40 as the Offset. This sets the height and width to be the height and width of the screen, minus 40 pixels.

GUI Intro Margin.png