Whats the most efficient way to manage 100 ImageButtons

I have a grid of 100 ImageButtons.

I want the player to be able to click one, and have the one they selected change to a new image.

When they select a different one, it returns the original selected one to its default state, and the new selected image changes.

I am struggling to figure out the most efficient and easiest way to do this.

1 Like

Initalize every button at Runtime, keep track of which buttons are being clicked, make sure you add a debounce. Once you are keeping track of the last 2 buttons that were clicked, then you do not to iterate through all of them

What would be the easiest way to keep track? Would this be using a loop?

Run a for loop and add a tag to each click using collection service. Then just loop through them and if click detector is clicked then do a debounce.

Run a for loop for every button, inside the loon connect the signal when a button is clicked, and then you can change the variables based on that.

I ran into a similar problem with my game and found a way to have as many “buttons” as you want with just one connection. The way it works is by using UserInputService to detect when the mouse is clicked, and then seeing if any of the buttons are in the same position as the mouse when it was clicked.

local UserInputService = game:GetService('UserInputService')
local GuiService = game:GetService('GuiService')


local function GetGuiObjectsAtPosition(input : InputObject)
	local offset = GuiService:GetGuiInset()
	local pos = Vector2.new(input.Position.X, input.Position.Y)

	return player.PlayerGui:GetGuiObjectsAtPosition(pos.X, pos.Y)
end


UserInputService.InputBegan:Connect(function(input)
	if (input.UserInputType == Enum.UserInputType.MouseButton1) or (input.UserInputType == Enum.UserInputType.Touch) then
		for _, gui in pairs(GetGuiObjectsAtPosition(input)) do
			-- Check if gui is one of the buttons
            -- Rest of the code here
		end
	end
end)
4 Likes

translate it
aqui hay una posible solucion

local buttonfol = nil --aqui va donde estan los botones

for i ,button in pairs(buttonfol:GetChildren()) do
if button:IsA("ImageButton") then
button.MouseButton1Click:Connect(function()
-- aqui el codigo
end)
end
end
1 Like

I have edited this a tiny bit, while maintaining everything you have originally, and I have gotten it to work perfectly. I added a debounce and everything runs smoothly. Thank you so much! Additionally, I am going to make it to where it makes sure it’s parent is in the directory I am looking for, so it doesn’t interfere with any other ImageButtons

1 Like

this is kind of a bloated way to do it. Like ian said below, you can just use a for loop and check if each button is clicked instead of having to check positions. It does the exact same thing and the code is shorter.

1 Like

Having lots of connections is bad for optimisation which is why I recommended this method

I’ve used tons of connections in games before and haven’t noticed any performance drops, at all.
I guess that’s just me

You probably have a decent computer but it might be more noticeable on lower end devices. Either way it still helps

2 Likes