FANDOM


GUI Objects

ScreenGui

The ExplorerImageIndex 47ScreenGui contains all GUI objects a player can see. They must be placed inside a ExplorerImageIndex 12Player's ExplorerImageIndex 46PlayerGui to be visible.
Gui objects

Gui objects

There is also a GuiMain object but it is deprecated now. They are put into ExplorerImageIndex 46StarterGui or are created by a script.

BillboardGui

The ExplorerImageIndex 64BillboardGui is a special GUI object, it is attached to a BasePart so it is always above/under/next to a part. To attach a BillboardGui to a Part instance, set The BillboardGui's Adornee property to the part.

Frame

The ExplorerImageIndex 48Frame represents a rectangle on the screen. Most other GUI objects are based on the Frame.

TextLabel

The ExplorerImageIndex 50TextLabel represents a ExplorerImageIndex 48Frame with a label. To create a TextLabel that just displays the text, set it's Size to 0 x 0 pixels or it's BackgroundTransparency to 1.

TextButton

The ExplorerImageIndex 51TextButton looks like a ExplorerImageIndex 50TextLabel, but retrieves 6 additional events (MouseButton1Click, MouseButton1Down, MouseButton1Up, MouseButton2Click, MouseButton2Down, MouseButton2Up) which are fired when the player clicks on the TextButton.

TextBox

In addition to the events and properties of ExplorerImageIndex 50TextLabel, the text of a ExplorerImageIndex 51TextBox can be changed by the ExplorerImageIndex 12Player online. To do so, the player has to click on the TextBox, write something and then press enter. The TextBox only supports lower case characters, numbers and some other character like ",", ".", "/" etc.

ImageLabel

Is a Frame, that shows an image that is placed over the background of the ImageLabel and streched to it's Size.

ImageButton

The ImageButton is just an ImageLabel with the same events as TextButton.


Like all objects in Roblox, you can create an instance of those GUI objects with Instance.new(className).

Coordinates

The coordinates of the Roblox GUI have 4 values: X.Scale, X.Offset, Y.Scale and Y.Offset. To create a new coordinate value use UDim2.new, this function takes 4 arguments and returns a userdata.

something.Position = UDim2.new(0, 10, 0, 10)
Coordinates
The point UDim2.new(0,0,0,0) is the upper left corner of your screen (0|0), the highest x coordinate is at the right side of your screen and the highest y coordinate is at the bottom. Something would be at 10|10.


Calculating the absolute position or size.

Even if there is are the properties AbsolutePosition and AbsoluteSize which contain those values, you should know how to

calculate them, so you can understand Roblox' system for sizes and positions better.


Let's start with two frames. The first one will be in a ScreenGui object, the second will be inside the first. Then we make the second one red it should be the same colour.
Example1

Example 1

local frame1 = Instance.new("Frame")
local frame2 = Instance.new("Frame")
frame1.Parent = script.Parent
frame2.Parent = frame1

That shouldn't be too hard. Now we change the size of frame1.

frame1.Size = UDim2.new(0, 200, 0, 100)

frame1 is now 200 x 100 pixels big. Now frame2:

frame2.Size = UDim2.new(0.5, 0, 0.5, 50)
frame2.BackgroundColor3 = Color3.new(1, 0, 0) -- more about colors later

frame2 will cover the left half of frame1, but why?


The second and the third arguments of UDim2.new are the X and the Y-scale. A X-scale of 0.5 is the 1/2 of the Parent's X-size.

absolute_pos_x = me.Position.X.Offset + (me.Position.X.Scale * me.Parent.AbsoluteSize.X) + me.Parent.AbsolutePosition.X
absolute_pos_y = me.Position.Y.Offset + (me.Position.Y.Scale * me.Parent.AbsoluteSize.Y) + me.Parent.AbsolutePosition.Y

absolute_size_x = me.Size.X.Offset + (me.Size.X.Scale * me.Parent.AbsoluteSize.X)
absolute_size_y = me.Size.Y.Offset + (me.Size.Y.Scale * me.Parent.AbsoluteSize.Y)

The AbsoluteSize of a ScreenGui is equal to the size of your window or rather the part used for the 3D world, it's AbsolutePosition is 0|0.


Now let's check it.

absolute_size_x = 0 + (0.5 * 200) + 0 -- the position was not set, it is 0|0 by default.
absolute_size_y = 50 + (0.5 * 100) + 0
print(absolute_size_x,",",absolute_size_y)

You should get this output:

100 , 100

The size of frame1 was 200,100 so frame2 should fit in one helf of it.

Colors

Instead of RGBA values, GUIs use RGB values and a special property called BackgroundTransparency (or for text TextTransparency). The properties holding the RGB (in ROBLOX Color3 values) are BackgroundColor3, BorderColor3 and TextColor3. Those name should be self-explanatory. If you want to use BrickColor values use BackgroundColor, BorderColor and TextColor instead. BackgroundTransparency set the transparency for the background and the border, TextTransparency set the transparency for the text. 1 is completely transparent, 0 is non-transparent, 0.5 is 50% transparent etc.


To create a color value use Color3.new or BrickColor.new

local my_color = Color3.new(r, g, b)
local my_brick_color = BrickColor.new(color)

Color3.new takes 3 numbers from 0 to 1.

violet = Color3.new(1, 0, 1)
orange = Color3.new(1, 150/255, 0)

BrickColor.new takes the name or the number of the color you want, "Bright blue" for example.

Examples

To test one of those examples, create a ScreenGui, put it into StarterGui then create a Script with the example code you want ant put it inside.

Disappearing red Frame

frame = Instance.new("Frame")
Disappearing red Frame

Example2

frame.BackgroundColor = BrickColor.new("Bright red")
frame.Size = UDim2.new(0, 100, 0, 100)
frame.Position = UDim2.new(0.5, -50, 0.5, -50)
frame.Parent = script.Parent
while true do
	for i=1,10 do
		frame.BackgroundTransparency = i/10
		wait(.1)
	end
	wait(1)
	for i=0.9,0,-0.1 do
		frame.BackgroundTransparency = i
		wait(.1)
	end
	wait(1)
end

Popup

button = Instance.new("TextButton")
Popup

Example3

button.Size = UDim2.new(0, 100, 0, 25)
button.Text = "Click me!"
button.Parent = script.Parent

button2 = Instance.new("TextButton")
button2.Size = UDim2.new(0, 50, 0, 50)
button2.Position = UDim2.new(0.5, -25, 0.5, -25)
button2.Text = "Close"
button2.Visible = false
button2.Parent = script.Parent

function button_Click()
	button2.Visible = true
end
function button2_Click()
	button2.Visible = false
end

button.MouseButton1Click:connect(button_Click)
button2.MouseButton1Click:connect(button2_Click)
-- click on both buttons!

Moving square

square = Instance.new("Frame")
Moving Square

Example 4

square.Parent = script.Parent
square.Size = UDim2.new(0, 20, 0, 20)
while true do
	for i=0,50 do
		square.Position = UDim2.new(0, i * 5, 0, i * 5)
		wait()
	end
	for i=50,0,-1 do
		square.Position = UDim2.new(0, i * 5, 0, i * 5)
		wait()
	end
end

References

- ROBLOX Community

- ROBLOX Studio Object Browser

- experience of the author of this article

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.