How do I fix my UI?

Help and Feedback Art Design Support
#1

My Problem

Recently, I’ve opened up UI commissions and I like to join my games to see how my UI designs look in-game. I’ve constantly encountered issues and don’t know how to solve them, and I’d like to ask you: How do you, a developer, deal with this issue?

What I’ve Tried Doing To Solve This

I’ve constantly tried to find ways to fix this. I know that the studio screen isn’t the exact size of the screen you get when you join the game, which is why things get messed up. I’d join the game, see what’s wrong, go in studio, and try to fix it. I’d move things around, rejoin, and try to fix the issue that way. But later on I’d noticed that nothing changed. Like, literally nothing changed no matter what I did. Do I need to move the anchor point? Do I need to resize it? I don’t know what to do.

How It’s Supposed To Look

When I join in studio, it looks like this:

753×508 75.1 KB

But when I join in ROBLOX, it looks like this:

808×579 102 KB

I’m Probably An Idiot

I’m new to UI Design, and making any UI overall. I’m a huge rookie and I’m sorry if this topic makes you cringe. If anyone has a solution / can tell me what I can do to fix this, it’d be great.

You can message me here on the Developer Forum at @lukesaIt or on Discord at iGrxious | Stewie#1000. Thanks for reading!

5 Likes
#2

Well maybe this tutorial can help?

4 Likes
#3

Thanks! I’ll check it out. It’s not essentially what I’m looking for, but it may have my solution. I’ll check it out later tonight once I’m done with my homework; once again, thank you very much!

#4

I think this might be a scaling issue? Sometimes in studio it appears one way but when you load in the scaling messes up. Does the same thing happen when you play test on studio?

#5

No, the same thing never happens in studio. The reason is because studio shrinks your screen in editing AND test, so the screen always appears the same. I believe I either need to scale it quite differently or set an anchorpoint for each component.

#6

Ya that was my guess I think I had the same issue. What might work is if you attach the GUIs to one another so that if one stretches the rest stretch. So essentially a fit to scale.

#7

How to I attach a GUI to another? Sorry, I’m new to this.

#8

I am not exactly sure but their should be a way for UI’s to be fit to scale. Meaning no matter if the screen is wide or small it ends up staying the same.

I think anchorpoint might actually end up doing the same thing. For UI’s I like to play around with scaling and such and different options.

#9

Thanks. I’ll try that later. Hopefully it works!

2 Likes
#10

I am going to tell you the fix! When making a GUI that is responsive to both phones and PCs, do this. First: Click your ScreenGui, and select what ever thing you want. TextLabel, TextButton, etc.
Second: Scroll all the way down until you see size. Click the little arrow, and another menu should pop up saying X,Y.
Third: Click the arrow again on both the X,Y options, and you will see two options. “Offset” and “Scale”
Fourth: Make your Offset: 0, and your Scale: 0.1 for both X,Y.
Fifth: Then use your cursor to scale the textlabel, textbutton or whatever you are using appropriately.

Notice: This will fix the issue and if it doesn’t report back to me. If you have already tried this then reply to this saying that you have tried it and I will try to help you further.

#11

Thank you so much! I’m going to try this first, as you seem very certain. I’ll get back to you once I try it and report any issues.

#12

It worked decently; the best I could do was a little accurate to the main.

You can see what I mean here—it’s similar, but it looks a bit strange compared to what I wanted it to look like. Thanks anyways! It looks better, so I can’t complain!

2 Likes