Scripting GUIs

Scripting GUI's
Scripting a GUI can make your place much more fun and interesting to players, providing them with a way to interact with your game using an interface directly on their screen. This tutorial shows you how to create and script a simple GUI.

Creating the GUI
Firstly, you must open Roblox Studio, it can be found in your start menu, in Programs>Roblox>Roblox Studio.

Now, you should see the roblox homepage with a load of windows around it, click "File", then the "New" button to open a new place.

Once it's open, select "StarterGui" from the explorer window, this contains any Gui objects to be given to the player when they respawn.

Next, insert a "ScreenGui" object from the insert menu, click Insert, then "Object", then select "ScreenGui" from the menu that appears.



You should now have the ScreenGui under the StarterGui object, the ScreenGui is where the GUI will be stored.

Now we need to make a Frame, this is a visible Gui Object that will be shown on the players screen, Insert it using the same method as before, using the Insert menu, select Object, then Frame.

The Frame has now been inserted, you can't see it yet because you haven't set it's size. Let's do that now. Select the Frame object from the explorer window, then scroll down in the properties window until you see "Size"

The size property consists of a slightly complicated matrix called UDim2, which will be explained later in this tutorial, for now, set this to "{0, 100}, {0, 100}", this will create a 100 times 100 pixel box.



Now, to make the box do something!

Scripting the GUI
Okay, now we can script the GUI, let's start with a simple one first, we want it to double it's size after 4 seconds, first thing, we need to insert a script from the Insert Object window, insert it using the same method as for the ScreenGui and Frame, then Double-Click on it in the explorer window.



You should be given a really large Text Field with print("Hello world!") written in it, this isn't needed, just delete it.

Now, we want the script to make the frame get larger after 4 seconds, so the first thing we need to do is type this into our script:

wait(4)

This is basically a way of saying "Wait eight seconds before continuing" to the script. Now we want it to find what it wants to resize:

local frame = script.Parent

This line tells the script to think that "frame" is the scripts "Parent", Parent means what the script is in, we placed the script in the Frame, so it thinks of the Frame.

Next up, we need to tell it to resize that frame to twice the size, we do this using this line:

frame.Size = UDim2.new(0,200,0,200)

when we say "frame.Size", we're saying, "Take a look at the Size property of frame" to the script, the = symbol means "set it", the UDim2.new is the new size, meaning 200 pixels by 200 pixels, which is twice of 100. So we're telling the script "Take the Size property of frame, set it to 200 pixels by 200, please"

Now, there's our complete code, in just three lines, check to make sure it matches this exactly:

wait(4) local frame = script.Parent frame.Size = UDim2.new(0,200,0,200)

Now close the window with the small grey 'x' at the top right of the script. NOT the big red one at the top right of the window, if you get a message asking if you want to save changes to Place1, click "Cancel" and find the other 'x'. You should now return to the view of the place. Now, we need to test this code. We could upload it to roblox, open the website, find the place, and click the play button, but there's a much easier way!

At the top of the window, click "Tools", then find "Test", then click "Play Solo", this will open a new window in which you can test the GUI.

You should've fallen to the bottom of the map, as we forgot to put in a baseplate, but more interestingly, the GUI should've doubled in size!

If it didn't, check the script matches the one above and try again.

Creating a simple button
Now, maybe we could add a bit of player interaction here, let's make it so the user needs to click a button, and the GUI will then double in size!

Firstly, let's move the GUI to the middle of the screen!

We can do this by going to the "Position" property of the "Frame" object, and changing it to "{0.5, 0}, {0.5, 0}".



This sets it to show the GUI's top left corner at 0.5 times the screen's width (half), and half the screens height.

Now the button's in the middle of the screen, we can add a button to it!

Make sure the Frame is selected, now go to Insert>Object and look for "ImageButton", this will insert the object into your frame.

Change the Size property of the ImageButton to "{1, 0}, {1, 0}", this will ensure it fills the entire frame (one times the width, one times the height).

Now, go to the "Image" property of it, then type in the image for the button: http://www.roblox.com/asset?id=28748135

You can use your own image if you know how.

Now, let's edit the script so that it expands when we click the button! Double click the script.

You should get your previous scri