Intro
I’ve been making projects and games on Roblox for a long time and something that has always been a bit of a limitation for me is the various problems GUIs on Roblox currently have which ruin many precise effects and animations often making certain things almost impossible to achieve without use of off platform software and reimplementation to Roblox or sometimes not at all
Because I have accrued a couple of projects under my belt in my time developing that faced these issues, I’ll be using them as examples to demonstrate my point throughout this post.
The point of this post is to examine some of the limitations of Roblox’s current UI system and how it can be improved. While I am not a Roblox developer nor do I know a minutiae of how things work behind Roblox’s closed doors I hope someone might stumble on it and glean some information they didn’t know before and decides to try to fix it be it a Roblox developer stumbling their way onto this post or be it a passionate developer making their own workarounds for the problems I’ve experienced
Part 0 - The Good
As I’ve said, I have been developing on Roblox for a while now, and one advantage it has over most other platforms and game engines is its ease of use to both beginners and experienced developers, with its UI being no different in that sense.
Roblox’s GUI system is very easy to use and making great designs with it is a breeze while also being scalable to platforms with differing resolutions and aspect ratios automatically, it is also not too hard to implement GUIs into your code as they are very beginner friendly, and with features like UI layouts and UI size constraints, and the like, it is possible to achieve a great GUI without writing a single line of code.
Roblox’s GUI system also makes it very easy to make appealing designs using UI Gradients, UI Stroke, Rich Text, and so on, alongside even allowing for more complicated things like masking (although in a very limited way) using Canvas Groups and 3D object integration in GUIs using Viewports.
It is also very clear that Roblox is insistent on improving the GUI system in the future, with them continuing to add more and more features to it, while improving older ones, for example, recently with adding right-to-left text support, UI Drag Detectors, and more.
However, problems arise when trying to go above what it was designed with in mind, like when doing more complicated animations than simple axis-aligned motion or rotation, or when trying more complicated things, like full-on image masking.
Part 1 - UDim2 Variable Rounding and Subpixel Precision
A big problem with GUIs is their extensive use of UDim2 for scale and offset, the problem with that is that UDim2 rounds both scale and offset with scales rounding to the third decimal and offsets rounding to the nearest integer causing animations be they manual, tween-ed, keyframed and so on to either stutter or not work at all in some cases based on the scale they are being done at
In this example, there are multiple issues caused by UDim2’s awful rounding:
-
Due to the size of the popups, the white inside frame is rounding up during the animation, a glaring white line can easily be seen on the righthand side of the animation, which could be fixed if the offset and/or the scale values of the UDim2 were subpixel precise
-
The stuttering of the lowering and raising text which is amplified by the the fact that the Text Labels size is not changing at a constant rate due to the rounding UDim2 has for offset values which could be fixed if the size of the Text Label could be changed with more precision to allow for smoother animation
-
The jumpiness of the animation during the closing sequence is also caused by UDim2’s use in the Position of UI elements meaning that animations that have elements that speed up over time are seemingly delayed by the fact that no change can be seen until the elements being animated are moved a full pixel, this means that by the time you can see that the animation is taking place it has already been playing for a while and has accelerated without any change being visible resulting in seemingly jumpy movement
This can be seen better when slowed down, however, it can be noticeable, depending on how fast an animation is
Part 2 - Rotation and AA
Another big limitation GUIs and Roblox in general have is their lack of Anti-Aliasing (or AA for short), which is most visible when it comes to round and/or rotating UI, since their harsh edges are very easy to spot.
In this example, it is very easy to spot the glaring lack of AA on the underscores of the text, which are made from Frames, but since they are long and have very minute rotations, it is very easy to spot the harsh edges where pixels are rounded, even more so as their rotations change.
However this could easily be fixed using AA, in fact the rotating corners and “E” prompt on the left of the text both have AA making it them lot smoother and nicer to look at as they rotate since Images and Text Labels implement AA, however other UI elements like Frames for example lack them for some reason or another making using them for effects very painful on the eye.
Part 3 - Image and Text Label resolution and Point Sampling
In the previous point, we saw how Images and Text Labels implement AA; however, this does not mean that this should be applied to all UI elements, since it also boasts its own problems.
In this example, it can be seen how Rotation and Texture Resampling affect a set of cards with their suit and rank appearing in 4 completely different ways when rotated alone and when rotated alongside their parent.
On the left card it can be seen how different the AA between the rank facing up and the one upside down is with the upside down one having way heavier blurring overall which is caused by the texture resampling used on text which can be seen on the right card as it has the same issue (albeit far less noticeably) this time on both the rank that is upright and upside down.
Another pitfall that Images and Text Labels share with other UI elements is that they also experience problems when it comes to rounding. While they may look good when rotated, they do not boast the same amount of quality when pivoted:
In the example above, it is very easy to see how, while the “UP” indicator in the middle of the cards moves very smoothly, the rank and suit of the cards do not hold up as well as their position seems to experience the same rounding problems as we saw in the example in part 1
Conclusion
Roblox’s GUI system is undeniably user-friendly as can be seen by most if not all popular games using it heavily and it is powerful for most standard use cases but as we’ve explored its limitations become very apparent when attempting to create more advanced UIs: The issues with UDim2 rounding, lack of anti-aliasing on certain UI elements, and inconsistent texture resampling all contribute to a system that struggles with precision and high-quality animations however these are only scratching the surface of how limited Roblox’s GUI system really can be
This post has only focused on animation and rotation, scaling, and positioning within animation.
There are far more problems when it comes to Roblox’s UI, with some examples being its lack of real support for more advanced techniques like masking, and others only really being possible using outside tools, due to how limited Canvas Groups and descendant clipping are
Or another problem is the current way Viewports work lacks any lighting and is missing a lot of features the rendering engine has currently meaning that most developers opt to just use camera tricks to use the real world renderer instead of Viewports when it comes to rendering 3D objects in their UI by positioning certain objects in front of the players camera using CFrames.
So in conclusion… pls fix?