How do I create GUIs that allow users to click on?

Help and Feedback Scripting Support
1

Hey there! I have recently got into UI Design and what not.

I watched this video https://www.youtube.com/watch?v=5UvLNYBQh7Q&t=64s and have formalized myself with UI Design, however I am yet to find out how I can make a GUI that allows others to click on it.

If you have any tips/tricks or YouTube videos to possibly help me out, that would be great.

2

Wdym. You want a button that opens a gui? Or do you mean something else?

3

use a Button instance (TextButton, ImageButton, etc)

script.Parent.TextButton.InputBegan:Connect(function(input)
     if input.KeyCode == Enum.KeyCode.E then
          print("clicked')
     end
end
1 Like
4

For example, If I was to have a button on my screen like such:
image

How would I make it so I could click on said button and add additional buttons within it, like such:

image
image1294Ă—682 477 KB

Following that, how would I add even more buttons onto said GUI that you are able to click on? Like such:

image
image1288Ă—681 131 KB

(Game: 🤸‍♀️ Trampoline Park Roleplay! [🔥NEW!] - Roblox )

5

@Moonvane
This is a UserInput not a text button…

6

a textbutton is a type of user input.

7

@Moonvane
No, InputBegan is from the userInput Service.
Also, theres no events called InputBegan in a textbutton on Developer Hub

To make a click event you have to type:

script.Parent.TextButton.MouseButton1Click:Connect(function()
      -- Your code here
end)
8

[UPDATE] Would the following video be a good representation of what you need to do to have stuff to click on? https://www.youtube.com/watch?v=LP9JHqGgzOk

1 Like
9

No, it does’nt show how he did the scripting he’s just typing without telling anything but the ui is good.

1 Like
10

Oh well. You’d just have to use the button.MouseButton1Down function and set whatever you want to appear on your screen appear on your screen. Whether it be tween or change the visible property. I’ll link wiki pages for reference.

https://developer.roblox.com/en-us/api-reference/class/GuiObject
https://developer.roblox.com/en-us/api-reference/class/TextButton

If you wanna make your guis neat
https://developer.roblox.com/en-us/api-reference/class/TweenService
https://developer.roblox.com/en-us/articles/GUI-Animations

A code

-- GUI, Frame, Text Button
local gui = script.Parent
local button = gui.TextButton
local Frame = gui.Frame

button.MouseButton1Down:Connect(function()
if Frame.Visible == false then
Frame.Visible = true
else
Frame.Visible = false
end

I think you’re looking to change the property of the guis visibility if that’s what you mean. You can go further with the wikis.

1 Like
11

you were saying?

image
image1032Ă—565 67.2 KB

2 Likes
12

Here is a video by Gamer M8 and he shows how to script a Shop GUI but you could apply it to any of them.

https://m.youtube.com/watch?v=aSwGwX7HbOE

1 Like