Please note that this tutorial will only contain the basics and a bit of scripting tutorial.
To first create a GUI head over to StarterGUI
And add a screen gui.
When that’s done, you can add:
a frame / text label / text button
Standard box with nothing inside, the button can fire this function
(script.Parent.MouseButton1Click:Connect(function() --code goes here end),
and you can add in the text label your own text which can’t be modified by an user.
image / video
Used to show a video / decal from the ROBLOX library, you can even upload your own images as long as they respect TOS
Textbox
Kind of like a text label but normal users can change their own text (only for them)
There can be multiple UI’s contained in one UI, that means that you could add a localscript in an imagebutton that when pressed can enable an UI.
Code used for the button
script.Parent.MouseButton1Click:Connect(function()
script.Parent.Parent.cs.Enabled = true
end)
You can also have the GUI as a model or folder , as I’m showing here.
To change the aspect of the UI we can use two things (I’m going to explain only 1 because they’re the most important).
You can change them in two ways:
Script
Adding an UIComponent.
For the script one:
Create a button.
Add a localscript.
Ok we can start our coding!
Let’s say we want to change the text color of a text, this is how you do it:
First thing: Variables very useful if you want it to be minified.
local billy = script.Parent
Ok let’s add a function, don’t be scared: it’s easy!
local billy = script.Parent
billy.MouseButton1Click:Connect(function()
end)
Now it’s time to actually add the script that will make the text color change. Let’s add another variable, shall we?
local billy = script.Parent
local jonathan = script.Parent.Parent.TextLabel
billy.MouseButton1Click:Connect(function()
end)
Coding part!
local billy = script.Parent
local jonathan = script.Parent.Parent.TextLabel
billy.MouseButton1Click:Connect(function()
jonathan.TextColor3 = Color3.FromRGB(255, 255, 255)
end)
--edited thanks to VSCPlays after letting me know that my code was wrong
And you can do this for (almost) every property!
Goodbye fellow scripters, and if you have any problems you can find a more in-depth explanation in the links.