Using Images in GUIs
Using Images in GUIs
Articles/Intro to GUIs guide, you learned the basics of GUIs, how to create a screen GUI canvas for all players that enter your game, and how to position and resize a
TextLabel GUI object on the screen. If you did not read through the
Articles/Intro to GUIs guide, please do so first!
Let’s expand on those concepts and explore how to insert images into the screen GUI space. This is a great way to display icons, logos, background images, and other cool designs on the screen!
Adding Images to a Screen GUI
Adding an image to a screen GUI is very similar to adding a text label.
- In the Explorer window, find the ScreenGui object (you can use the same one that you created in the
Articles/Intro to GUIsguide)
- Insert an
ImageLabelobject. Remember that you can find an object quickly by typing the first few letters of its name into the search field.
This will add an empty image label to the top-left corner of the game view.
Upload an Image
This placeholder is a good start, but obviously we need a real image to put on the screen. Let’s upload an image now.
- In Roblox Studio, select File → Publish to Roblox.
- Click New Place.
- Enter a name and description.
- Click Create Place.
- When the bar is full and you see "100% Completed," click the blue Next button.
- On the next screen, you will see information about extra game features. You can skip those steps for now — just click the Done button.
- In the Explorer window, select the new ImageLabel object.
- Within the Image section of the Properties window, click on the Image property.
- In the popup window, click Add Image….
- In the next dialog, click the Choose File button. Find an image on your computer, select it, and confirm that you’d like to upload it.
- If you wish, type in a different name in the small Name input field. When ready, click the Create button.
- When finished uploading, you’ll see the ImageLabel object updated with the image you selected!
Change the Label Properties
The image is now uploaded and applied to the ImageLabel object. However, there are some properties which we can change to make it look even better!
- Expand the Data section in the Properties window if it’s not expanded already.
- For the BackgroundTransparency value, enter 1. This will make the image label background completely transparent so that anything behind it shows through.
- The size of the image label can be set with the Size properties. First, change Size → X → Offset to 80.
- Similarly, change Size → Y → Offset to 80 to keep the same proportions.
- The location of the image label can be set with the Position properties. First, change Position → X → Offset to 40.
- Change Position → Y → Offset to 20 to shift the label down a bit.
- Finally, turn the label counter-clockwise a small amount by setting the Rotation value to -8.
Layering Images in a Screen GUI
Great! Now you understand how to upload images to Roblox and put them on the screen. When you start adding more than one image, though, you’ll probably need to start thinking about layering.
Think about layering objects on the screen GUI space just like putting stickers on a piece of paper. If you stick one sticker on top of another sticker, it will hide that sticker behind it. Sometimes, however, you’ll want to arrange stickers in a different way, perhaps moving those behind to the very front.
Create a Second Image Label
Let’s place another image on the screen to demonstrate how layering works.
- Add a new ImageLabel object to the ScreenGui.
- Select the new image label in the Explorer window.
- Click the label’s Image property and upload the
BlueShape.pngimage below into your game (right-click the image, select Save Image As…, save it to your computer, and then navigate to it from Studio).
When the image is finished uploading, you should see the following result:
Change the Label Properties
The initial properties don’t look good for this image, so let’s fix them.
- Set BackgroundTransparency to 1 to hide the background box.
- Set Size → X → Offset to 300.
- Set Size → Y → Offset to 60.
- Set Position → X → Offset to 90.
- Set Position → Y → Offset to 30.
That should correct everything and the image label should now look like this:
Change the Layering Order
As you can see, the new image label was placed behind the first one. If you don’t like how this looks, you can move the object to the front by changing its Z-index.
- Make sure the blue shape image label is still selected. In the Properties window, at the bottom of the Data section, look for the ZIndex property.
- Change the value to 2. A higher ZIndex value pushes an object in front of all objects with lower values.
Since the ZIndex of the first label (icon) is 1, our setting of 2 for the blue shape pushes it in front.
Now you know how to create image labels in your game, upload your own images to Roblox, position labels on the screen GUI canvas, and layer them with Z-indexing.