Hey! Welcome to this tutorial. This turorial will show you some UI coding basics
The main lines when it comes to simple UI coding are script and parent. This is how they look in a script.
script.Parent
But what do they do? Well, the script is basically the script. For example when i want to disable the script i will just type this:
script.Disabled = false
Then the Parent. The parent is, well, a parent. What i mean by that is Roblox uses Childs and Parents in the coding language (lua). So a Parent of a child should mean that the child is inserted in the parent in the files. It should look like this:
The parent is used to quickly locate the parent. Else you whould have to do this:
game.StarterGui.ScreenGui.Frame
^This is for if the script is put in the Frame. But there is a quicker method:
script.Parent
This will just quickly locate the Frame. (Make sure that the script is put in the right Parent.)
For UI coding you most of the time use 2 kind of scripts. The LocalScript and the Script. What do they do? I'll explain it to you.
LocalScript The LocalScript is just a script, but it only effects the player who triggered it. This is mostly used for opening a frame with an button.
Script The Script is just an normal script, and if a player triggers it everyone is effected.
To start, make a ScreenGui. Click on StarterGui. Click the '+'. Then click 'ScreenGui'. (You can right click then click 'rename' to name it how you whould like.) Once you have the ScreenGui, click on the '+', then click 'Frame'. You can customize it how you whould want. Now that we have our basic frame, we can make a button that opens the frame. Click the ScreenGui you just made. Then click the '+'. Select a TextButton. !Not a ImageButton, unless you want a image as the placeholder! Right click the button you just made and click 'Rename'. Name it 'OpenFrame'. You can customize the button how you whould want. You can also position it where ever you want. You can move it by hold clicking the button and dragging it. To put some text in now, click the button and go to the properties. Scroll down untill you see 'Text'. My advice is to look for the option 'TextScaled' and enabling it. Now click on 'Text' and put whatever text you whould like. I did 'Open frame'. It should look like this:
Now that you have the button set up, we can start coding! First, click the frame and scroll down until you see 'Visible' in the properties. Disable it (click the checkmark so it is grey). Now click the button we made, and click the '+'. Then search for a 'LocalScript'. Now we will start coding. When made the code in it should look like this
print("Hello world!")
Now what this does, is print a message to the input. To look for the input, go to view and click input. Now the input should show and when you play it shows "Hello world!" But we dont want that. We want to make it open the frame. So, delete all that. And put this script in.
script.Parent.MouseButton1Click:Connect(function() --Indicates if the button is clicked
script.Parent.Parent.Frame.Visible = true --Makes the frame visible if the button is clicked
end)
Now click play or click F5 to test it. You will see that if we click the button, the frame will open. That's good, but now we need a way to also close it. Click the frame(You might want to make it visible again so you can see it. But dont forget to make it invisible after you coded it.) Then add a 'TextButton' into it. Scale it down and drag it to the top right. We want to give it a red color, so the player knows it is a close button. Scroll up in the TextButtons properties until you find 'BackGroundColor3'. Basically, this is the main background color for the button. Click it and click the white square. Then look for a red-like square in the new window that has opened on your PC. If you found a red-like color, click OK. Now it should have a red color. Scroll down in the properties and turn TextScaled on. Make the text a upper-case X. Then also click the B. This will make the text like this. Now that we have the button, we can start coding it again. Make another LocalScript inside of the button. And put this code in:
script.Parent.MouseButton1Click:Connect(function() --Detects if the button is clicked
script.Parent.Parent.Visible = false --Makes the frame invisible.
end)
Now if you press play and test it, it should work. (!Make sure the frame is invisible!)
Now that you learned the Ui coding basics, this tutorial is over.
You learned how to make a functional frame, open and close button.
You learned what Parents and Childs are. A child is a part of a parent. You learned that there are 2 types of scripts for coding Ui. There is one more, that is'nt used that much in coding Ui. More about that in a different tutorial.
How do i make the frame have a different color? Just like for the button, click BackGroundColor3 and click the white square. Then click a color of your choice and click OK.
The scripts do not work! Try to redo everything you had to, and try to reput the code in.
Thank you for following this tutorial! I will see you in the next one! For any bugs, questions or things that just dont work, tell me about it in the comments!