GUI manipulation

Help and Feedback Scripting Support
#1

Hi! So currently I’m working on a game and have mostly focused on “Physical” systems on my game. Now I want to create a menu UI, but I’m frankly inexperienced with UI manipulation. For example, My Menu UI will have a character selection mode (Pre made characters when a player joins they can click a button and will spawn as the character they selected). However I don’t think most scripters code every little button for general uses. I have this notion that tables are usedto apply scripts to buttons or something among those lines. How may I make multiple UI to remain enabled or disabled when another one is activated like a long line of buttons and if one is clicked all the other UI are rendered invisible or disabled. May someone please reference me some starter material to learn or give me some understanding to topics like this. Thank you for helping!!

1 Like
#2

I recommend checking out the Learn Roblox | User Interface link as a reference to GUI manipulation.

I try to keep to a single main Frame scaled to the full screen size and then create menu buttons under that to open and close sub-Frames
image

lst_Bombs in the screenshot is a scrolling frame under which the selectable items are placed. I make a template and then clone for each item. The UIGridLayout added to the lst_Bombs frame organises everything nicely for you.

The buttons, titles etc. for the template are then under the sub-frames:
image
The Item is a StringValue tag added to the button that the script references so it know what Tool the player wants to equip, and fires that value to the server via a Remote Event.
As for scripting the GUI, I use a single main script to handle equipping and buying things.
I loop through specific frames, find the button and Bind an event to it:

-- SERVICES
local ReplicatedStorage = game.ReplicatedStorage   -- Shared area accessible by server & clients

-- REMOTES
local remoteEvent = ReplicatedStorage.Remotes:WaitForChild("remoteEventName")  -- Define a RemoteEvent to fire Equip events n stuff to the server

-- VARIABLES
local player = Players.LocalPlayer or Players:GetPropertyChangedSignal("LocalPlayer"):wait()   -- get Player list
local GUI = player.PlayerGui.ScreenGui   -- Get the local Player & their GUI
local menu = GUI.ShopUI.frm_Menu
local form_Cash = menu.frm_Cash     -- This is the Cash form
local menuButton = script.Parent.btn_Menu     -- This is the button to open and close the Shop GUI

-- OPEN+CLOSE MENU FUNCTION
menuButton.Activated:Connect(function()   -- Connect a function to detect player clicking openMenu button. 
if menu.Visible == true then
	menu.Visible = false
else
		menu.Visible = true
end)

-- BUY CASH BUTTONS
for i,v in pairs(form_Cash:GetDescendants()) do   -- Loop through the Cash form and check each item
	if (v:IsA("TextButton")) then       -- If the item is a Button, bind an event to it
		v.Activated:Connect(function()    -- When the player presses the button run this function
			print(v.Text, " Buy Cash button clicked")
			)
-- FIRE REMOTE EVENT
			remoteEvent :FireServer(v.Item.Value)
		end)
	end
end

On the server side I have a script listening for the Remote Event firing:

-- SERVICES
local ReplicatedStorage = game.ReplicatedStorage

-- REMOTES
local remoteEvent = ReplicatedStorage.Remotes:WaitForChild("remoteEventName")

-- FUNCTIONS
-- EQUIP EVENT
local function onEquipBomb(player, item)
	print(player.Name .. " fired equip ", item)
	-- DO STUFF, 
end


-- CONNECT REMOTE EVENT
remoteEvent .OnServerEvent:Connect(onEquipBomb)

For the multiple Forms, situation, I have a series of buttons at the top of the main Shop GUI that toggles Visible=true/false on the sub-Forms. It’s quick and dirty.

I hope this helps you. I have been improving on my GUIs but not to any great level yet, but I am happy to share what I have learnt in recent weeks.

One piece of advice, is to give feedback to the player when they press a button & use a Tween to pop the button out and back and play a simple sound. It makes the interaction more satisfying:

2 Likes
#3

Thank you for giving me this guide!!

1 Like