GUI Guide

From Legacy Roblox Wiki
Jump to navigationJump to search

Things you will need

  1. Open up ROBLOX Studio
  2. Open or create a new place
  3. Select 'StarterGui' in the Explorer window.
  4. Go to Insert -> Object -> ScreenGui -> OK

This ScreenGui will be given to every player who enters the game. Whatever we put it in will make those objects viewable.

Let's add a Frame.

  • Go to Insert -> Object -> Frame -> OK

In properties find 'Position', there should be 4 numbers. '0, 0, 0, 0'. The first 0 is X-Offset. Meaning that 0 is on the left of the screen and 1 is on the right of the screen. If we change it to 0.5 the Frame will be in the middle of the player's screen no matter what the player's screen resolution is.

Let's put our frame in the middle of the screen.

  • Change the first 0 to 0.4, which is almost in the middle of the screen.

Now let's move the frame down a bit. Y-Offset is the third 0.

  • Change the third 0 to 0.4, too!

Now the frame's positioning is good we need to add the size. It's just like position. The first 0 is X-Offset

The second 0 is X

The third 0 is Y-Offset

The fourth 0 is Y.

Let's make the X-Offset 0.4 and the Y-Offset 0.3.

So the size would be like as followed

Size | {0.4,0},{0.3,0}

Your screen should look something like this:

Looks quite boring, doesn't it? Well let's fix it up!

Frames have a 'Style' property. In the properties window scroll down until you find 'Style', then change it to ChatGreen, or whatever style you want your frame to have.

That looks better! Now we're going to add some text to it.

Go to Insert -> Object -> TextLabel -> OK, in the TextLabel's properties, change it's size value to as followed:

Size | {1,0},{0,10}
  • Change the TextLabel's BackgroundTransparency property to 1.
  • Change the TextLabel's Font property to ArialBold.
  • Change the TextLabel's FontSize property to Size18.
  • Change the TextLabel's TextColor3 value to 255; 255; 255.
  • Change the TextLabel's Text to "Welcome to my place!"

Your screen should look something like this:

Next, we need to add some information.

In Explorer click back onto Frame.

Go to Insert -> Object -> TextLabel -> OK, in the TextLabel's properties, change it's position value to as followed:

Position | {0, 0},{0, 20}

Now change it's size's value to as followed:

Size | {1, 0},{0.5, 0}
  • Change the TextLabel's BackgroundTransparency property to 1.
  • Change the TextLabel's Font to ArialBold.
  • Change the TextLabel's FontSize to Size12.
  • Change the TextLabel's TextWrap value to true.
  • Change the TextLabel's TextColor3 value to 255; 255; 255
  • Change the TextLabel's Text property to 'Rules: No spawn killing. No team killing. No abusing weapons. No swearing. No being mean.'

This looks awesome!

Now we need a button to dismiss the GUI from our screen.

In Explorer press 'Frame'.

Go to Insert -> Object -> TextButton -> OK, make the TextButton's position value as followed:

Position | {0.300000012, 0}, {0.699999988, 0}

Change the TextButton's size value to as followed:

Size | {0.440000027, 0}, {0, 20}
  • Change the TextButton's Font to ArialBold.
  • Change the TextButton's FontSize to Size14.
  • Change the TextButton's TextColor3 value to 255;255;255.
  • Change the TextButton's Style to RobloxButtonDefault.
  • Change the TextButton's Text to 'Close'.

While 'TextButton' is selected in the Explorer window go to Insert -> Object -> Script -> OK. Edit the script's source to as followed:

function onClicked()
	script.Parent.Parent.Parent:Destroy()
end
script.Parent.MouseButton1Click:connect(onClicked)

And here's our finished GUI: