Guidance and Tutorials on UI/GUI Elements

ezgif.com-video-to-gif (1)

NOTE: Part of the QueModels series that is brand new starting from today!

Introduction:

Hello everyone, my name is loueque and today I will be showing you the many ways to create UI/GUI creations from the basics on what each element and property of the UI works and how to use them, to the basic of making UI realistic and simple, so let us dig in into the facts and tutorial!

What is UI/GUI? Pretty simple actually, GUI is an acronym among many programs that stand for Graphical User Interferance. There are two types of GUI on the Roblox platform, the first one being CoreGui which can’t be tampered or edited by normal developers and only by staff, and then we have the PlayerGui/StarterGui which can be created by everyone on the platform.

Off-topic:

But loueque, we could have just watched a youtube video or ask a friend for help, why here?

Well, it is great you asked because I wanted to share with the community and newer developers on what UI/GUI is so they can create every day or maybe apply for a job for a game like me.

For example, practicing GUI for a long period of time and then making nice detailed ones like one that I made below:

But another reason is that this has clear and valuable sources that aren’t shown or spoken of in videos so which is why I wanted to create this tutorial for everyone on the forums.

Alright, I have created 3 categories for you to choose from and an in-depth of how each element and property work inside the studio and inside a game and many more, but there won’t be a scripting GUI category for a while, so let us begin!


Tutorials:

1st Tutorial:

GUI elements and properties:

Most of us here have had once used UI for fun like making a frame to make either a Shop frame, random text, or even script! In this part of the tutorial, I will be explaining what each UI element does and then properties in a separate one!

REMINDER: The only way to see UI elements is if they are inside StarterGui, or CoreGui if possible.

UI/GUI Elements:
ScreenGui

ScreenGui:

ScreenGui is the main parent of the UI elements such as a Frame or ImageLabel, it holds everything in there and can be seen from players inside the game if it is inside StarterPlayer.

Here is a example of what it looks like in the Explorer tab:

Image:

Annotation 2020-07-12 113754

Also, you can disable the ScreenGuI if you go the properties tab of that particular parent, and it should look like this:

Pro tip: If you click on IgnoreGuiInset, a text or frame can be under the top bar inside the game.

It disables everything inside of it and won’t be seen by players until it is not disabled.

Frame

Frame:

A frame is an element that is most commonly used to hold in every UI element into the ScreenGui, and when the frame moves from a script or by the user like you, everything inside of it will move as well.

Here is an example of what I mean and what a frame looks like:

GIF:

Also, you can use frames to make borders or circles in some cases, it has a lot of usages!

TextLabel

TextLabel:

TextLabel is pretty much used a lot on games, like if you see a text in-game saying You win!, that is a TextLabel that is being used in that case or scripted to pop up like that.

You can use TextLabels to show the user what the goal is, a price for an item, or especially a heartwarming message.

Example of a TextLabel:

GIF:

Pro tip: You can also use the TextLabel element like buttons or maybe for combat. :eyes:

TextButton

TextButton:

TextButton is used a lot for opening a shop, maybe to buy this amount of coins, or even a prompt message! It is similar to the TextLabel element but instead, you can press it with your mouse or touchpad and boom, you got something to open! Most known as a Clickable element.

Here is an example of what a TextButton would look like:

GIF:

TextBox

TextBox:

A TextBox is an element where the player can enter text for a specific reason. Not too many games use this, but it is mostly known for answering a math question or to put in a twitter code such as simple code.

Here is an example of what a TextBox does:

GIF:

ScrollingFrame

ScrollingFrame:

Have you ever wonder when you are scrolling on a GUI looking for an item or maybe a gamepass, well what you are scrolling on is a ScrollingFrame, most games use them such as Phantom Forces, Arsenal, and Jailbreak. :flushed:

A ScrollingFrame is a handy dandy UI element that supports you when you need to work on something that needs scrolling and different ways to customize it.

Example of what it does:

GIF:

It has extra properties than any other element like changing the bar size and bar color, and if it is scrolling on the X or Y axis.

ImageLabel

ImageLabel:

Most of you have seen an Image before, like a bee in Bee Swarm or maybe a scribbled flower on the screen, well that my friend is an ImageLabel.

An ImageLabel is a GUI object that is containing an Image that you have chosen for that particular element, like a bloxy cola or the Roblox logo. :roblox_light:

