Hello! I recently made a roblox game but the problem is that in-game the ui looks very bad. Unfortunately I also can’t put them all in a frame since I put each button and frame in a different ui. Can anybody help?
it looks like this:
In studio:
it looks like this:
5 Likes
If position is the only thing wrong here make sure you haven’t set their positions with offset, also make sure your viewbox in studio is proportionate to your screen resolution.
3 Likes
How to I not make it offset? Because one time I got this plugin and I set it to scale but the gui looked very weird and squished
2 Likes
One thing I would suggest is making the background of the gui a solid color or gradient color(not white)
edit: the background for the menu could be like blue and the one for the cash like yellow or something and the backpack like gradient blue/purple
2 Likes
I would reprogram the scripts for the UI and put them in the same frame. It may be annoying to do this, but then you can put them in a UIListLayout and configure them to stay in one area of the screen (without worrying about Offset and other settings subject to change in the future—especially with introduction to Roblox on new platforms)
Check out the UI in this game for an example–the UI is put into a list layout and formatted to the left side of the screen…by configuring the UI to be inside of a frame, you can add margin to the right of the UI.
1 Like
do it again and set it to scale and then manually reshape it to the dimensions you want by dragging the UI elements on your screen it could help
1 Like
oooh great! Maybe bold fonts would look better cause it looks like a cartoony game but idk
1 Like
None of the images fit eachother, the UI is just all over the place and
WHY?
WHY NOT JUST 1 SCREEN GUI!?
Anyway, try designing all the UI in a out-of-roblox editor such as Photopea, FireAlpaca or Pixlr.
And by that I mean you design each piece of the UI seperately, like this.
(Each button/frame is a different image)
Make sure that each UI follows the same aesthetic and it doesn’t clash with visual styles.
You should then (for ease on your end) sort all your UI into a single ScreenGUI and rescript everything if required.
1 Like
Hi, I recommend you to use Figma for your GUI designs.
It’s completely free and doesn’t keep you handicapped.
Besides, I also recommend you to not use shadows for your icons since it messes up the scaling. Try not to use Strokes on TextLabels as they look ugly (kudos to Roblox) and use alpha_bleed.js (by @XAXA) to make your icons look cleaner. And you’ll end up with a result like mine. 
Thank you this made my ui look much better.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.