User blog:Daviidi/Scripting GUIs

Scripting GUIs
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.

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.

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"

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.

If you like, add a baseplate or spawnlocation now.

Creating a simple button
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).

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.

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

You have your script up now, we don't want it to run after 4 seconds, we want it to run when the button is clicked, so replace the "wait(4)" with: script.Parent.ImageButton.MouseButton1Down:wait This will make it wait until the ImageButton has been clicked on, instead of waiting 4 seconds. Return to the place window and use Tools>Test>Play Solo to test the script, it will make the button bigger when you click it!

We don't want the button to stay there after it's been clicked, so let's add another line of script at the end: script.Parent.ImageButton:Remove This will remove the button once it's been pressed!

Textbox Validation
Ooh, a complicated word! Basically what it means is that you need to type a correct word into the textbox for something to happen!

First, let's delete that awesome ImageButton!

Then we can add a textbox!



There should be some text saying "TextBox" in the top right of the frame, we'll change the positioning of that now.

We want the textbox to take up the full frame, so we're going to have to use the UDim2 positioning, click the TextBox and scroll down it's properties to find "Size".

The value should be "{0, 0}, {0, 0}", click the plus next to it.

It says: "X: 0,0" and "Y: 0,0", X is the Width, Y is the height, expand the Y by clicking on the plus next to it.

You should see "Scale", and "Offset", the Scale is how much of its holder it fills, for example a scale of 1 would mean it completely fills up its holder's width, a scale of 0 means it doesn't fill any up, a scale of 0.5 means it fills up half of its holder.

Set the Offset of Y to 20. Leave the scale as zero. Then expand X with the plus button next to X.

Offset is how big it is in pixels, for example an offset of 50 on X would mean 50 pixels wide. Simple.

You can combine these two to make complex widths, for example you could set scale to 0.5 and offset to 100, so it would be 100 pixels past half-way!

If you don't get these, try experimenting with it, set scale to anything between 0 and 1, and set offset to anything between 0 and about 800, depending on how big your screen is.

We want it to fill the whole frame's width, so we want it's X Scale to be 1, and offset to be zero.

Your GUI should now look like this:



It doesn't look very good, having a grey textbox on a grey background, so let's change the Background Color!

Scroll through the properties of the textbox until you find "BackgroundColor3", select the property, and a "..." box should appear to the right of the property.

Click the "..." and a window asking you to select colors should appear, we want the textbox background to appear white, so select white:



The box will now appear white.

We don't want it to say "TextBox", so we'll change it's text. Scroll down the properties to find "Text". Let's change it to a secret question that only someone really intelligent would know the answer to; Make up your own, I used "What goes quack?". Don't worry if your question overflows the frame, we'll expand the frame later.



We don't want it right at the top of the frame, we want it halfway down, so let's go to Position, and change that to be halfway down:

We want X to stay at 0,0, because that's where the left side starts from.

We want Y to be at 0.5 scale, because that's half way.

But hang on a minute, we want it's center to be halfway down, not the top to be halfway down!

The best way to do this is to set the Y offset to be -10, that way the top is ten pixels above the center, and since the overall Y size is 20 pixels, the center of the box is halfway down the frame!

Next thing we need to do is add a title, we could use a TextBox, but then people could change the text in the title by clicking on it, so we'll use a TextLabel instead.

...

I give up on this, this is the Second time my browser's randomly crashed after writing for half an hour.