Here are some properties and a GIF of what ImageLabel does:

GIF and Image:

image

ImageButton

ImageButton:

The last UI Element in this category, the ImageButton.

An ImageButton is the same as an ImageLabel except you can click on it like a TextButton and open up a particular frame if you script it. :eyes:

Here is an example and an image of what it does:

GIF and Image:

image

UI/GUI Properties:

Quick Note:

I won’t explain and show what these mean as some announcement threads are talking about these, and I don’t use these personally.

Another note:

Most of the reasons/sources that are used in this category are from this link right here and stuff, thanks for reading this.

UICorner

UICorner:

More information right here about UICorner if you want to read about it, or read mine.

UICorner is a UIComponent that will make the parent that is chosen for it to be round and smooth on the edges without using a plugin.

UIGradient

UIGradient:

UIGradient is a special component that is using a mixture of colors from one end to the other to create a realistic beam or pattern on a UI parent.

There is a thread about it or an example of what it looks like:

Image:

image

UIPadding

UIPadding:

UIPadding is a UI Component that applies padding to the borders of the GuiObject that is parented to.

Some information here.

UIScale

UIScale:

UIScale is a UI component that scales the parent doubled of the number value given for it.

Here is an example of what it does and how it works inside studio:

GIF:

UITableLayout

UITableLayout:

UITableLayout is a UI component that layout a certain row of UI from the X-Axis or the Y-Axis, and they are arranged in columns from the top to the bottom.

Here are some images from the Hub on how it works:

Images:

image

image

UIGridLayout

UIGridLayout:

UIGridLayout happens to be one of my favorite Properties. What it does is that it lays out siblings and children onto a specific order like 4 to the right and maybe 3 down, most commonly used when looking at your avatar which armor and weapons, or a shop.

Hub if you want to learn more about it.

UIAspectRatioConstraint

UIAspectRatioConstraint:

The UIAspectRatioConstraint is one of those ratio elements that ensure that the parent can get an equivalent aspect to a ratio even though the size of the parent/child is set as a percentage of it’s the original parent.

More information here.

UIListLayout

UIListLayout:

UIListLayout is one of those properties that layout a sibling in a single row on a frame or scrolling frame either vertically or horizontally.

Also, Each sibling size and Position will be taken care of manually and control of the UIListLayout as usual, kind of neat right?

More information here.

UIPageLayout

UIPageLayout:

Nothing too complex or hard to understand at all. UIPageLayout is the 3rd favorite property of mine and how it works is that creates a viewable window of pages of UI and such, but it also supports it like a home screen on mobile and parent it to the parent.

UITextSizeConstraint

UITextSizeConstraint:

UITextSizeConstraint pretty much assures that the text scale/size of itself is either smaller or larger depending on what you set the value.

For example, you set the lowest value to 3 and highest 10, which means it can be any number between those 2 values on a certain device.

More information here.

UISizeConstraint

UISizeConstraint:

UISizeConstraint is another one of these properties that ensures that the parent/children do not become larger or smaller than the MaximumSize and MinimumSize of the UI element.

For example, if the MaxSize is like {0, 500}, {0, 250}, then the parent and children inside can’t be over 500 pixels/size on a screen and can’t be less than 250 pixels/size.

More information here.

Hope you found this section helpful!

2nd Tutorial:

Creating the UI/GUI:

When creating UI/GUI inside a game, most developers approach on how they look like either an old style or more of a modern approach and a step ahead of the way! So I have only one tutorial here for today on how to make round/shadows under a UI.

So let’s begin!

Tutorial 1: Making Shadows under a button

So most of us have made a button before, like before reading this section of the page and so on, but have you ever wondered how to make a shadow under a button? If so, then you’re in the right place!

NOTE: I am using a TextLabel for this tutorial as a quick example, but this can work anywhere when making shadows under text/buttons.

Steps:

First Step: Insert a ScreenGui to StarterGui and then insert a Frame, then when you insert that frame, insert a TextLabel afterward:

Image:

image

image

Second Step: Add the UICorner property into TextLabel and the Frame:

Image:

image

Third Step: Put in random colors onto the Frame and TextLabel:

Image:

Annotation 2020-07-12 133108

Annotation 2020-07-12 133119

Fourth Step: Rename the properties such as Shadow or MainText

