Why is my UI so squished? I'm using Offset

I’ve made some User Interface for my game and I’ve used offset to scale it, so it should look fine on all devices, correct? Not really, here’s screenshots of what it looks like on PC:


Phone:

Tablet:

You can see how its very squishy on tablet right? Why is it squishing like this I’ve used offset to scale it so it should look fine? How can I fix this??? Also ignore the ‘get skin’ button that was just for testing :stuck_out_tongue_winking_eye:

3 Likes

Try detecting the tablet then making it extend the Ui.

4 Likes

Cause you are using scale so scale of UI on computer and on tablet will the different(the tablet’s screen is way smaller) so try adding a UISizeConstraint.

2 Likes

No I’m using offset but I’ll try this UIAspectRatioConstaint thing ty.

2 Likes

Im pretty sure there’s a thing called “UISizeConstraint” it basically constrains your UI in a certain size. Here’s a link:

UISizeConstraint | Documentation - Roblox Creator Hub

2 Likes

You should consider changing to Scale.

1 Like

I agree. It makes pixels of your tablet its size. Lets say you have .2 frame. it covers 20% of the whole thing, so when we go to our tablet. it still gets 20% of the over all pixel and size then move it there. @Rynappel

Edit: that’s just a basic explaination

2 Likes

So should I be using Scale instead of Offset and inserting UISizeConstraints into my UI? Do I need to inset a UISizeConstraint for every Frame, TextLabel etc?

1 Like

UI Design Starter Guide Here, there’s a starter guide that i found helpful. It explains more, and really gives all the downsides of both scale and offset.

1 Like

All you need is to convert to scale sizing and a UIAspectRatioConstraint, you don’t need a size constraint.

Here’s a really helpful plugin that does this:

2 Likes

Speaking of this yes, But luckily there is a plugin for this. It’s Called AutoScale. it can convert Offset to scale without changing its size. Here’s the link. AutoScale Lite - Roblox

oops got late to the party.

2 Likes

This plugin messes the Ui up as I have found I personally don’t suggest using it.

1 Like

What do you mean mess up? It works fine.

1 Like

Confused, It works. Ive been using it for few weeks now and its pretty effective ngl.

1 Like

Not for me. (30 characters…)

1 Like

How exactly tho? really30chars

1 Like

Watch the tutorial on it https://www.youtube.com/watch?v=Mafquy7YQmA&feature=youtu.be

1 Like

Life saver man I’ll try this out and tell you if it works :slight_smile:

No Problem! Hope your project becomes finished!

2 Likes

Work perfectly, but the position is kinda off @cool900s.

1 Like