UI looking different in Studio, and play-test mode, than UI in normal game

When working with UI, it is very frustrating / very annoying to get UI perfect in studio without having to constantly play the game using RobloxPlayer. And here is exactly what I mean:

Studio:

PlayTesting In Studio:

PlayTesting using roblox player:

The question is, how can I stop this from happening? It is very hard to make a perfect UI in studio (Because the UI will be positioned differently in roblox player and studio), how can I keep this from happening / what is the best way to deal with this?

Use scale instead of offset, heres what it looks like (Should skip to 6:18, if not, just go to that time stamp):

Alternative Link Advanced Roblox Studio Tutorial (Creating an Advanced Game Menu) PART 1 - YouTube

Changing it to scale helps it “resize” itself to fit the amount of pixels/be proportional, the reason why it doesn’t fit is because you’re using offset which doesnt change according to size of the screen.

Using the emulator could also help you see what it may look like on different resolutions/screen sizes.

Also, cool plugin to check out:

Theres a button (UIAspectRatio) in it that allows you to make sure UI shapes are consistent: Squares are squares, rectangles stay rectangles, etc.

Though this may make it seem as though offset is useless, its actually quite useful in some cases. Make sure your scrolling frames also use scale instead (It might get more trickier though).

2 Likes

The video says: “Video Unavailable”

Try the alternative link, see if it works now

1 Like