Then you are done! You got a nice and realistic shadow under a text.

Tutorial 2: Using UIGradient

UIGradients are substantial for many developers including me who care about what designs work, but making them is very easy!

So in this tutorial, I will be showing you about how they work and how to use them:

Steps:

First step: Get a Frame or TextLabel into a ScreenGui like this:

Image:

image

image

Second step: Insert a property called UIGradient:

Image:

image

Third step: Go to the UIGradient in properties and then click on the right of Color:

Image:

Annotation 2020-07-12 131742

Fourth Step: Mess around with colors by clicking on the edges or creating new lines:

Image:

image

Fifth step: Boom, you got a Gradient!

Hope you enjoyed this tutorial!

3rd Tutorial:

Scripting the UI

Hello! In this part of the tutorial, I will be having 3 tutorials on scripting some parts of UI such as opening and closing frames with a single button, changing text or colors, and especially tweens!

So, let us begin for this tutorial!

Tutorial 1: Opening & Closing

Almost everyone has seen a UI button before in a game like Jailbreak or Adopt Me, but have you ever wanted to replicate that for a game that you’re making? Well, you came to the right section of this topic as we will discuss the process of code and setting up the frame structure in order to complete a successful opening and closing set!

Steps:

Step 1. You want to insert a ScreenGui and then add in a TextButton or ImageButton and put it in the bottom left corner or bottom right, and then add in a frame and size it however you want and inside the frame, insert a TextButton at put it in the top right of the frame, and it should look something like this:

Images:

image

Step 2: Insert a LocalScript inside the TextButton which is outside of the frame and especially insert a LocalScript inside the TextButton inside the frame, and here how you should start out the code for the button outside the frame:

