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.
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.
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.
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.
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
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.
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
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.