UI Code Spaghetti

Help and Feedback Scripting Support
#1

Hello, I’m interested in a bit of help on UI programming. You see, most of my UI code is very messy and hard to read. It’s a stark contrast to my other code which tends to be neat. My UI code usually ends up like this because of cleaning up disconnections, among other things.

However I recently played Acceleration Flight Simulator and found their UI to be incredibly advanced. After asking someone, their UI only took 1 day and then I knew I had to be doing something wrong with my UI code.

Does anyone know of something I might be doing wrong? Or perhaps a better methodology towards UI programming then creating function after function for mousing over, clicking, etc. It gets exponentially harder as each menu opens new buttons that need to be connected and disconnected as needed.

#2

Make the frames, buttons, with little to no detail, just enough so you can tell them apart, and script it, once it’s ready, design the ui all how you want it. For me this is more efficient.

#3

It has nothing to do with the detail of the frames or buttons. It has to do with the code itself. I find myself spending 3 days writing a basic main menu because it’s a tedious pain to :Connect(), :Disconnect() each function that I assign to each UI object related to highlighting when moused over and executing different code when clicked.

#4

Ah, I never use :disconnect(), I hope I’m doing nothing wrong lol.

#5

Disconnect in GUI is only required if a container has to be reloaded each time, but not recreated. All events related to an instance get disconnected automatically upon destruction.

There are a few more use cases for disconnect here, like checking how long a user held the mouse button (usually for dragging), but they are rarely used in common cases.

#6

Take advantage of loops and tables.

Loops can make button hover effects quickly, and tables can make connections easier.

local buttons = ui.Buttons:GetChildren()
local connections = {}

-- apply hover effect to all buttons
for _,button in pairs (buttons) do
     table.insert(connections, button.MouseHover:Connect(function ()
          button.BackgroundColor = Color3.fromRGV(100,113,214)
     end))
end

function disconnectAll()
     for _,v in pairs (connections) do
          v:Disconnect()
     end
end

Tables can make connections easy

#7

I use a similar methodology. I was curious if anyone has something in the vein of UI code libraries or development of their own UI backend, so that you can simply use something like Metatables to streamline the process even more.

#8

Roact is a very powerful library that I highly recommend.

I made a custom inventory system that used metatables to control the inventory UI elements and I found that worked pretty well. Metatables shouldn’t be used in all situations however

1 Like
#9

Also, where did you hear that it was made in 1 day? I find that hard to believe personally. Unless they meant coding it only took 1 day

#10

The coding, of course, took only one day. Also, what does Roact do?

#11

That is kind of hard for me to explain.

Enjoy this amazing video that roblox has kindly created for us: Documentation - Roblox Creator Hub

#12

Alright, however Roact doesn’t really help with my issue of exponentially complex code.

#13

I second the use of Roact. It let’s you focus on creating smaller components of your UI, that you can use together to build full interfaces. It’s a lot easier to build complex things if you can break it down. Make sure to try to keep the code that changes visual aspects of your UI separate from code the that handles game logic. This is best achieved by following OOP principles and using module scripts.