script.Parent.MouseButton1Click:Connect(function()

Or:

local button = script.Parent

button.MouseButton1Click:Connect(function()

^ What this commands/does it if a Mouse clicks on the parent, which is the button in this case, and it will open whatever is put into the code.

Step 2 ~ 3: After you put that code, create a new line and then type it this new line that is below the previous code above:

local button = script.Parent

button.MouseButton1Click:Connect(function()
    game.Players.LocalPlayer.PlayerGui.ScreenGui.MainFrame.Visible = true
end)

^ What this code does is that the ScreenGui and that it appears for the player which is you or anyone inside the game, and the child that will become visible is the MainFrame or the frame that we decided to become visible or not visible.

^ Oh before you test it out, make sure the frame is not visible on the screen so the code and work, otherwise the code wouldn’t work and it will do nothing.

Here is a GIF of what the code does:

Video:

Step 4: Now with the LocalScript inside the button which is inside the frame that we’ve opened, put it in the same code as listen above but with a twist: Change true to false so the frame will disappear.

local button = script.Parent

button.MouseButton1Click:Connect(function()
    game.Players.LocalPlayer.PlayerGui.ScreenGui.MainFrame.Visible = false --We changed this from true to false
end)

Here is a GIF of what both of the code does:

Video:

And you just made an opening and closing UI, here is a medal! :medal_sports:

Tutorial 2: Tween/GUI Animations

You’ve seen many games that have some cool animations with the GUI/UI such as moving from one position to another that is smooth or the whole frame sizing smoothly from zero to the whole screen, that my friend is called Tweening.

If you don’t want to follow this tutorial and instead want to read the documentation, you can read it right here!

Steps:

Step 1: You should create a ScreenGui and probably a Frame / TextButton and add a LocalScript inside one of those UI elements, it should look like this:

RobloxStudioBeta_F8Xc42M0Ea

Step 2: In the LocalScript, you should type/decode the script by saying:

local UIObject = script.Parent
UIObject.AnchorPoint = Vector2.new(0.5, 0.5)

^ This sets the AnchorPoint of the button or frame on whichever the LocalScript is inside of or known as the parent.

Step 3: When you do that, it should make the position anchor well so it won’t go off-set or wonky on your screen, now you should be able to add this into the LocalScript to see some action happening:

local UIObject= script.Parent
UIObject.AnchorPoint = Vector2.new(0.5, 0.5)
UIObject.Position = UDim2.new(0.1, 0, 0.5, 0)

wait(2)

UIObject:TweenPosition(UDim2.new(0.5, 0, 0.5, 0))

^ This will make the “UIObject” position at (0.1, 0, 0.5, 0) and with TweenPosition(), it will smoothly move from where the position is to the position you’ve given the script/frame to do.

Step 4: You now know the actions of TweenPosition(), how about some TweenSize()! Tweening the size will smoothly

With the code below, let’s combine both TweenPosition() and TweenSize:

local UIObject= script.Parent
UIObject.AnchorPoint = Vector2.new(0.5, 0.5)
UIObject.Position = UDim2.new(0.5, 0, 0.5, 0)
 
wait(4)

UIObject:TweenSize(UDim2.new(0.4, 0, 0.4, 0))
UIObject:TweenPosition(UDim2.new(0.5, 0, 0.5, 0))

Step 5: Now you know how Tweening works with the variables/functions you need to use them in GUI animations, there is another function with tweeting that you can do that is more efficient than having 2 ~ 3 lines of code, and that is TweenSizeAndPosition!

Here is the code that you can do with that specific function:

local UIObject = script.Parent
UIObject .AnchorPoint = Vector2.new(0.5, 0.5)
UIObject .Position = UDim2.new(0.5, 0, 0.5, 0)
 
wait(2)
 
object:TweenSizeAndPosition(UDim2.new(0.4, 0, 0.4, 0), UDim2.new(0.5, 0, 0.5, 0))

^ This will save you time and spaces of code inside your LocalScript whenever you’re making some GUI/UI animations!

If you’re asking about the Linear and Bounce, this section of the tutorial was mainly for TweenSize / TweenPosition and not much of those fast or slow movements, hope you enjoyed this part of the tutorial!


Sources and Credits:

Most of the stuff here was from sources such as the Developer Hub, Roblox own tutorials, and especially my brain which was a source as well, not really but you get the point. :brain:

Sources:
  1. Developer Hub.

  2. Fandom.

Some handy plugins to use when working with UI:

Plugins:
  1. AutoScale.

  2. Reclass.

  3. UIDesign Lite.


Fin.

Well, that is all that I have for today, if you have any questions or would want to request this tutorial, make sure to PM me on the forums instead of in the replies as it would create a flood. We wouldn’t want that. :eyes:

Check out this post!

Update Version: 1.8a

Estimated time to make this: 3 Hours and 23 Minutes.

Anyway, keep developing, and make sure to wear your 3D glasses next time!

56 Likes

Great tutorial for beginner UI designers!
I’m more of an experienced UI designer and I am too lazy to read through all of this but I had a look through it and it looks like a well made tutorial! I’m sure this could help some people out!

5 Likes

I can tell that I’ll be looking at many of the sections multiple times in the future. Very useful, thanks alot.

2 Likes

Late update: 1.1

I have fixed some typos and issues with the post, should be clean to read now and better understanding, Tutorial 3 is coming soon!

1 Like

:pushpin: From now on, I will be listing updates onto this reply so I don’t have to flood the whole post:

Update 1.2

Update 1.2

Tutorial 3 is out, which includes scripting the UI, and fixed typos.

More tutorials for Tutorial 3 will be out Wednesday.

Update 1.3

Update 1.3

Edited explanations and added update quotes for every other update.

The 2nd tutorial on Tutorial 3 will be made on Wednesday!

Update 1.4

Update 1.4

Removed some plugins and random sentences in the tutorial, good riddance for that!

^ Either they were Robux or not beneficial for UI development.

Soon I will be adding a full Guidance section!

Update 1.5

Update 1.5

Added a new series called QueTutorials and QueModels, hope this can benefit many developers!

Update 1.6/1.6a

Update 1.6

Fixed minor typos and added a new resource that is out right now!

Update 1.6a

Same thing as usual, but a new update will be coming soon to the topic!

^ Also, added a new resource that will help you with keycards or click detector doors, maybe check that out on my profile?

Update 1.7

Update 1.7

Removed UIInLineLayout as it has been deprecated from a Luau announcement, very busy at the moment but will try to make a new 3rd Tutorial tutorial!

Update 1.8/1.8a

Update 1.8

Horray! The 3rd tutorial about Tweening/GUI animations have arrived, please make sure to check that out if you have some free time!

I’ll work on another tutorial this Wednesday on UIGradients, and I’ve fixed some grammatical errors in the topic. :cool:


Update 1.8a

More grammar and code mistakes in the tutorial and pinned this message for future and current readers to see post updates.

2 Likes