Buzzy

Register

Roblox Studio Tutorials - June 6, 2022

How to Open and Close a GUI

1

buzzygamesbri

@buzzygamesbri

Download – Open/CloseGUI Scripts

How To – Open and Close a GUI

What’s up everyone welcome to buzzygames, my name is BuzzyGamesBeth and today I’ll be teaching you how to open and close a GUI!

  • Let’s dabble in on creating GUIs. This is going to be multiple videos in this series, but for this specific video, we’re going to learn how to create a GUI where we are able to open it and close it.
  • Inside of our explorer window, find StarterGui, and then go ahead and add a screen GUI. I’ll be renaming this to Open/Close GUI. You can rename this to anything you want, it doesn’t affect our script in any way. This is just to make sure that we remember what exactly this screen GUI does or what the StarterGui is.
  • Inside of our screen GUI, go ahead and add an image button. I am using an image button because I want to use my own image for this button. To change the image or to choose the image that you want to use, click where it says image. Click the button that says add image and choose a file. Locate the file that you want to use, and then click create. It’s going to upload that picture in that image button. I’m gonna go ahead and change the background transparency of the image to one.
  • Inside of our screen GUI, go ahead and add a frame. Go ahead and drag that to wherever you want it to be. This frame going to hold all of our information inside of our shop. For me aesthetically-wise, I don’t like those harsh corners inside of my frames so, in order to make those sharp corners into round corners, I’m going to add uicorner. You can go ahead and add a uicorner object inside of our frame and then a text label just showing us what exactly this frame that we opened is. I’m going to go ahead and write out shop because this is going to be a shop GUI.
  • Inside of our frame, we’re going to add a text button and now this text button is going to be where anytime a player clicks on this text button, the shop GUI is going to close. It’s going to just have an X on it, and I’m going to add my favorite a uicorner just for those rounded corners. We’re going to go ahead and spend the next few seconds just renaming some of our things so we can reference them inside of our script.
  • For our close text button, I’m going to go ahead and rename that to close and then our image button to open because that’s how we’re going to open our GUI.
  • Inside of our close text button, let’s go ahead and add a local script. We have a variable that references our frame, and now we’re going to create a function where any time a player clicks on this closed text button, then our frame is going to be equal to false. So. frame.visible = false. It just means anytime we click on the close button, the frame will not be visible anymore.
  • All right, one last script. Inside of our open image label, let’s go ahead and add a local script. Similar to the close local script, We’re going to go ahead and create a variable that references our frame. Now we’re going to go ahead and create a function where any time a player clicks on this image button, then the frame is going to be visible. Very simple right? Anytime a player clicks on this image button, the frame which opens the shop GUI is going to be visible, equal to true. Head over to your frame properties and make sure active is unticked as well as visible now. If visible is not unticked, if you hop inside for your game, you will see the shop GUI without prompting it to be open.