How do you guys handle the multiple GuiObjects? (interactables)

Help and Feedback Game Design Support
, , ,
#1

I have this dilemma that I can just use for-loop in order to apply the UI event listeners.

Like this:

local ButtonCollectionsFrame = --# path to frame with multiple children of buttons.

for _, btn in pairs(ButtonCollectionsFrame:GetChildren()) do
    btn.MouseEnter:Connect(function()
         --# do something...
    end)
end

But sometimes the target GuiObjects are not in the same path therefore, I need to create another listener for it — I mean, that’s the only way?

Another thing is putting the functionality in limited script to prevent memory leaks or something. and they tend to take up the space of the script making the “Main” script confusing when debugging. Though, I know how to use ModuleScript but I don’t know the efficient way to do it.

Other than buttons, some games tend to use multiple ScreenGui for their interface but I don’t know what the benefit for that is if it’s just the same feature or design.

Please give me idea on how do you guys script your UI if it contains bunch of modals or buttons?

1 Like
#2 
-- Get all GuiObjects in the parent GUI (replace "YourParentGui" with the actual parent GUI instance)
local parentGui = script.Parent -- Change this to your actual parent GUI
local guiObjects = parentGui:GetChildren()

-- Function to handle interaction for each GuiObject
local function handleInteraction(guiObject)
    -- Add your interaction logic here
    print("Interacting with: " .. guiObject.Name)
    -- Example: guiObject.Visible = not guiObject.Visible (toggle visibility)
end

-- Iterate through each GuiObject and handle interaction
for _, guiObject in pairs(guiObjects) do
    if guiObject:IsA("GuiButton") or guiObject:IsA("TextLabel") then
        guiObject.MouseButton1Click:Connect(function()
            handleInteraction(guiObject)
        end)
    end
end
1 Like
#3

Text labels cannot be clicked.

If you’re going to get AI to write code, at least verify that it works without error before posting it.

4 Likes
#4

It would be smart to use a for loop for this, however, do all the interactable objects have the same purpose?

2 Likes
#5

Hey!

I’ve meant to reply to you the other day, got caught up with side projects.
Component is what I use for my GUIObjects/instances in general, varying on the game size + complexity. For example a button:

local Button = Component.new({
	Tag = "Button";
	Ancestors = { playerGui } -- Thought to self, where will my instances for my X tag go?
})
function Button:Construct()
   -- Fired when populated within the game. Cloned/parented, set properties here
  self.Hovering = false
  self.Func = nil
  self.Clicker = self.Instance:FindFirstChild("Button") or self.Instance.Button:Clone()
  -- Either you can create a button for each frame, or clone a template button to the script
end

function Button:Start()
  -- Fired when the comp is fully loaded/ready to use
  self.Clicked.MouseButton1Click:Connect(function()
    self.Func()
  end)

  self.MouseEnter:Connect(function()
    self.Hovering = true
  end

  self.MouseLeave:Connect(function()
    self.Hovering = false
  end

  self.Activated:Connect(function()
    task.delay(0.05, function()
      if (self.Hovering) then
        -- you can tween the size of the button here as an example of how powerful components are!
      end
    end)
  end
end

function Button:Hook(passedFunc)
  -- I call this after I use :WaitForInstance, with a :andThen chain to access with function
  self.Func = passedFunc
end

And usage would be something like:

-- In a knit controller
local ButtonComponent
local mainFrame = Players.LocalPlayer:WaitForChild("PlayerGui"):WaitForChild("ScreenGui").Frame

function Controller:KnitStart()
  ButtonComponent = require(Path.To.Button)

  ButtonComponent:WaitForInstance(mainFrame.PurchaseFrame):andThen(function(purchaseComp)
    -- PurchaseFrame should be a frame, containing the button named "Button" with tag "Button"
    purchaseComp:Hook(function()
      -- Your event will fire, and play any effects you have on the button!
      print('Nice click')
    end
  end
end

Now do note, that this is a prime basic example usage of how I utilize my events, feel free to structure/add to it as you please. There’s useful methods that allow you to interact with your component accordingly, so feel free to read over the documentation.

What this does
For every button you have tagged with a Button tag, this will allow you to WaitFor each button component, and apply special effects/hover events/etc accordingly.

I hope you’ve either learned something new, or considering using this with Knit is amazingly powerful if you feel like game structures are more your style! (Downside being Knit is a global mutable table, as most don’t mind that)

2 Likes
#6

As far as “Multiple Interfaces” go, memory wise multiple interfaces will be your best bet if you aren’t rerendering the main UI constantly. Although it is more often seen with users using one ScreenUI, I utilize one as my Main UI with menus/Hud, and another for effects, another for notifications, etc. When it comes down to game structure, it’s all about what fits you, and creativity. Reviewing Open Sourced projects may assist you leading toward that direction.

I personally think Knit may be more towards your resolution if you have an understanding of OOP (Object Oriented Programming). You’ll be able to define Service (server) < - > Controller (client) < - > FrameName to maintain consistency (my personal method), or any method you feel suits you. For example;
VotingService – Handles the voting on the server end
VotingController – Handles the voting on the client/visuals
VotingMenu – The frame

2 Likes