Hi, I am looking into making a lot of UI for some stuff I am doing and I would like to make the process simple. How would I go about scripting UI? Please recommend some resources that can assist me in this endeavour.
For reference, here is the last thing I’ve scripted with UI and I am not really proud of it…
You can see that I have been using EgoMoose’s gui library and it is just troublesome to work with!
Due to common misconceptions with why this is in Code Review Here are my reasons:
It is not Art Design Support since this is a scripting problem, not an art problem. I do not care about how my UI looks and what I can do to make it prettier because that is not the feedback I want.
After further consideration, I have moved this Post from Scripting Support into Code Review, since it is not seeking to solve a scripting problem, but rather improve on already existing code.
Are you planning to make something specifically similar to this, or are you asking generally?
If you are, your best bet is probably just to use a UIListLayout, a template, and a loop. The filter can be applied afterwards, making frames that don’t meet the requirement Visible to false.
I am showing what I am already capable of, the image shown is my experience with making ui. The reason I am showing this is that I am not a beginner.
I am asking for a better way of scripting ui.
Yeah, but… what does this mean? Can you show code that we can improve or something? We can’t identify a better way if we don’t know how you’re doing it.
Ui is the one script thing that I really don’t like doing
What I’ve found works best for me is making a Ui library and prefab ui elements (which includes custom scrolling frame, viewport button, basically more complex ui elements). This is however, quite an investment, I would recommend perhaps finding another ui library that fits your needs
The other solution I opted for once was scripting all the Ui raw. It actually works ok, but the scripts end up massive (though since it’s ui, it’s not complex code, so massive scripts is less of an issue)
I just cannot make Ui by hand (from studio, and not from scripts), it just doesn’t work for me. Even all the fancy no script features roblox added, there is always something you need to script (something as simple as making the size of the Ui grow non linearly with the screen size)
Ui libraries make scripting Ui faster, and lead to a consistent Ui in your project, which is nice
honestly at first glance i really liked your first UI. i briefly came across Myzta’s video on how to organize your scripts etc the other day. hopefully this is helpful
I am looking forward into making a custom ui library for my own needs as I believe that Roblox is missing some important ui features (like a color picker). Although I will still usually have to be scripting it raw which, as you said, makes the script very long and tedious to go over.
I am looking foward into UI libraries yet I have had a bad experience with React lua and EgoMoose’s Ui lib. Some suggestions for a ui library would be good.
ive found success in just making and using the raw instances since a few purpose-built wrappers, for me its easier to control style and layout if i do everything myself with that
though your UI? only thing its missing is stying (which could be fixed by adjusting the borders and changing the colors)
the layout is quite nice
I have no words and I am deeply horrified from this.
For one, why do you have individual utils under the modules?? I keep all of my utils within Replicated Storage or my libraries. Sure you have a dedicated utilities folder but that just ruins the folder itself if you have modules named “Utils” under some modules…
Like this ^
And another thing, why are there so many modules…??? The main point of having multiple Screen guis is that they each do their own thing and should have a local script under it. I don’t see how this is necessary as it only over complicates things…
That is poor usage of a module script. At that point the utils should be a function within the script.
Modules are meant to reuse code in multiple scripts, simply using them once is just terrible for the sake of it.
I’ve looked through this video and from my 5+ years of using Roblox Studio, I don’t really agree with this sort of organization (even the ui part). This video is irrelevant to the issue I am having that being scripting UI. I am not looking for another way to organize them since I already have my own way of organizing my code and assets.
The local script wait for the player data to be loaded, then require all modules inside the ScreenGui folder.
All modules under the ScreenGui folder act as independant local script, they all run through an individual thread and do not return anything to the local script.
The utils module inside some of them are only used by it’s parent module, it contain frequent used functions and mostly serve to reduce main module lenght a bit, to clean it up and make it more readable.
All modules under the Utilities folder are meant to be used by most ScreenGui modules, they contain commonly used variables and functions.
There is no point to store modules in replicated storage if they are not used by the server.
I’m not a fan of placing local scripts inside the PlayerGui. Spreading scripts everywhere is annoying. I prefer keeping all of them to the same places (StarterPlayerScript, StarterCharacterScript & ServerScriptService), and I choosen the best organization that work well to script all GUI without using many different local scripts that fill-out the StarterPlayerScript storage.
There is no overcomplication, it is simpler since all the scripts are in the same location. In fact, it doesn’t change anything or require extra work.
I do not see how this is relevant and am confused on what this is referring to… the main point of utilities is to provide a function that is used in many different scripts and client-sided scripts are no exceptions. However I can see how some utilities that are meant for server usage only should be kept on the server.
I feel as though we are deviating off the issue that I am having. Which is what I can do to script my UIs in a better way, not how organize my UI code should be.
The main point of this post was to see what other devs do to script their GUIs, like there’s React lua but I’ve never had ay experienced with it other than knowing that its a direct port of React…
And I don’t really know what Fusion is other than it being similar React Lua…
Really I would like to know how devs use these tools into their workflow and how it benefits them as a whole as well as what other libraries they use.
Thinking outside the box is valuable for many things. Modules can be used in various ways, not just as code storage or OOP. I don’t see how it’s a bad thing to use modules the same way as normal scripts, since they are still scripts and run as an extension of the script that requires them.
well you’re asking 2 different questions now and crygen gave solid advice already but if u want to improve your code u should be showing it so that we can help u. u should be showing us ur process.
show us how your UI & scripts are set up in the workspace, etc.
show us your code so we can give u relevant feedback on ur code.
