Adding UI Elements

UI Elements can be placed on both Screen UI or Surface UI assets within Roblox. This doc goes over how to add UI Elements such as TextLabel, TextButton, ImageLabel, and ImageButton to your Roblox UI.

The most common UI Elements are text and images. The following will go over how to add these elements and then customise them.

Adding a TextLabel or ImageLabel

Add a TextLabel UI Element...

• Press the '+' next to the 'ScreenGui' or ‘SurfaceGui’ asset to add the following elements :

  • TextLabel

  • ImageLabel

• Rename it as you see fit. eg.’TXT_Label’ by selecting once, then Single Click.

Adding Buttons

Buttons allow the player to click on the button in order to cause an event such as starting a game, customising a character, opening a door, etc.

First you will need to create the Button such as a TextButton or an ImageButton. You will then need to attach some code to the button to trigger an event when pressed.

Adding a TextButton or ImageButton

Adding a text Button..

• Press the '+' next to the 'ScreenGui' or ‘SurfaceGui’ asset to add the following elements :

  • TextButton

  • ImageButton

• Rename it as you see fit. eg.’BUT_Label’ by selecting once, then Single Click.

Customising your UI Elements

Many of the UI Elements have the same base settings to adjust them in the location they have been placed in both ScreenGUI and In-World GUI.

Adjusting the Anchor Point

The Anchor point is the pivot point of the UI Element. How you want to place and scale the element will be from this point. Much like a Pivot Point on a 3D Asset.

You may want the Anchor Point to be at the top left, down to the bottom right and everywhere in between. The element would then scale from that point, such as to the left from the left, from the centre, or back from the right as simple examples.

Anchor Point parameters...

• Adjust the Anchor Point to where you want the asset to be positioned, scaled, and rotated from.

Adjusting Fonts and Colors on Text UI

Adjust Background Color and Background Transparency ...

• Select the UI Element.

• Adjust the 'BackgroundColor3' if you want a color as the background.

• Adjust the 'BackgroundTransparency' if you want the button to be semi/completely transparent.

• Update the Font with 'FontFace'.

• Update the text in 'Text'.

• Update the text size in 'TextSize'.

• Adjust the Text Color with 'TextColor3'

Adjusting the Image and Colors on Image UI

• To upload an image, go to the 'Asset Manager' and use the Upload button.

• Click on the 'Image' parameter to change the image to your uploaded image.

• 'ImageTransparency' is the opacity of the entire image.

• You can change the 'ImageColor' of the image using the RGB Values. Best used with a Grayscale Image to create clean variations.

• Reduce the 'BackgroundTransparency' setting if the Image has transparency.

• 'BackgroundColor' is only visible if the image has transparency and the 'BackgroundTransparency' is not at 1.

You could use the differences in Background Colors, Image Colors, Background Transparency, and Image Transparency to make a number of different variations using the one image file.

Adjusting the Position, Scale, & Rotation

Size | Scale - X : 1, Y : 1.

Size | Scale - X : 0.5, Y : 0.5.

Adjusting Size

• Adjust the 'Size' of the text

  • Scale is the amount by percentage of parent UI from 0-1.

    • 0.1 would take up 10% of the space.

    • 1.0 would take up 100% of the space.

  • Offset is in pixels (considering your SurfaceGUI Sizing).

Position | Scale - X : 0, Y : 0.

Position | Scale - X : 0.5, Y : 0.5.

Adjusting Position

• Adjust the 'Position' of the text.

  • Scale is the position by percentage of the Anchor Point within the parent UI from 0-1.

    • 0.1 would be placed at 10% of the space.

    • 1.0 would be placed at 100% of the space.

  • Offset is in pixels (considering your SurfaceGUI Sizing).

Adjusting Rotation

• Adjust the 'Rotation' of the text.

  • + is Clockwise, - is counterclockwise.

Adjust Font, Text, Color, and Size...

Adding a Trigger event to Buttons

• Add a ‘LocalScript’ to the ‘Button’ asset

  • To add the ‘LocalScript’ element …

    • Press the plus next to the ‘Button’ asset to add elements.

      • Type in ‘local’ to help find it.

      • Rename it as you see fit. eg.’GameMenuScript’

• Add the following code into the script :

local button = script.Parent
button.Activated:Connect(function()
print("Button Clicked")
end)